diff --git a/CHANGELOG.md b/CHANGELOG.md
index c7bfec1..75f14ca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,11 +22,9 @@ Versions follow [SemVer](https://semver.org/) (`0.1.0-alpha.x` while the public
 - MCP / AGENTS docs no longer imply a silent `PRM_PASSWORD=workbench` default
 - Settings → AI: OpenAI-compatible gateways are a separate provider from Cursor Cloud Agents
 - Empty workspaces land in setup until finished or skipped; demo seed marks onboarding complete
-<<<<<<< HEAD
 - **Cursor Cloud Agents** chat: stream status and assistant text live via SSE; empty-result errors include agent/run ids and a dashboard link
-=======
 - Primary CTA hierarchy: NextStep owns the solid primary action; PageHeader/Section duplicates and table-row moves use secondary/ghost so pages like Cycles no longer show the same green button 3–4 times
->>>>>>> bd04ca1 (Clarify primary CTAs across Cycles and other pages)
+- Form dropdowns use themed **react-select** (`AppSelect`) with a properly padded chevron; native `<select>` keeps a CSS fallback chevron that no longer hugs the right edge
 
 ### Fixed
 
diff --git a/apps/ui/package.json b/apps/ui/package.json
index 48a8fc8..7cb19a2 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -13,7 +13,8 @@
     "@prm/shared": "workspace:*",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router-dom": "^7.18.2"
+    "react-router-dom": "^7.18.2",
+    "react-select": "^5.10.2"
   },
   "devDependencies": {
     "@types/react": "^19.2.18",
diff --git a/apps/ui/src/components/AppSelect.tsx b/apps/ui/src/components/AppSelect.tsx
new file mode 100644
index 0000000..2b238d5
--- /dev/null
+++ b/apps/ui/src/components/AppSelect.tsx
@@ -0,0 +1,107 @@
+import Select, {
+  type ClassNamesConfig,
+  type GroupBase,
+  type Props as ReactSelectProps,
+  type SingleValue,
+} from "react-select";
+
+export type AppSelectOption = {
+  value: string;
+  label: string;
+  isDisabled?: boolean;
+};
+
+type AppSelectProps = {
+  id?: string;
+  value: string;
+  options: AppSelectOption[];
+  onChange: (value: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  /** Prefer for unlabeled selects (e.g. compact rows). */
+  "aria-label"?: string;
+  className?: string;
+  isClearable?: boolean;
+  isSearchable?: boolean;
+  /** Stretch to field width (default) vs hug content in toolbars. */
+  fullWidth?: boolean;
+};
+
+const classNames: ClassNamesConfig<AppSelectOption, false, GroupBase<AppSelectOption>> = {
+  container: () => "app-select__container",
+  control: (state) =>
+    [
+      "app-select__control",
+      state.isFocused ? "app-select__control--focused" : "",
+      state.isDisabled ? "app-select__control--disabled" : "",
+    ]
+      .filter(Boolean)
+      .join(" "),
+  valueContainer: () => "app-select__value",
+  placeholder: () => "app-select__placeholder",
+  singleValue: () => "app-select__single",
+  input: () => "app-select__input",
+  indicatorsContainer: () => "app-select__indicators",
+  dropdownIndicator: (state) =>
+    `app-select__dropdown${state.selectProps.menuIsOpen ? " app-select__dropdown--open" : ""}`,
+  clearIndicator: () => "app-select__clear",
+  indicatorSeparator: () => "app-select__separator",
+  menu: () => "app-select__menu",
+  menuList: () => "app-select__menu-list",
+  option: (state) =>
+    [
+      "app-select__option",
+      state.isFocused ? "app-select__option--focused" : "",
+      state.isSelected ? "app-select__option--selected" : "",
+      state.isDisabled ? "app-select__option--disabled" : "",
+    ]
+      .filter(Boolean)
+      .join(" "),
+  noOptionsMessage: () => "app-select__empty",
+};
+
+/**
+ * Themed single-select built on react-select.
+ * Prefer this over native `<select>` so the chevron/menu match PRM chrome.
+ */
+export function AppSelect({
+  id,
+  value,
+  options,
+  onChange,
+  placeholder = "Select…",
+  disabled = false,
+  "aria-label": ariaLabel,
+  className = "",
+  isClearable = false,
+  isSearchable = true,
+  fullWidth = true,
+}: AppSelectProps) {
+  const selected = options.find((o) => o.value === value) ?? null;
+
+  const handleChange = (next: SingleValue<AppSelectOption>) => {
+    onChange(next?.value ?? "");
+  };
+
+  const selectProps: ReactSelectProps<AppSelectOption, false> = {
+    inputId: id,
+    instanceId: id,
+    options,
+    value: selected,
+    onChange: handleChange,
+    placeholder,
+    isDisabled: disabled,
+    isClearable,
+    isSearchable,
+    classNames,
+    unstyled: true,
+    "aria-label": ariaLabel,
+    className: ["app-select", fullWidth ? "app-select--full" : "app-select--auto", className]
+      .filter(Boolean)
+      .join(" "),
+    menuPortalTarget: typeof document !== "undefined" ? document.body : null,
+    menuPosition: "fixed",
+  };
+
+  return <Select {...selectProps} />;
+}
diff --git a/apps/ui/src/components/RetentionPanel.tsx b/apps/ui/src/components/RetentionPanel.tsx
index 360ada5..bf7e8b1 100644
--- a/apps/ui/src/components/RetentionPanel.tsx
+++ b/apps/ui/src/components/RetentionPanel.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 import type { WorkspaceSettingsDTO } from "@prm/shared";
 import { api } from "../lib/api";
 import { Section } from "./PageChrome";
+import { AppSelect } from "./AppSelect";
 
 export function RetentionPanel() {
   const [settings, setSettings] = useState<WorkspaceSettingsDTO | null>(null);
@@ -59,20 +60,22 @@ export function RetentionPanel() {
       </p>
       <div className="field">
         <label htmlFor="retention-select">Retention policy</label>
-        <select
+        <AppSelect
           id="retention-select"
           value={settings.retention}
-          onChange={(e) =>
+          onChange={(v) =>
             setSettings({
               ...settings,
-              retention: e.target.value as WorkspaceSettingsDTO["retention"],
+              retention: v as WorkspaceSettingsDTO["retention"],
             })
           }
-        >
-          <option value="current_plus_previous">Current + previous cycle</option>
-          <option value="current_only">Current cycle only</option>
-          <option value="keep_all">Keep all cycles</option>
-        </select>
+          isSearchable={false}
+          options={[
+            { value: "current_plus_previous", label: "Current + previous cycle" },
+            { value: "current_only", label: "Current cycle only" },
+            { value: "keep_all", label: "Keep all cycles" },
+          ]}
+        />
       </div>
       <div className="field">
         <label>
diff --git a/apps/ui/src/pages/ChatPage.tsx b/apps/ui/src/pages/ChatPage.tsx
index b0b222f..c433ae7 100644
--- a/apps/ui/src/pages/ChatPage.tsx
+++ b/apps/ui/src/pages/ChatPage.tsx
@@ -4,6 +4,7 @@ import type { PersonDTO } from "@prm/shared";
 import { api, streamChat } from "../lib/api";
 import { estimateThenConfirm } from "../lib/aiEstimate";
 import { NextStep, PageHeader } from "../components/PageChrome";
+import { AppSelect } from "../components/AppSelect";
 
 type CycleRow = {
   id: string;
@@ -289,42 +290,41 @@ export function ChatPage() {
         <div className="row chat-scope-row">
           <div className="field" style={{ flex: 1, marginBottom: 0 }}>
             <label htmlFor="chat-person">Person scope</label>
-            <select
+            <AppSelect
               id="chat-person"
               value={personId}
-              onChange={(e) => {
-                setPersonId(e.target.value);
+              onChange={(v) => {
+                setPersonId(v);
                 clearChat();
               }}
               disabled={sending}
-            >
-              <option value="">Entire workspace</option>
-              {people.map((p) => (
-                <option key={p.id} value={p.id}>
-                  {p.name}
-                  {p.title ? ` — ${p.title}` : ""}
-                </option>
-              ))}
-            </select>
+              options={[
+                { value: "", label: "Entire workspace" },
+                ...people.map((p) => ({
+                  value: p.id,
+                  label: p.title ? `${p.name} — ${p.title}` : p.name,
+                })),
+              ]}
+            />
           </div>
           <div className="field" style={{ flex: 1, marginBottom: 0 }}>
             <label htmlFor="chat-cycle">Cycle (optional)</label>
-            <select
+            <AppSelect
               id="chat-cycle"
               value={cycleId}
-              onChange={(e) => {
-                setCycleId(e.target.value);
+              onChange={(v) => {
+                setCycleId(v);
                 clearChat();
               }}
               disabled={sending}
-            >
-              <option value="">No cycle filter</option>
-              {cycles.map((c) => (
-                <option key={c.id} value={c.id}>
-                  {c.name} ({c.status})
-                </option>
-              ))}
-            </select>
+              options={[
+                { value: "", label: "No cycle filter" },
+                ...cycles.map((c) => ({
+                  value: c.id,
+                  label: `${c.name} (${c.status})`,
+                })),
+              ]}
+            />
           </div>
         </div>
       </div>
diff --git a/apps/ui/src/pages/ConsistencyPage.tsx b/apps/ui/src/pages/ConsistencyPage.tsx
index 4b872d1..bf735d5 100644
--- a/apps/ui/src/pages/ConsistencyPage.tsx
+++ b/apps/ui/src/pages/ConsistencyPage.tsx
@@ -6,6 +6,7 @@ import { api } from "../lib/api";
 import { downloadBinaryExport, openHtmlExport } from "../lib/exports";
 import { NextStep, PageHeader, Section } from "../components/PageChrome";
 import { PageSectionsLayout } from "../components/PageSectionsLayout";
+import { AppSelect } from "../components/AppSelect";
 
 export function ConsistencyPage() {
   const [params, setParams] = useSearchParams();
@@ -81,17 +82,15 @@ export function ConsistencyPage() {
       <div className="panel">
         <div className="field" style={{ marginBottom: 0, maxWidth: 360 }}>
           <label htmlFor="consistency-cycle">Cycle</label>
-          <select
+          <AppSelect
             id="consistency-cycle"
             value={cycleId || data?.cycleId || ""}
-            onChange={(e) => setParams({ cycleId: e.target.value })}
-          >
-            {cycles.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name} ({c.status})
-              </option>
-            ))}
-          </select>
+            onChange={(v) => setParams({ cycleId: v })}
+            options={cycles.map((c) => ({
+              value: c.id,
+              label: `${c.name} (${c.status})`,
+            }))}
+          />
         </div>
       </div>
 
@@ -227,22 +226,23 @@ export function ConsistencyPage() {
                     </div>
                     <div className="field" style={{ margin: 0 }}>
                       <label>Overall</label>
-                      <select
+                      <AppSelect
                         value={row.overall}
-                        onChange={(e) =>
+                        onChange={(v) =>
                           setDirectorDecisions({
                             ...directorDecisions,
-                            [card.personId]: { ...row, overall: e.target.value },
+                            [card.personId]: { ...row, overall: v },
                           })
                         }
-                      >
-                        <option value="">Keep</option>
-                        {[1, 2, 3, 4, 5].map((n) => (
-                          <option key={n} value={String(n)}>
-                            {n}
-                          </option>
-                        ))}
-                      </select>
+                        isSearchable={false}
+                        options={[
+                          { value: "", label: "Keep" },
+                          ...[1, 2, 3, 4, 5].map((n) => ({
+                            value: String(n),
+                            label: String(n),
+                          })),
+                        ]}
+                      />
                     </div>
                     <div className="field" style={{ margin: 0, flex: 1, minWidth: 160 }}>
                       <label>Note</label>
diff --git a/apps/ui/src/pages/CyclesPage.tsx b/apps/ui/src/pages/CyclesPage.tsx
index 15da34e..b207d15 100644
--- a/apps/ui/src/pages/CyclesPage.tsx
+++ b/apps/ui/src/pages/CyclesPage.tsx
@@ -4,6 +4,7 @@ import type { CycleDTO, PersonDTO } from "@prm/shared";
 import { api } from "../lib/api";
 import { NextStep, PageHeader, Section } from "../components/PageChrome";
 import { PageSectionsLayout } from "../components/PageSectionsLayout";
+import { AppSelect } from "../components/AppSelect";
 
 const PHASE_STATUSES = [
   { value: "self_open", label: "Self open" },
@@ -319,33 +320,31 @@ export function CyclesPage() {
             >
               <div className="field">
                 <label>Cycle</label>
-                <select value={selectedCycle} onChange={(e) => setSelectedCycle(e.target.value)}>
-                  {cycles.map((c) => (
-                    <option key={c.id} value={c.id}>
-                      {c.name}
-                    </option>
-                  ))}
-                </select>
+                <AppSelect
+                  value={selectedCycle}
+                  onChange={(v) => setSelectedCycle(v)}
+                  options={cycles.map((c) => ({ value: c.id, label: c.name }))}
+                />
               </div>
               <div className="field">
                 <label>Subject</label>
-                <select value={subjectId} onChange={(e) => setSubjectId(e.target.value)}>
-                  {people.map((p) => (
-                    <option key={p.id} value={p.id}>
-                      {p.name}
-                    </option>
-                  ))}
-                </select>
+                <AppSelect
+                  value={subjectId}
+                  onChange={(v) => setSubjectId(v)}
+                  options={people.map((p) => ({ value: p.id, label: p.name }))}
+                />
               </div>
               <div className="field">
                 <label>Kind</label>
-                <select
+                <AppSelect
                   value={bundleKind}
-                  onChange={(e) => setBundleKind(e.target.value as "self" | "peer")}
-                >
-                  <option value="self">Self-review</option>
-                  <option value="peer">Peer feedback</option>
-                </select>
+                  onChange={(v) => setBundleKind(v as "self" | "peer")}
+                  isSearchable={false}
+                  options={[
+                    { value: "self", label: "Self-review" },
+                    { value: "peer", label: "Peer feedback" },
+                  ]}
+                />
               </div>
               {bundleKind === "peer" && (
                 <div className="field">
diff --git a/apps/ui/src/pages/HomePage.tsx b/apps/ui/src/pages/HomePage.tsx
index 20ab0e3..dc00ae8 100644
--- a/apps/ui/src/pages/HomePage.tsx
+++ b/apps/ui/src/pages/HomePage.tsx
@@ -5,6 +5,7 @@ import { api } from "../lib/api";
 import { NextStep, PageHeader, Section } from "../components/PageChrome";
 import { PageSectionsLayout } from "../components/PageSectionsLayout";
 import { OnboardingWizard } from "../components/OnboardingWizard";
+import { AppSelect } from "../components/AppSelect";
 
 type CommandItem = {
   person: { id: string; name: string; roleTitle: string | null } | null;
@@ -273,16 +274,16 @@ export function HomePage() {
           <label className="muted" htmlFor="home-cycle-select">
             Cycle
           </label>
-          <select
+          <AppSelect
             id="home-cycle-select"
             value={cycleId ?? ""}
-            onChange={(e) => setCycleId(e.target.value || null)}
-          >
-            {cycles.length === 0 && <option value="">No cycles yet</option>}
-            {cycles.map((c) => (
-              <option key={c.id} value={c.id}>{c.name}</option>
-            ))}
-          </select>
+            onChange={(v) => setCycleId(v || null)}
+            fullWidth={false}
+            options={[
+              ...(cycles.length === 0 ? [{ value: "", label: "No cycles yet" }] : []),
+              ...cycles.map((c) => ({ value: c.id, label: c.name })),
+            ]}
+          />
           {active && (
             <span className="muted">
               {active.windowStart} → {active.windowEnd} · {active.status}
diff --git a/apps/ui/src/pages/PersonPage.tsx b/apps/ui/src/pages/PersonPage.tsx
index 970b28b..63f5d49 100644
--- a/apps/ui/src/pages/PersonPage.tsx
+++ b/apps/ui/src/pages/PersonPage.tsx
@@ -16,6 +16,7 @@ import { NextStep, PageHeader, Section } from "../components/PageChrome";
 import { PageSectionsLayout, type SectionNavItem } from "../components/PageSectionsLayout";
 import { DeliveryRollupPanel } from "../components/DeliveryRollupPanel";
 import { OneOnOnesPanel } from "../components/OneOnOnesPanel";
+import { AppSelect } from "../components/AppSelect";
 
 export function PersonPage() {
   const { id } = useParams();
@@ -48,6 +49,7 @@ export function PersonPage() {
   const [meetings, setMeetings] = useState<MeetingSummaryDTO[]>([]);
   const [meetTitle, setMeetTitle] = useState("");
   const [meetTranscript, setMeetTranscript] = useState("");
+  const [meetDocId, setMeetDocId] = useState("");
   const [meetConsent, setMeetConsent] = useState(false);
   const [meetUseAi, setMeetUseAi] = useState(false);
   const [concernTitle, setConcernTitle] = useState("");
@@ -201,16 +203,16 @@ export function PersonPage() {
           <div className="row" style={{ alignItems: "end" }}>
             <div className="field" style={{ margin: 0, minWidth: 220 }}>
               <label>New manager</label>
-              <select value={reassignManagerId} onChange={(e) => setReassignManagerId(e.target.value)}>
-                <option value="">Select…</option>
-                {roster
-                  .filter((p) => p.id !== person.id)
-                  .map((p) => (
-                    <option key={p.id} value={p.id}>
-                      {p.name}
-                    </option>
-                  ))}
-              </select>
+              <AppSelect
+                value={reassignManagerId}
+                onChange={(v) => setReassignManagerId(v)}
+                options={[
+                  { value: "", label: "Select…" },
+                  ...roster
+                    .filter((p) => p.id !== person.id)
+                    .map((p) => ({ value: p.id, label: p.name })),
+                ]}
+              />
             </div>
             <div className="field" style={{ margin: 0, flex: 1 }}>
               <label>Reason</label>
@@ -283,15 +285,17 @@ export function PersonPage() {
         <div className="row" style={{ flexWrap: "wrap", gap: 8, alignItems: "end" }}>
           <div className="field" style={{ margin: 0 }}>
             <label>Provider</label>
-            <select
+            <AppSelect
               value={linkProvider}
-              onChange={(e) => setLinkProvider(e.target.value as IntegrationProvider)}
-            >
-              <option value="jira">Jira</option>
-              <option value="bitbucket">Bitbucket</option>
-              <option value="github">GitHub</option>
-              <option value="linear">Linear</option>
-            </select>
+              onChange={(v) => setLinkProvider(v as IntegrationProvider)}
+              isSearchable={false}
+              options={[
+                { value: "jira", label: "Jira" },
+                { value: "bitbucket", label: "Bitbucket" },
+                { value: "github", label: "GitHub" },
+                { value: "linear", label: "Linear" },
+              ]}
+            />
           </div>
           <div className="field" style={{ margin: 0, flex: 1, minWidth: 180 }}>
             <label>Search remote users</label>
@@ -522,11 +526,16 @@ export function PersonPage() {
             </div>
             <div className="field">
               <label>Kind</label>
-              <select value={fbKind} onChange={(e) => setFbKind(e.target.value)}>
-                <option value="coaching">Coaching / 1:1</option>
-                <option value="praise">Praise</option>
-                <option value="incident">Incident</option>
-              </select>
+              <AppSelect
+                value={fbKind}
+                onChange={(v) => setFbKind(v)}
+                isSearchable={false}
+                options={[
+                  { value: "coaching", label: "Coaching / 1:1" },
+                  { value: "praise", label: "Praise" },
+                  { value: "incident", label: "Incident" },
+                ]}
+              />
             </div>
           </div>
           <div className="field">
@@ -690,10 +699,10 @@ export function PersonPage() {
           </div>
           <div className="field">
             <label>Or load from dossier documents</label>
-            <select
-              defaultValue=""
-              onChange={async (e) => {
-                const docId = e.target.value;
+            <AppSelect
+              value={meetDocId}
+              onChange={async (docId) => {
+                setMeetDocId(docId);
                 if (!docId) return;
                 try {
                   const fileRes = await fetch(apiUrl(`/api/documents/${docId}/download`), {
@@ -710,16 +719,16 @@ export function PersonPage() {
                   setCaptureMsg(err instanceof Error ? err.message : "Load failed");
                 }
               }}
-            >
-              <option value="">Select a transcript-like document…</option>
-              {(dossier?.documents ?? [])
-                .filter((d) => /\.(txt|md|vtt)$/i.test(d.filename) || /transcript|meet|notes/i.test(d.filename))
-                .map((d) => (
-                  <option key={d.id} value={d.id}>
-                    {d.title || d.filename}
-                  </option>
-                ))}
-            </select>
+              options={[
+                { value: "", label: "Select a transcript-like document…" },
+                ...(dossier?.documents ?? [])
+                  .filter((d) => /\.(txt|md|vtt)$/i.test(d.filename) || /transcript|meet|notes/i.test(d.filename))
+                  .map((d) => ({
+                    value: d.id,
+                    label: d.title || d.filename,
+                  })),
+              ]}
+            />
             <p className="muted" style={{ margin: "0.35rem 0 0" }}>
               Tip: export Meet / Drive notes as .txt/.vtt, upload to the dossier, then pick them here.
             </p>
diff --git a/apps/ui/src/pages/PromotionDetailPage.tsx b/apps/ui/src/pages/PromotionDetailPage.tsx
index bf4456f..05151bf 100644
--- a/apps/ui/src/pages/PromotionDetailPage.tsx
+++ b/apps/ui/src/pages/PromotionDetailPage.tsx
@@ -4,6 +4,7 @@ import type { GapMark, RoleDefinitionDTO } from "@prm/shared";
 import { api, authHeaders, apiUrl } from "../lib/api";
 import { NextStep, PageHeader, Section } from "../components/PageChrome";
 import { PageSectionsLayout } from "../components/PageSectionsLayout";
+import { AppSelect } from "../components/AppSelect";
 
 type PromoDetail = {
   id: string;
@@ -233,14 +234,16 @@ export function PromotionDetailPage() {
           {(detail.targetRole?.expectations ?? []).map((e) => (
             <div key={e.id} className="field">
               <label><span className="flag">{e.kind}</span> {e.text}</label>
-              <select
+              <AppSelect
                 value={marks[e.id] ?? "emerging"}
-                onChange={(ev) => setMarks((m) => ({ ...m, [e.id]: ev.target.value as GapMark }))}
-              >
-                <option value="demonstrating">Demonstrating</option>
-                <option value="emerging">Emerging</option>
-                <option value="not_yet">Not yet</option>
-              </select>
+                onChange={(v) => setMarks((m) => ({ ...m, [e.id]: v as GapMark }))}
+                isSearchable={false}
+                options={[
+                  { value: "demonstrating", label: "Demonstrating" },
+                  { value: "emerging", label: "Emerging" },
+                  { value: "not_yet", label: "Not yet" },
+                ]}
+              />
             </div>
           ))}
           {aiOut && <pre className="digest">{aiOut}</pre>}
@@ -278,10 +281,15 @@ export function PromotionDetailPage() {
           </div>
           <div className="field">
             <label>Recommendation</label>
-            <select value={recommendation} onChange={(e) => setRecommendation(e.target.value as "ready" | "not_yet")}>
-              <option value="not_yet">Not yet</option>
-              <option value="ready">Ready</option>
-            </select>
+            <AppSelect
+              value={recommendation}
+              onChange={(v) => setRecommendation(v as "ready" | "not_yet")}
+              isSearchable={false}
+              options={[
+                { value: "not_yet", label: "Not yet" },
+                { value: "ready", label: "Ready" },
+              ]}
+            />
           </div>
           <div className="field">
             <label>Decision reason (when recommendation or status changes)</label>
diff --git a/apps/ui/src/pages/PromotionsPage.tsx b/apps/ui/src/pages/PromotionsPage.tsx
index 06dff53..713926a 100644
--- a/apps/ui/src/pages/PromotionsPage.tsx
+++ b/apps/ui/src/pages/PromotionsPage.tsx
@@ -95,15 +95,26 @@ export function PromotionsPage() {
           navigate(`/promotions/${res.id}`);
         }}
       >
-        <select value={personId} onChange={(e) => setPersonId(e.target.value)} aria-label="Person">
-          {people.length === 0 && <option value="">No eligible people</option>}
-          {people.map((p) => (
-            <option key={p.id} value={p.id}>{p.name} → {p.targetNextRoleTitle}</option>
-          ))}
-        </select>
-        <select value={cycleId} onChange={(e) => setCycleId(e.target.value)} aria-label="Cycle">
-          {cycles.map((c) => <option key={c.id} value={c.id}>{c.name}</option>)}
-        </select>
+        <AppSelect
+          value={personId}
+          onChange={(v) => setPersonId(v)}
+          aria-label="Person"
+          fullWidth={false}
+          options={[
+            ...(people.length === 0 ? [{ value: "", label: "No eligible people" }] : []),
+            ...people.map((p) => ({
+              value: p.id,
+              label: `${p.name} → ${p.targetNextRoleTitle}`,
+            })),
+          ]}
+        />
+        <AppSelect
+          value={cycleId}
+          onChange={(v) => setCycleId(v)}
+          aria-label="Cycle"
+          fullWidth={false}
+          options={cycles.map((c) => ({ value: c.id, label: c.name }))}
+        />
         <button className="btn secondary" disabled={!personId}>Start promotion packet</button>
       </form>
 
diff --git a/apps/ui/src/pages/RolesPage.tsx b/apps/ui/src/pages/RolesPage.tsx
index cdebf36..8015529 100644
--- a/apps/ui/src/pages/RolesPage.tsx
+++ b/apps/ui/src/pages/RolesPage.tsx
@@ -9,6 +9,7 @@ import type {
 import { api, authHeaders, apiUrl } from "../lib/api";
 import { NextStep, PageHeader, Section } from "../components/PageChrome";
 import { PageSectionsLayout } from "../components/PageSectionsLayout";
+import { AppSelect } from "../components/AppSelect";
 
 type ExpectationEdit = { id?: string; kind: "responsibility" | "expectation"; text: string };
 
@@ -388,10 +389,9 @@ export function RolesPage() {
                           )}
                         </td>
                         <td data-label="Current role">
-                          <select
+                          <AppSelect
                             value={draft.roleId}
-                            onChange={(e) => {
-                              const roleDefinitionId = e.target.value;
+                            onChange={(roleDefinitionId) => {
                               const nexts = nextOptionsFor(roleDefinitionId);
                               const keepNext = nexts.some((r) => r.id === draft.nextId);
                               setAssignDrafts((prev) => ({
@@ -402,35 +402,33 @@ export function RolesPage() {
                                 },
                               }));
                             }}
-                          >
-                            <option value="">{needs ? "Select role…" : "—"}</option>
-                            {roles.map((r) => (
-                              <option key={r.id} value={r.id}>
-                                {r.levelKey ? `${r.levelKey} · ` : ""}
-                                {r.title}
-                              </option>
-                            ))}
-                          </select>
+                            options={[
+                              { value: "", label: needs ? "Select role…" : "—" },
+                              ...roles.map((r) => ({
+                                value: r.id,
+                                label: `${r.levelKey ? `${r.levelKey} · ` : ""}${r.title}`,
+                              })),
+                            ]}
+                          />
                         </td>
                         <td data-label="Next role">
-                          <select
+                          <AppSelect
                             value={draft.nextId}
                             disabled={!draft.roleId}
-                            onChange={(e) =>
+                            onChange={(v) =>
                               setAssignDrafts((prev) => ({
                                 ...prev,
-                                [p.id]: { ...draft, nextId: e.target.value },
+                                [p.id]: { ...draft, nextId: v },
                               }))
                             }
-                          >
-                            <option value="">—</option>
-                            {nextOptionsFor(draft.roleId).map((r) => (
-                              <option key={r.id} value={r.id}>
-                                {r.levelKey ? `${r.levelKey} · ` : ""}
-                                {r.title}
-                              </option>
-                            ))}
-                          </select>
+                            options={[
+                              { value: "", label: "—" },
+                              ...nextOptionsFor(draft.roleId).map((r) => ({
+                                value: r.id,
+                                label: `${r.levelKey ? `${r.levelKey} · ` : ""}${r.title}`,
+                              })),
+                            ]}
+                          />
                         </td>
                         <td data-label="">
                           <button
@@ -559,16 +557,18 @@ export function RolesPage() {
                 </div>
                 <div className="field">
                   <label>Track</label>
-                  <select
+                  <AppSelect
                     value={editor.track}
-                    onChange={(e) =>
-                      setEditor({ ...editor, track: e.target.value as "ic" | "manager" | "other" })
+                    onChange={(v) =>
+                      setEditor({ ...editor, track: v as "ic" | "manager" | "other" })
                     }
-                  >
-                    <option value="ic">IC</option>
-                    <option value="manager">Manager</option>
-                    <option value="other">Other</option>
-                  </select>
+                    isSearchable={false}
+                    options={[
+                      { value: "ic", label: "IC" },
+                      { value: "manager", label: "Manager" },
+                      { value: "other", label: "Other" },
+                    ]}
+                  />
                 </div>
                 <div className="field">
                   <label>Key (optional)</label>
@@ -600,20 +600,22 @@ export function RolesPage() {
                 <div className="grid-2" key={idx} style={{ marginBottom: "0.5rem" }}>
                   <div className="field">
                     <label>Kind</label>
-                    <select
+                    <AppSelect
                       value={exp.kind}
-                      onChange={(e) => {
+                      onChange={(v) => {
                         const next = [...editor.expectations];
                         next[idx] = {
                           ...exp,
-                          kind: e.target.value === "expectation" ? "expectation" : "responsibility",
+                          kind: v === "expectation" ? "expectation" : "responsibility",
                         };
                         setEditor({ ...editor, expectations: next });
                       }}
-                    >
-                      <option value="responsibility">Responsibility</option>
-                      <option value="expectation">Expectation</option>
-                    </select>
+                      isSearchable={false}
+                      options={[
+                        { value: "responsibility", label: "Responsibility" },
+                        { value: "expectation", label: "Expectation" },
+                      ]}
+                    />
                   </div>
                   <div className="field">
                     <label>Text</label>
diff --git a/apps/ui/src/pages/SettingsPage.tsx b/apps/ui/src/pages/SettingsPage.tsx
index fc42e97..c0fea00 100644
--- a/apps/ui/src/pages/SettingsPage.tsx
+++ b/apps/ui/src/pages/SettingsPage.tsx
@@ -7,6 +7,7 @@ import { NextStep, PageHeader, Section } from "../components/PageChrome";
 import { PageSectionsLayout, type SectionNavItem } from "../components/PageSectionsLayout";
 import { IntegrationsPanel } from "../components/IntegrationsPanel";
 import { RetentionPanel } from "../components/RetentionPanel";
+import { AppSelect } from "../components/AppSelect";
 
 const SETTINGS_SECTIONS: SectionNavItem[] = [
   { id: "settings-appearance", label: "Appearance" },
@@ -198,15 +199,17 @@ export function SettingsPage({
       >
         <div className="field">
           <label htmlFor="theme-select">Color mode</label>
-          <select
+          <AppSelect
             id="theme-select"
             value={colorMode}
-            onChange={(e) => setColorMode(e.target.value as ColorMode)}
-          >
-            <option value="system">System</option>
-            <option value="dark">Dark</option>
-            <option value="light">Light</option>
-          </select>
+            onChange={(v) => setColorMode(v as ColorMode)}
+            isSearchable={false}
+            options={[
+              { value: "system", label: "System" },
+              { value: "dark", label: "Dark" },
+              { value: "light", label: "Light" },
+            ]}
+          />
         </div>
         <div className="field">
           <label>Accent</label>
@@ -451,10 +454,9 @@ export function SettingsPage({
         </div>
         <div className="field">
           <label>Provider</label>
-          <select
+          <AppSelect
             value={settings.provider}
-            onChange={(e) => {
-              const provider = e.target.value;
+            onChange={(provider) => {
               setSettings({
                 ...settings,
                 provider,
@@ -479,13 +481,14 @@ export function SettingsPage({
                       : {}),
               });
             }}
-          >
-            <option value="anthropic">Anthropic</option>
-            <option value="openai">OpenAI</option>
-            <option value="cursor">Cursor Cloud Agents</option>
-            <option value="openai_compatible">OpenAI-compatible (custom URL)</option>
-            <option value="ollama">Ollama</option>
-          </select>
+            options={[
+              { value: "anthropic", label: "Anthropic" },
+              { value: "openai", label: "OpenAI" },
+              { value: "cursor", label: "Cursor Cloud Agents" },
+              { value: "openai_compatible", label: "OpenAI-compatible (custom URL)" },
+              { value: "ollama", label: "Ollama" },
+            ]}
+          />
         </div>
         {settings.provider === "cursor" && (
           <p className="muted">
diff --git a/apps/ui/src/pages/SetupPage.tsx b/apps/ui/src/pages/SetupPage.tsx
index 6c1dc69..e0f35f3 100644
--- a/apps/ui/src/pages/SetupPage.tsx
+++ b/apps/ui/src/pages/SetupPage.tsx
@@ -7,6 +7,7 @@ import type {
   RoleDefinitionDTO,
 } from "@prm/shared";
 import { api } from "../lib/api";
+import { AppSelect } from "../components/AppSelect";
 
 const LEVELS = ["IC1", "IC2", "IC3", "IC4", "IC5", "IC6", "L1", "M1", "M2", "M3"];
 
@@ -398,13 +399,11 @@ function TeamStep({
           </div>
           <div className="field">
             <label>Level</label>
-            <select value={levelKey} onChange={(e) => setLevelKey(e.target.value)}>
-              {LEVELS.map((l) => (
-                <option key={l} value={l}>
-                  {l}
-                </option>
-              ))}
-            </select>
+            <AppSelect
+              value={levelKey}
+              onChange={(v) => setLevelKey(v)}
+              options={LEVELS.map((l) => ({ value: l, label: l }))}
+            />
           </div>
         </div>
         <button className="btn" disabled={localBusy || !name.trim()}>
@@ -587,43 +586,41 @@ function RolesStep({
                       ) : null}
                     </td>
                     <td>
-                      <select
+                      <AppSelect
                         value={d.roleId}
-                        onChange={(e) =>
+                        onChange={(v) =>
                           setDrafts((prev) => ({
                             ...prev,
-                            [p.id]: { roleId: e.target.value, nextId: "" },
+                            [p.id]: { roleId: v, nextId: "" },
                           }))
                         }
-                      >
-                        <option value="">Select…</option>
-                        {roles.map((r) => (
-                          <option key={r.id} value={r.id}>
-                            {r.levelKey ? `${r.levelKey} · ` : ""}
-                            {r.title}
-                          </option>
-                        ))}
-                      </select>
+                        options={[
+                          { value: "", label: "Select…" },
+                          ...roles.map((r) => ({
+                            value: r.id,
+                            label: `${r.levelKey ? `${r.levelKey} · ` : ""}${r.title}`,
+                          })),
+                        ]}
+                      />
                     </td>
                     <td>
-                      <select
+                      <AppSelect
                         value={d.nextId}
                         disabled={!d.roleId}
-                        onChange={(e) =>
+                        onChange={(v) =>
                           setDrafts((prev) => ({
                             ...prev,
-                            [p.id]: { ...d, nextId: e.target.value },
+                            [p.id]: { ...d, nextId: v },
                           }))
                         }
-                      >
-                        <option value="">—</option>
-                        {roles.map((r) => (
-                          <option key={r.id} value={r.id}>
-                            {r.levelKey ? `${r.levelKey} · ` : ""}
-                            {r.title}
-                          </option>
-                        ))}
-                      </select>
+                        options={[
+                          { value: "", label: "—" },
+                          ...roles.map((r) => ({
+                            value: r.id,
+                            label: `${r.levelKey ? `${r.levelKey} · ` : ""}${r.title}`,
+                          })),
+                        ]}
+                      />
                     </td>
                   </tr>
                 );
@@ -755,10 +752,9 @@ function AiStep({
       </div>
       <div className="field">
         <label>Provider</label>
-        <select
+        <AppSelect
           value={form.provider}
-          onChange={(e) => {
-            const provider = e.target.value;
+          onChange={(provider) => {
             setForm({
               ...form,
               provider,
@@ -786,13 +782,14 @@ function AiStep({
                   : form.ollamaBaseUrl || "http://127.0.0.1:11434",
             });
           }}
-        >
-          <option value="anthropic">Anthropic</option>
-          <option value="openai">OpenAI</option>
-          <option value="cursor">Cursor Cloud Agents</option>
-          <option value="openai_compatible">OpenAI-compatible gateway</option>
-          <option value="ollama">Ollama (local)</option>
-        </select>
+          options={[
+            { value: "anthropic", label: "Anthropic" },
+            { value: "openai", label: "OpenAI" },
+            { value: "cursor", label: "Cursor Cloud Agents" },
+            { value: "openai_compatible", label: "OpenAI-compatible gateway" },
+            { value: "ollama", label: "Ollama (local)" },
+          ]}
+        />
       </div>
       {form.provider === "cursor" && (
         <p className="muted" style={{ margin: 0 }}>
diff --git a/apps/ui/src/pages/SprintPulsePage.tsx b/apps/ui/src/pages/SprintPulsePage.tsx
index 9c1e797..1902c90 100644
--- a/apps/ui/src/pages/SprintPulsePage.tsx
+++ b/apps/ui/src/pages/SprintPulsePage.tsx
@@ -4,6 +4,7 @@ import type { SprintPulseDTO } from "@prm/shared";
 import { api } from "../lib/api";
 import { NextStep, PageHeader, Section } from "../components/PageChrome";
 import { PageSectionsLayout } from "../components/PageSectionsLayout";
+import { AppSelect } from "../components/AppSelect";
 
 const PRESETS = [
   { id: "last_7", label: "Last 7 days" },
@@ -81,17 +82,13 @@ export function SprintPulsePage() {
         <div className="row" style={{ flexWrap: "wrap", gap: 12, alignItems: "end" }}>
           <div className="field" style={{ marginBottom: 0 }}>
             <label htmlFor="pulse-preset">Preset</label>
-            <select
+            <AppSelect
               id="pulse-preset"
               value={preset}
-              onChange={(e) => setParams({ preset: e.target.value })}
-            >
-              {PRESETS.map((p) => (
-                <option key={p.id} value={p.id}>
-                  {p.label}
-                </option>
-              ))}
-            </select>
+              onChange={(v) => setParams({ preset: v })}
+              isSearchable={false}
+              options={PRESETS.map((p) => ({ value: p.id, label: p.label }))}
+            />
           </div>
           <div className="field" style={{ marginBottom: 0 }}>
             <label htmlFor="pulse-from">From</label>
diff --git a/apps/ui/src/pages/TeamPage.tsx b/apps/ui/src/pages/TeamPage.tsx
index e85a090..0aad2a5 100644
--- a/apps/ui/src/pages/TeamPage.tsx
+++ b/apps/ui/src/pages/TeamPage.tsx
@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import type { PeopleImportResult, PersonDTO } from "@prm/shared";
 import { api, authHeaders, apiUrl } from "../lib/api";
 import { NextStep, PageHeader } from "../components/PageChrome";
+import { AppSelect } from "../components/AppSelect";
 
 export function TeamPage() {
   const [people, setPeople] = useState<PersonDTO[]>([]);
@@ -194,9 +195,12 @@ export function TeamPage() {
           <div className="field"><label>Title</label><input value={title} onChange={(e) => setTitle(e.target.value)} /></div>
           <div className="field">
             <label>Level</label>
-            <select value={levelKey} onChange={(e) => setLevelKey(e.target.value)}>
-              {["IC3", "IC4", "IC5", "M1"].map((l) => <option key={l}>{l}</option>)}
-            </select>
+            <AppSelect
+              value={levelKey}
+              onChange={(v) => setLevelKey(v)}
+              isSearchable={false}
+              options={["IC3", "IC4", "IC5", "M1"].map((l) => ({ value: l, label: l }))}
+            />
           </div>
         </div>
         <div className="cta-primary-row">
diff --git a/apps/ui/src/pages/TeamPerformancePage.tsx b/apps/ui/src/pages/TeamPerformancePage.tsx
index 7ad673b..88a9424 100644
--- a/apps/ui/src/pages/TeamPerformancePage.tsx
+++ b/apps/ui/src/pages/TeamPerformancePage.tsx
@@ -6,6 +6,7 @@ import { api } from "../lib/api";
 import { openHtmlExport } from "../lib/exports";
 import { NextStep, PageHeader, Section } from "../components/PageChrome";
 import { PageSectionsLayout, type SectionNavItem } from "../components/PageSectionsLayout";
+import { AppSelect } from "../components/AppSelect";
 
 const PROMO_LABELS: Record<string, string> = {
   ready: "Ready",
@@ -306,17 +307,15 @@ export function TeamPerformancePage() {
       <div className="panel">
         <div className="field" style={{ marginBottom: 0, maxWidth: 360 }}>
           <label htmlFor="tp-cycle">Cycle</label>
-          <select
+          <AppSelect
             id="tp-cycle"
             value={cycleId || data?.cycleId || ""}
-            onChange={(e) => setParams({ cycleId: e.target.value })}
-          >
-            {cycles.map((c) => (
-              <option key={c.id} value={c.id}>
-                {c.name} ({c.status})
-              </option>
-            ))}
-          </select>
+            onChange={(v) => setParams({ cycleId: v })}
+            options={cycles.map((c) => ({
+              value: c.id,
+              label: `${c.name} (${c.status})`,
+            }))}
+          />
         </div>
       </div>
 
diff --git a/apps/ui/src/pages/WritingDeskPage.tsx b/apps/ui/src/pages/WritingDeskPage.tsx
index 8512ef8..b7d84d6 100644
--- a/apps/ui/src/pages/WritingDeskPage.tsx
+++ b/apps/ui/src/pages/WritingDeskPage.tsx
@@ -8,6 +8,7 @@ import { openHtmlExport } from "../lib/exports";
 import { NextStep, PageHeader, Section } from "../components/PageChrome";
 import { PageSectionsLayout, type SectionNavItem } from "../components/PageSectionsLayout";
 import { DeliveryRollupPanel } from "../components/DeliveryRollupPanel";
+import { AppSelect } from "../components/AppSelect";
 
 type EvidenceLinkDraft = {
   targetType: string;
@@ -1062,19 +1063,21 @@ export function WritingDeskPage() {
           </div>
           <div className="field">
             <label>Promotion readiness</label>
-            <select
+            <AppSelect
               value={promo}
               disabled={finalized}
-              onChange={(e) => {
+              onChange={(v) => {
                 markDirty();
-                setPromo(e.target.value as PromoReadiness);
+                setPromo(v as PromoReadiness);
               }}
-            >
-              <option value="not_applicable">Not applicable</option>
-              <option value="too_early">Too early</option>
-              <option value="not_yet">Not yet</option>
-              <option value="ready">Ready</option>
-            </select>
+              isSearchable={false}
+              options={[
+                { value: "not_applicable", label: "Not applicable" },
+                { value: "too_early", label: "Too early" },
+                { value: "not_yet", label: "Not yet" },
+                { value: "ready", label: "Ready" },
+              ]}
+            />
           </div>
           {showGaps && (
             <div className="stack">
@@ -1087,18 +1090,20 @@ export function WritingDeskPage() {
               {nextExpectations.map((e) => (
                 <div key={e.id} className="field">
                   <label>{e.text}</label>
-                  <select
+                  <AppSelect
                     value={gaps[e.id] ?? "emerging"}
                     disabled={finalized}
-                    onChange={(ev) => {
+                    onChange={(v) => {
                       markDirty();
-                      setGaps((g) => ({ ...g, [e.id]: ev.target.value as GapMark }));
+                      setGaps((g) => ({ ...g, [e.id]: v as GapMark }));
                     }}
-                  >
-                    <option value="demonstrating">Demonstrating</option>
-                    <option value="emerging">Emerging</option>
-                    <option value="not_yet">Not yet</option>
-                  </select>
+                    isSearchable={false}
+                    options={[
+                      { value: "demonstrating", label: "Demonstrating" },
+                      { value: "emerging", label: "Emerging" },
+                      { value: "not_yet", label: "Not yet" },
+                    ]}
+                  />
                 </div>
               ))}
             </div>
diff --git a/apps/ui/src/styles.css b/apps/ui/src/styles.css
index f04da70..8e839ea 100644
--- a/apps/ui/src/styles.css
+++ b/apps/ui/src/styles.css
@@ -679,6 +679,24 @@ strong { color: var(--ink-soft); font-weight: 600; }
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
   width: 100%;
 }
+
+/* Native select: custom chevron with room so it never hugs the border. */
+.field select,
+.row select {
+  appearance: none;
+  -webkit-appearance: none;
+  padding-right: 2.5rem;
+  background-color: var(--input-bg);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.85rem center;
+  background-size: 1rem 1rem;
+}
+[data-theme="light"] .field select,
+[data-theme="light"] .row select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
 .field input::placeholder,
 .field textarea::placeholder { color: var(--placeholder); }
 .field input:focus,
@@ -692,6 +710,123 @@ strong { color: var(--ink-soft); font-weight: 600; }
 }
 .field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
 
+/* ---------- AppSelect (react-select) ---------- */
+.app-select {
+  font: inherit;
+}
+.app-select--full {
+  width: 100%;
+}
+.app-select--auto {
+  min-width: 12rem;
+  width: auto;
+}
+.app-select__container {
+  width: 100%;
+}
+.app-select__control {
+  min-height: 2.5rem;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  padding: 0 0.15rem 0 0.35rem;
+  background: var(--input-bg);
+  color: var(--ink);
+  box-shadow: none;
+  cursor: pointer;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.app-select__control--focused {
+  border-color: var(--brand);
+  box-shadow: 0 0 0 3px var(--brand-ring);
+}
+.app-select__control--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.app-select__value {
+  padding: 0.2rem 0.4rem;
+  gap: 0.25rem;
+}
+.app-select__placeholder {
+  color: var(--placeholder);
+  margin: 0;
+}
+.app-select__single {
+  color: var(--ink);
+  margin: 0;
+}
+.app-select__input {
+  color: var(--ink);
+  margin: 0;
+}
+.app-select__indicators {
+  padding-right: 0.55rem;
+  gap: 0.15rem;
+}
+.app-select__separator {
+  display: none;
+}
+.app-select__dropdown,
+.app-select__clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.35rem;
+  color: var(--muted);
+}
+.app-select__dropdown svg {
+  width: 1rem;
+  height: 1rem;
+}
+.app-select__dropdown--open {
+  color: var(--brand-strong);
+}
+.app-select__clear:hover {
+  color: var(--ink);
+}
+.app-select__menu {
+  margin-top: 0.35rem;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  background: var(--panel);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
+  overflow: hidden;
+  z-index: 40;
+}
+.app-select__menu-list {
+  padding: 0.3rem;
+  max-height: 16rem;
+}
+.app-select__option {
+  border-radius: calc(var(--radius-sm) - 2px);
+  padding: 0.5rem 0.65rem;
+  color: var(--ink-soft);
+  cursor: pointer;
+}
+.app-select__option--focused {
+  background: var(--panel-alt);
+  color: var(--ink);
+}
+.app-select__option--selected {
+  background: var(--brand-tint);
+  color: var(--brand-strong);
+  font-weight: 600;
+}
+.app-select__option--disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.app-select__empty {
+  padding: 0.65rem;
+  color: var(--muted);
+  font-size: 0.88rem;
+}
+
+/* Portal menus inherit theme variables from :root */
+.FAKESECRET_e4f5g6h7i8j9k0l1m2n3 {
+  z-index: 60;
+}
+
 /* checkbox rows (settings) */
 .field label > input[type="checkbox"] {
   width: auto;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 211517e..fb4ea85 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -72,6 +72,9 @@ importers:
       react-router-dom:
         specifier: ^7.18.2
         version: 7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      react-select:
+        specifier: ^5.10.2
+        version: 5.10.2(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
     devDependencies:
       '@types/react':
         specifier: ^19.2.18
@@ -203,6 +206,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.29.7':
+    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.29.7':
     resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
     engines: {node: '>=6.9.0'}
@@ -215,6 +222,47 @@ packages:
     resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
     engines: {node: '>=6.9.0'}
 
+  '@emotion/babel-plugin@11.13.5':
+    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
+
+  '@emotion/cache@11.14.0':
+    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
+
+  '@emotion/hash@0.9.2':
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
+
+  '@emotion/memoize@0.9.0':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+
+  '@emotion/react@11.14.0':
+    resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@emotion/serialize@1.3.3':
+    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
+
+  '@emotion/sheet@1.4.0':
+    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
+
+  '@emotion/unitless@0.10.0':
+    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
+
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0':
+    resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@emotion/utils@1.4.2':
+    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
+
+  '@emotion/weak-memoize@0.4.0':
+    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
+
   '@esbuild/aix-ppc64@0.28.1':
     resolution: {integrity: sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==}
     engines: {node: '>=18'}
@@ -371,6 +419,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@floating-ui/core@1.8.0':
+    resolution: {integrity: sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==}
+
+  '@floating-ui/dom@1.8.0':
+    resolution: {integrity: sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==}
+
+  '@floating-ui/utils@0.2.12':
+    resolution: {integrity: sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==}
+
   '@hono/node-server@1.19.15':
     resolution: {integrity: sha512-Za2ai6TLdKjUvnur+eenO6nuYYipVAEhyCAdaV8IRvmU9kK8crOZUSYvIXn72E4f8fJqyAbpcJuTsYYmZp9Deg==}
     engines: {node: '>=18.14.1'}
@@ -609,11 +666,19 @@ packages:
   '@types/node@22.20.1':
     resolution: {integrity: sha512-EANqOCF9QFyra+4pfxUcX9STKJpCLjMbObVzljIJomAWSnuSIEAvyzEU53GaajbXJEgdh0iEcPL+DGvpUd4k1Q==}
 
+  '@types/parse-json@4.0.2':
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
+
   '@types/react-dom@19.2.4':
     resolution: {integrity: sha512-Bsc+QHgp+P/F02XDzNCY9jnZNCUuLki36KT7VKrTXXLdHf+vHMNZnW1rVu5DNW/rCK+fya3DATySbLM4yhtKUw==}
     peerDependencies:
       '@types/react': ^19.2.0
 
+  '@types/react-transition-group@4.4.12':
+    resolution: {integrity: sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==}
+    peerDependencies:
+      '@types/react': '*'
+
   '@types/react@19.2.18':
     resolution: {integrity: sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==}
 
@@ -766,6 +831,10 @@ packages:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
 
+  babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
@@ -810,6 +879,10 @@ packages:
     resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
     engines: {node: '>= 0.4'}
 
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
   caniuse-lite@1.0.30001806:
     resolution: {integrity: sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==}
 
@@ -838,6 +911,9 @@ packages:
     resolution: {integrity: sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==}
     engines: {node: '>=18'}
 
+  convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -857,6 +933,10 @@ packages:
     resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
     engines: {node: '>= 0.10'}
 
+  cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
@@ -892,6 +972,9 @@ packages:
   devtools-protocol@0.0.1653615:
     resolution: {integrity: sha512-pGVkY3T/qXxAp2nFPodwYqOevk6ncNMSmvL8QfRCx5ZWGd6Vor7AFNmyaA8Zs6uJyP1QAfjuLandCgvSix1BNA==}
 
+  dom-helpers@5.2.1:
+    resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
+
   drizzle-orm@0.45.2:
     resolution: {integrity: sha512-kY0BSaTNYWnoDMVoyY8uxmyHjpJW1geOmBMdSSicKo9CIIWkSxMIj2rkeSR51b8KAPB7m+qysjuHme5nKP+E5Q==}
     peerDependencies:
@@ -1004,6 +1087,9 @@ packages:
   end-of-stream@1.4.5:
     resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
 
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -1028,6 +1114,10 @@ packages:
   escape-html@1.0.3:
     resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
   etag@1.8.1:
     resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
     engines: {node: '>= 0.6'}
@@ -1079,6 +1169,9 @@ packages:
     resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
     engines: {node: '>= 18.0.0'}
 
+  find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+
   forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -1133,6 +1226,9 @@ packages:
     resolution: {integrity: sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==}
     engines: {node: '>= 0.4'}
 
+  hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
   hono@4.13.1:
     resolution: {integrity: sha512-kdJoFVv2xmayw6cY09H7AbMJMt8Jn5jdlEdXsP7AGBdF2DIptVlKlOLKXP41yPip4/a3yQPv9gVcJYI8YY04dw==}
     engines: {node: '>=16.9.0'}
@@ -1148,6 +1244,10 @@ packages:
   ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
 
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
@@ -1162,6 +1262,13 @@ packages:
     resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
     engines: {node: '>= 0.10'}
 
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-core-module@2.16.2:
+    resolution: {integrity: sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==}
+    engines: {node: '>= 0.4'}
+
   is-promise@4.0.0:
     resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
 
@@ -1179,6 +1286,9 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
   json-schema-traverse@1.0.0:
     resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
 
@@ -1264,6 +1374,13 @@ packages:
     resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
     engines: {node: '>= 12.0.0'}
 
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  loose-envify@1.4.0:
+    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
+    hasBin: true
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -1275,6 +1392,9 @@ packages:
     resolution: {integrity: sha512-yz3xRaG20c6/BOzvYoDaGtPmGscs7YivItZEEqe6GbwNfHuxu9YNmvnEkMzKldAGY4/80pRcQRZSEnhquk9XuQ==}
     engines: {node: '>= 0.8'}
 
+  memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+
   merge-descriptors@2.0.0:
     resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
     engines: {node: '>=18'}
@@ -1347,6 +1467,14 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
   parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -1355,9 +1483,16 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
   path-to-regexp@8.4.2:
     resolution: {integrity: sha512-qRcuIdP69NPm4qbACK+aDogI5CBDMi1jKe0ry5rSQJz8JVLsC7jV8XpiJjGRLLol3N+R5ihGYcrPLTno6pAdBA==}
 
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
   pend@1.2.0:
     resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
 
@@ -1382,6 +1517,9 @@ packages:
     deprecated: No longer maintained. Please contact the author of the relevant native addon; alternatives are available.
     hasBin: true
 
+  prop-types@15.8.1:
+    resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
+
   proxy-addr@2.0.7:
     resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
     engines: {node: '>= 0.10'}
@@ -1414,6 +1552,9 @@ packages:
     peerDependencies:
       react: ^19.2.8
 
+  react-is@16.13.1:
+    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
+
   react-refresh@0.17.0:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
@@ -1435,6 +1576,18 @@ packages:
       react-dom:
         optional: true
 
+  react-select@5.10.2:
+    resolution: {integrity: sha512-Z33nHdEFWq9tfnfVXaiM12rbJmk+QjFEztWLtmXqQhz6Al4UZZ9xc0wiatmGtUOCCnHN0WizL3tCMYRENX4rVQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  react-transition-group@4.4.5:
+    resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
+    peerDependencies:
+      react: '>=16.6.0'
+      react-dom: '>=16.6.0'
+
   react@19.2.8:
     resolution: {integrity: sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==}
     engines: {node: '>=0.10.0'}
@@ -1447,6 +1600,15 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve@1.22.12:
+    resolution: {integrity: sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
   rolldown@1.2.3:
     resolution: {integrity: sha512-rn9wpmxplLf7NLNyCk9FyWh3FM43DbY8jOzCdEPzH7uflhTftRbCEpqi6Ly2osgoU8OwObtmavMbWLaWy4LX7A==}
     engines: {node: ^20.19.0 || >=22.12.0}
@@ -1522,6 +1684,10 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+
   statuses@2.0.2:
     resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
     engines: {node: '>= 0.8'}
@@ -1545,6 +1711,13 @@ packages:
     resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==}
     engines: {node: '>=0.10.0'}
 
+  stylis@4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
   tar-fs@2.1.5:
     resolution: {integrity: sha512-OboTd8mmMhZDNPV+UjQcK9yKAatXu2aJ+r1w4im1Otd4M4fl2hwvdoXUxIYHFTHWK/3y3FarBP70v3vwmGlOxw==}
 
@@ -1593,6 +1766,15 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  use-isomorphic-layout-effect@1.2.1:
+    resolution: {integrity: sha512-tpZZ+EX0gaghDAiFR37hj5MgY6ZN55kLiPkJsKxBMZ6GZdOSPJXiOzPM984oPYZ5AnehYx5WQp1+ME8I/P/pRA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -1677,6 +1859,10 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yaml@1.10.3:
+    resolution: {integrity: sha512-vIYeF1u3CjlhAFekPPAk2h/Kv4T3mAkMox5OymRiJQB0spDP10LHvt+K7G9Ny6NuuMAb25/6n1qyUjAcGNf/AA==}
+    engines: {node: '>= 6'}
+
   yargs-parser@22.0.0:
     resolution: {integrity: sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==}
     engines: {node: ^20.19.0 || ^22.12.0 || >=23}
@@ -1790,6 +1976,8 @@ snapshots:
       '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.29.7
 
+  '@babel/runtime@7.29.7': {}
+
   '@babel/template@7.29.7':
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -1813,6 +2001,70 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
+  '@emotion/babel-plugin@11.13.5':
+    dependencies:
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/runtime': 7.29.7
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/serialize': 1.3.3
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/cache@11.14.0':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      stylis: 4.2.0
+
+  '@emotion/hash@0.9.2': {}
+
+  '@emotion/memoize@0.9.0': {}
+
+  '@emotion/react@11.14.0(@types/react@19.2.18)(react@19.2.8)':
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.2.8)
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      hoist-non-react-statics: 3.3.2
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/serialize@1.3.3':
+    dependencies:
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/unitless': 0.10.0
+      '@emotion/utils': 1.4.2
+      csstype: 3.2.3
+
+  '@emotion/sheet@1.4.0': {}
+
+  '@emotion/unitless@0.10.0': {}
+
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.2.8)':
+    dependencies:
+      react: 19.2.8
+
+  '@emotion/utils@1.4.2': {}
+
+  '@emotion/weak-memoize@0.4.0': {}
+
   '@esbuild/aix-ppc64@0.28.1':
     optional: true
 
@@ -1891,6 +2143,17 @@ snapshots:
   '@esbuild/win32-x64@0.28.1':
     optional: true
 
+  '@floating-ui/core@1.8.0':
+    dependencies:
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/dom@1.8.0':
+    dependencies:
+      '@floating-ui/core': 1.8.0
+      '@floating-ui/utils': 0.2.12
+
+  '@floating-ui/utils@0.2.12': {}
+
   '@hono/node-server@1.19.15(hono@4.13.1)':
     dependencies:
       hono: 4.13.1
@@ -2067,10 +2330,16 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
+  '@types/parse-json@4.0.2': {}
+
   '@types/react-dom@19.2.4(@types/react@19.2.18)':
     dependencies:
       '@types/react': 19.2.18
 
+  '@types/react-transition-group@4.4.12(@types/react@19.2.18)':
+    dependencies:
+      '@types/react': 19.2.18
+
   '@types/react@19.2.18':
     dependencies:
       csstype: 3.2.3
@@ -2167,6 +2436,12 @@ snapshots:
 
   ansi-styles@6.2.3: {}
 
+  babel-plugin-macros@3.1.0:
+    dependencies:
+      '@babel/runtime': 7.29.7
+      cosmiconfig: 7.1.0
+      resolve: 1.22.12
+
   base64-js@1.5.1: {}
 
   baseline-browser-mapping@2.11.1: {}
@@ -2228,6 +2503,8 @@ snapshots:
       call-bind-apply-helpers: 1.0.2
       get-intrinsic: 1.3.0
 
+  callsites@3.1.0: {}
+
   caniuse-lite@1.0.30001806: {}
 
   chownr@1.1.4: {}
@@ -2250,6 +2527,8 @@ snapshots:
 
   content-type@2.0.0: {}
 
+  convert-source-map@1.9.0: {}
+
   convert-source-map@2.0.0: {}
 
   cookie-signature@1.2.2: {}
@@ -2263,6 +2542,14 @@ snapshots:
       object-assign: 4.1.1
       vary: 1.1.2
 
+  cosmiconfig@7.1.0:
+    dependencies:
+      '@types/parse-json': 4.0.2
+      import-fresh: 3.3.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.3
+
   cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
@@ -2287,6 +2574,11 @@ snapshots:
 
   devtools-protocol@0.0.1653615: {}
 
+  dom-helpers@5.2.1:
+    dependencies:
+      '@babel/runtime': 7.29.7
+      csstype: 3.2.3
+
   drizzle-orm@0.45.2(@types/better-sqlite3@7.6.13)(better-sqlite3@11.10.0):
     optionalDependencies:
       '@types/better-sqlite3': 7.6.13
@@ -2310,6 +2602,10 @@ snapshots:
     dependencies:
       once: 1.4.0
 
+  error-ex@1.3.4:
+    dependencies:
+      is-arrayish: 0.2.1
+
   es-define-property@1.0.1: {}
 
   es-errors@1.3.0: {}
@@ -2351,6 +2647,8 @@ snapshots:
 
   escape-html@1.0.3: {}
 
+  escape-string-regexp@4.0.0: {}
+
   etag@1.8.1: {}
 
   eventsource-parser@3.1.0: {}
@@ -2428,6 +2726,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  find-root@1.1.0: {}
+
   forwarded@0.2.0: {}
 
   fresh@2.0.0: {}
@@ -2473,6 +2773,10 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
+  hoist-non-react-statics@3.3.2:
+    dependencies:
+      react-is: 16.13.1
+
   hono@4.13.1: {}
 
   http-errors@2.0.1:
@@ -2489,6 +2793,11 @@ snapshots:
 
   ieee754@1.2.1: {}
 
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
   inherits@2.0.4: {}
 
   ini@1.3.8: {}
@@ -2497,6 +2806,12 @@ snapshots:
 
   ipaddr.js@1.9.1: {}
 
+  is-arrayish@0.2.1: {}
+
+  is-core-module@2.16.2:
+    dependencies:
+      hasown: 2.0.4
+
   is-promise@4.0.0: {}
 
   isexe@2.0.0: {}
@@ -2507,6 +2822,8 @@ snapshots:
 
   jsesc@3.1.0: {}
 
+  json-parse-even-better-errors@2.3.1: {}
+
   json-schema-traverse@1.0.0: {}
 
   json-schema-typed@8.0.2: {}
@@ -2562,6 +2879,12 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.33.0
       lightningcss-win32-x64-msvc: 1.33.0
 
+  lines-and-columns@1.2.4: {}
+
+  loose-envify@1.4.0:
+    dependencies:
+      js-tokens: 4.0.0
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -2570,6 +2893,8 @@ snapshots:
 
   media-typer@1.1.1: {}
 
+  memoize-one@6.0.0: {}
+
   merge-descriptors@2.0.0: {}
 
   mime-db@1.54.0: {}
@@ -2616,12 +2941,27 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
   parseurl@1.3.3: {}
 
   path-key@3.1.1: {}
 
+  path-parse@1.0.7: {}
+
   path-to-regexp@8.4.2: {}
 
+  path-type@4.0.0: {}
+
   pend@1.2.0:
     optional: true
 
@@ -2652,6 +2992,12 @@ snapshots:
       tar-fs: 2.1.5
       tunnel-agent: 0.6.0
 
+  prop-types@15.8.1:
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react-is: 16.13.1
+
   proxy-addr@2.0.7:
     dependencies:
       forwarded: 0.2.0
@@ -2702,6 +3048,8 @@ snapshots:
       react: 19.2.8
       scheduler: 0.27.0
 
+  react-is@16.13.1: {}
+
   react-refresh@0.17.0: {}
 
   react-router-dom@7.18.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
@@ -2718,6 +3066,32 @@ snapshots:
     optionalDependencies:
       react-dom: 19.2.8(react@19.2.8)
 
+  react-select@5.10.2(@types/react@19.2.18)(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@babel/runtime': 7.29.7
+      '@emotion/cache': 11.14.0
+      '@emotion/react': 11.14.0(@types/react@19.2.18)(react@19.2.8)
+      '@floating-ui/dom': 1.8.0
+      '@types/react-transition-group': 4.4.12(@types/react@19.2.18)
+      memoize-one: 6.0.0
+      prop-types: 15.8.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+      react-transition-group: 4.4.5(react-dom@19.2.8(react@19.2.8))(react@19.2.8)
+      use-isomorphic-layout-effect: 1.2.1(@types/react@19.2.18)(react@19.2.8)
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+
+  react-transition-group@4.4.5(react-dom@19.2.8(react@19.2.8))(react@19.2.8):
+    dependencies:
+      '@babel/runtime': 7.29.7
+      dom-helpers: 5.2.1
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.2.8
+      react-dom: 19.2.8(react@19.2.8)
+
   react@19.2.8: {}
 
   readable-stream@3.6.2:
@@ -2728,6 +3102,15 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
+  resolve-from@4.0.0: {}
+
+  resolve@1.22.12:
+    dependencies:
+      es-errors: 1.3.0
+      is-core-module: 2.16.2
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
   rolldown@1.2.3:
     dependencies:
       '@oxc-project/types': 0.143.0
@@ -2841,6 +3224,8 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  source-map@0.5.7: {}
+
   statuses@2.0.2: {}
 
   string-width@7.2.0:
@@ -2864,6 +3249,10 @@ snapshots:
 
   strip-json-comments@2.0.1: {}
 
+  stylis@4.2.0: {}
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
   tar-fs@2.1.5:
     dependencies:
       chownr: 1.1.4
@@ -2937,6 +3326,12 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  use-isomorphic-layout-effect@1.2.1(@types/react@19.2.18)(react@19.2.8):
+    dependencies:
+      react: 19.2.8
+    optionalDependencies:
+      '@types/react': 19.2.18
+
   util-deprecate@1.0.2: {}
 
   vary@1.1.2: {}
@@ -2974,6 +3369,8 @@ snapshots:
 
   yallist@3.1.1: {}
 
+  yaml@1.10.3: {}
+
   yargs-parser@22.0.0: {}
 
   yargs@18.1.0: