dirk-cfx-react 1.1.66 → 1.1.68

package/dist/components/index.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SelectProps, FlexProps } from '@mantine/core';
+import { SelectProps, FlexProps, MultiSelectProps } from '@mantine/core';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ComponentType } from 'react';
 import * as framer_motion from 'framer-motion';
@@ -914,6 +914,17 @@ declare const FiveMKeyBindInput: typeof Root & {
     Key: typeof Key;
 };
 
+type ControlSelectProps = Omit<SelectProps, "data" | "value" | "onChange"> & {
+    value: number | null | undefined;
+    onChange: (id: number | null) => void;
+};
+declare function ControlSelect({ value, onChange, label, size, searchable, ...rest }: ControlSelectProps): react_jsx_runtime.JSX.Element;
+type ControlMultiSelectProps = Omit<MultiSelectProps, "data" | "value" | "onChange"> & {
+    value: number[];
+    onChange: (ids: number[]) => void;
+};
+declare function ControlMultiSelect({ value, onChange, label, size, searchable, ...rest }: ControlMultiSelectProps): react_jsx_runtime.JSX.Element;
+
 declare function AsyncSaveButton({ onSave, color, label, style, }: {
     onSave: () => Promise<any>;
     color: string;
@@ -945,4 +956,4 @@ interface TestBedProps {
 }
 declare function TestBed({ items, storageKey, disablePersistence, title, }: TestBedProps): react_jsx_runtime.JSX.Element | null;
 
-export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedProps, Title, type TitleProps, type Vector4Value, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedProps, Title, type TitleProps, type Vector4Value, useModal, useModalActions, useNavigation, useNavigationStore };

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { SelectProps, FlexProps } from '@mantine/core';
+import { SelectProps, FlexProps, MultiSelectProps } from '@mantine/core';
 import * as React$1 from 'react';
 import React__default, { ReactNode, ComponentType } from 'react';
 import * as framer_motion from 'framer-motion';
@@ -914,6 +914,17 @@ declare const FiveMKeyBindInput: typeof Root & {
     Key: typeof Key;
 };
 
+type ControlSelectProps = Omit<SelectProps, "data" | "value" | "onChange"> & {
+    value: number | null | undefined;
+    onChange: (id: number | null) => void;
+};
+declare function ControlSelect({ value, onChange, label, size, searchable, ...rest }: ControlSelectProps): react_jsx_runtime.JSX.Element;
+type ControlMultiSelectProps = Omit<MultiSelectProps, "data" | "value" | "onChange"> & {
+    value: number[];
+    onChange: (ids: number[]) => void;
+};
+declare function ControlMultiSelect({ value, onChange, label, size, searchable, ...rest }: ControlMultiSelectProps): react_jsx_runtime.JSX.Element;
+
 declare function AsyncSaveButton({ onSave, color, label, style, }: {
     onSave: () => Promise<any>;
     color: string;
@@ -945,4 +956,4 @@ interface TestBedProps {
 }
 declare function TestBed({ items, storageKey, disablePersistence, title, }: TestBedProps): react_jsx_runtime.JSX.Element | null;
 
-export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedProps, Title, type TitleProps, type Vector4Value, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AdminPageTitle, type AdminPageTitleProps, AsyncSaveButton, BlipColorSelect, type BlipColorSelectProps, BlipDisplaySelect, type BlipDisplaySelectProps, BlipIconSelect, type BlipIconSelectProps, BorderedIcon, type BorderedIconProps, type ButtonProps, ConfigPanel, type ConfigPanelProps, ConfirmModal, type ConfirmModalProps, ControlMultiSelect, type ControlMultiSelectProps, ControlSelect, type ControlSelectProps, Counter, type FiveMControls, FiveMKeyBindInput, FloatingParticles, type FloatingParticlesProps, GroupName, type GroupNameProps, GroupRank, type GroupRankProps, GroupSelect, type GroupSelectProps, type GroupType, type GroupValue, InfoBox, type InfoBoxProps, InputContainer, type InputContainerProps, LevelBanner, LevelPanel, Modal, ModalContext, type ModalProps, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, type NavItem, NavigationContext, NavigationProvider, type NavigationStore, type ParticleState, PositionPicker, type PositionPickerProps, type ProgressProps, type Prompt, type PromptButton, PromptModal, type SegmentProps, SegmentedControl, type SegmentedControlProps, SegmentedProgress, SelectItem, type SelectItemProps, type StoreModalProps, TestBed, type TestBedItem, type TestBedProps, Title, type TitleProps, type Vector4Value, useModal, useModalActions, useNavigation, useNavigationStore };

package/dist/components/index.js

@@ -1,4 +1,4 @@
-import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, Loader, ActionIcon, Stack, Group, JsonInput } from '@mantine/core';
+import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, NumberInput, MultiSelect, Loader, ActionIcon, Stack, Group, JsonInput } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useRef, useState, useEffect, useMemo } from 'react';
 import { create, useStore, createStore } from 'zustand';
@@ -1647,6 +1647,119 @@ var INPUT_MAPPER_KEYS_BY_PRIMARY = {
   TOUCHPAD_ABSOLUTE_AXIS: [],
   TOUCHPAD_CENTERED_AXIS: []
 };
+
+// src/utils/gtaControls.ts
+var GTA_CONTROLS = [
+  // ── Camera ─────────────────────────────────────────────────────────────────
+  { id: 0, symbol: "INPUT_NEXT_CAMERA", label: "Switch Camera", defaultKey: "V", group: "Camera" },
+  { id: 1, symbol: "INPUT_LOOK_LR", label: "Look Left/Right", defaultKey: "Mouse X", group: "Camera" },
+  { id: 2, symbol: "INPUT_LOOK_UD", label: "Look Up/Down", defaultKey: "Mouse Y", group: "Camera" },
+  { id: 3, symbol: "INPUT_LOOK_UP_ONLY", label: "Look Up Only", group: "Camera" },
+  { id: 4, symbol: "INPUT_LOOK_DOWN_ONLY", label: "Look Down Only", group: "Camera" },
+  { id: 5, symbol: "INPUT_LOOK_LEFT_ONLY", label: "Look Left Only", group: "Camera" },
+  { id: 6, symbol: "INPUT_LOOK_RIGHT_ONLY", label: "Look Right Only", group: "Camera" },
+  { id: 8, symbol: "INPUT_CINEMATIC_SLOWMO", label: "Cinematic Slowmo", defaultKey: "Insert", group: "Camera" },
+  { id: 26, symbol: "INPUT_LOOK_BEHIND", label: "Look Behind", defaultKey: "C", group: "Camera" },
+  { id: 27, symbol: "INPUT_PHONE", label: "Phone", defaultKey: "Up Arrow", group: "Phone" },
+  // ── Movement ───────────────────────────────────────────────────────────────
+  { id: 21, symbol: "INPUT_SPRINT", label: "Sprint", defaultKey: "Left Shift", group: "Movement" },
+  { id: 22, symbol: "INPUT_JUMP", label: "Jump", defaultKey: "Space", group: "Movement" },
+  { id: 23, symbol: "INPUT_ENTER", label: "Enter Vehicle", defaultKey: "F", group: "Movement" },
+  { id: 30, symbol: "INPUT_MOVE_LR", label: "Move Left/Right", group: "Movement" },
+  { id: 31, symbol: "INPUT_MOVE_UD", label: "Move Up/Down", group: "Movement" },
+  { id: 32, symbol: "INPUT_MOVE_UP_ONLY", label: "Move Forward (W)", group: "Movement" },
+  { id: 33, symbol: "INPUT_MOVE_DOWN_ONLY", label: "Move Back (S)", group: "Movement" },
+  { id: 34, symbol: "INPUT_MOVE_LEFT_ONLY", label: "Move Left (A)", group: "Movement" },
+  { id: 35, symbol: "INPUT_MOVE_RIGHT_ONLY", label: "Move Right (D)", group: "Movement" },
+  { id: 36, symbol: "INPUT_DUCK", label: "Duck / Stealth", defaultKey: "Left Ctrl", group: "Movement" },
+  { id: 37, symbol: "INPUT_SELECT_WEAPON", label: "Weapon Wheel", defaultKey: "Tab", group: "Combat" },
+  { id: 38, symbol: "INPUT_PICKUP", label: "Pickup / Interact", defaultKey: "E", group: "Movement" },
+  // ── Combat ─────────────────────────────────────────────────────────────────
+  { id: 24, symbol: "INPUT_ATTACK", label: "Attack / Fire", defaultKey: "Mouse 1", group: "Combat" },
+  { id: 25, symbol: "INPUT_AIM", label: "Aim", defaultKey: "Mouse 2", group: "Combat" },
+  { id: 45, symbol: "INPUT_RELOAD", label: "Reload", defaultKey: "R", group: "Combat" },
+  { id: 47, symbol: "INPUT_DETONATE", label: "Detonate", defaultKey: "G", group: "Combat" },
+  { id: 257, symbol: "INPUT_ATTACK2", label: "Attack 2", group: "Combat" },
+  { id: 140, symbol: "INPUT_MELEE_ATTACK_LIGHT", label: "Melee Light", defaultKey: "R", group: "Combat" },
+  { id: 141, symbol: "INPUT_MELEE_ATTACK_HEAVY", label: "Melee Heavy", defaultKey: "Q", group: "Combat" },
+  { id: 142, symbol: "INPUT_MELEE_ATTACK_ALTERNATE", label: "Melee Alternate", defaultKey: "Mouse 1", group: "Combat" },
+  { id: 263, symbol: "INPUT_MELEE_ATTACK1", label: "Melee Attack 1", group: "Combat" },
+  { id: 264, symbol: "INPUT_MELEE_ATTACK2", label: "Melee Attack 2", group: "Combat" },
+  // ── Cover ──────────────────────────────────────────────────────────────────
+  { id: 44, symbol: "INPUT_COVER", label: "Cover", defaultKey: "Q", group: "Cover" },
+  // ── Vehicle (general) ──────────────────────────────────────────────────────
+  { id: 59, symbol: "INPUT_VEH_MOVE_LR", label: "Vehicle Steering", group: "Vehicle" },
+  { id: 63, symbol: "INPUT_VEH_MOVE_LEFT_ONLY", label: "Vehicle Steer Left", group: "Vehicle" },
+  { id: 64, symbol: "INPUT_VEH_MOVE_RIGHT_ONLY", label: "Vehicle Steer Right", group: "Vehicle" },
+  { id: 71, symbol: "INPUT_VEH_ACCELERATE", label: "Vehicle Accelerate", defaultKey: "W", group: "Vehicle" },
+  { id: 72, symbol: "INPUT_VEH_BRAKE", label: "Vehicle Brake", defaultKey: "S", group: "Vehicle" },
+  { id: 73, symbol: "INPUT_VEH_DUCK", label: "Vehicle Duck", defaultKey: "X", group: "Vehicle" },
+  { id: 74, symbol: "INPUT_VEH_HEADLIGHT", label: "Headlights", defaultKey: "H", group: "Vehicle" },
+  { id: 75, symbol: "INPUT_VEH_EXIT", label: "Exit Vehicle", defaultKey: "F", group: "Vehicle" },
+  { id: 76, symbol: "INPUT_VEH_HANDBRAKE", label: "Handbrake", defaultKey: "Space", group: "Vehicle" },
+  { id: 80, symbol: "INPUT_VEH_CIN_CAM", label: "Cinematic Cam", defaultKey: "R", group: "Vehicle" },
+  { id: 81, symbol: "INPUT_VEH_NEXT_RADIO", label: "Radio Next", group: "Vehicle" },
+  { id: 82, symbol: "INPUT_VEH_PREV_RADIO", label: "Radio Prev", group: "Vehicle" },
+  { id: 83, symbol: "INPUT_VEH_NEXT_RADIO_TRACK", label: "Radio Next Track", group: "Vehicle" },
+  { id: 84, symbol: "INPUT_VEH_PREV_RADIO_TRACK", label: "Radio Prev Track", group: "Vehicle" },
+  { id: 85, symbol: "INPUT_VEH_RADIO_WHEEL", label: "Radio Wheel", defaultKey: "Q", group: "Vehicle" },
+  { id: 86, symbol: "INPUT_VEH_HORN", label: "Horn", defaultKey: "E", group: "Vehicle" },
+  { id: 90, symbol: "INPUT_VEH_AIM", label: "Vehicle Aim", group: "Vehicle" },
+  { id: 91, symbol: "INPUT_VEH_ATTACK", label: "Vehicle Attack", group: "Vehicle" },
+  { id: 92, symbol: "INPUT_VEH_ATTACK2", label: "Vehicle Attack 2", group: "Vehicle" },
+  { id: 99, symbol: "INPUT_VEH_SELECT_NEXT_WEAPON", label: "Veh Next Weapon", group: "Vehicle" },
+  { id: 100, symbol: "INPUT_VEH_SELECT_PREV_WEAPON", label: "Veh Prev Weapon", group: "Vehicle" },
+  // ── Vehicle (Plane/Heli) ───────────────────────────────────────────────────
+  { id: 152, symbol: "INPUT_VEH_FLY_THROTTLE_UP", label: "Plane Throttle Up", defaultKey: "W", group: "Vehicle (Plane/Heli)" },
+  { id: 153, symbol: "INPUT_VEH_FLY_THROTTLE_DOWN", label: "Plane Throttle Down", defaultKey: "S", group: "Vehicle (Plane/Heli)" },
+  { id: 154, symbol: "INPUT_VEH_FLY_YAW_LEFT", label: "Plane Yaw Left", defaultKey: "A", group: "Vehicle (Plane/Heli)" },
+  { id: 155, symbol: "INPUT_VEH_FLY_YAW_RIGHT", label: "Plane Yaw Right", defaultKey: "D", group: "Vehicle (Plane/Heli)" },
+  { id: 158, symbol: "INPUT_VEH_FLY_ATTACK", label: "Plane Attack", defaultKey: "Mouse 1", group: "Vehicle (Plane/Heli)" },
+  // ── Vehicle (Boat / Bike) ──────────────────────────────────────────────────
+  { id: 198, symbol: "INPUT_VEH_BICYCLE_PEDAL", label: "Bike Pedal", group: "Vehicle (Boat/Bike)" },
+  // ── Phone ──────────────────────────────────────────────────────────────────
+  { id: 137, symbol: "INPUT_FRONTEND_SOCIAL_CLUB_SECONDARY", label: "Toggle Phone (alt)", group: "Phone" },
+  // ── Frontend / UI ──────────────────────────────────────────────────────────
+  { id: 199, symbol: "INPUT_FRONTEND_PAUSE", label: "Pause Menu", defaultKey: "P", group: "Frontend / UI" },
+  { id: 200, symbol: "INPUT_FRONTEND_PAUSE_ALTERNATE", label: "Pause Menu (alt)", defaultKey: "Esc", group: "Frontend / UI" },
+  { id: 201, symbol: "INPUT_FRONTEND_ACCEPT", label: "Accept", defaultKey: "Enter", group: "Frontend / UI" },
+  { id: 202, symbol: "INPUT_FRONTEND_CANCEL", label: "Cancel", defaultKey: "Esc", group: "Frontend / UI" },
+  { id: 244, symbol: "INPUT_INTERACTION_MENU", label: "Interaction Menu", defaultKey: "M", group: "Frontend / UI" },
+  // ── Multiplayer ────────────────────────────────────────────────────────────
+  { id: 245, symbol: "INPUT_MP_TEXT_CHAT_ALL", label: "Chat (All)", defaultKey: "T", group: "Multiplayer" },
+  { id: 246, symbol: "INPUT_MP_TEXT_CHAT_TEAM", label: "Chat (Team)", defaultKey: "Y", group: "Multiplayer" },
+  { id: 247, symbol: "INPUT_MP_TEXT_CHAT_FRIENDS", label: "Chat (Friends)", group: "Multiplayer" },
+  { id: 248, symbol: "INPUT_MP_TEXT_CHAT_CREW", label: "Chat (Crew)", group: "Multiplayer" },
+  { id: 249, symbol: "INPUT_PUSH_TO_TALK", label: "Push To Talk", defaultKey: "N", group: "Multiplayer" },
+  // ── Misc ───────────────────────────────────────────────────────────────────
+  { id: 51, symbol: "INPUT_CONTEXT", label: "Context (E)", defaultKey: "E", group: "Misc" },
+  { id: 52, symbol: "INPUT_CONTEXT_SECONDARY", label: "Context Secondary", defaultKey: "Q", group: "Misc" },
+  { id: 73, symbol: "INPUT_CHARACTER_WHEEL", label: "Character Wheel", defaultKey: "Left Alt", group: "Misc" },
+  { id: 105, symbol: "INPUT_HUD_SPECIAL", label: "Special Ability", defaultKey: "Caps Lock", group: "Misc" },
+  { id: 121, symbol: "INPUT_MULTIPLAYER_INFO", label: "Player List", defaultKey: "Z", group: "Misc" },
+  { id: 170, symbol: "INPUT_SAVE_REPLAY_CLIP", label: "Save Replay Clip", defaultKey: "F1", group: "Misc" },
+  { id: 288, symbol: "INPUT_REPLAY_START_STOP_RECORDING", label: "Replay Record", defaultKey: "F1", group: "Misc" },
+  { id: 289, symbol: "INPUT_REPLAY_START_STOP_RECORDING_SECONDARY", label: "Replay Record (alt)", group: "Misc" }
+];
+var BY_ID = new Map(GTA_CONTROLS.map((c) => [c.id, c]));
+function formatGtaControl(id) {
+  const c = BY_ID.get(id);
+  if (!c) return `Control ${id}`;
+  return c.defaultKey ? `${c.label} (${id} \xB7 ${c.defaultKey})` : `${c.label} (${id})`;
+}
+var GTA_CONTROL_GROUP_ORDER = [
+  "Camera",
+  "Movement",
+  "Combat",
+  "Cover",
+  "Vehicle",
+  "Vehicle (Plane/Heli)",
+  "Vehicle (Boat/Bike)",
+  "Phone",
+  "Frontend / UI",
+  "Multiplayer",
+  "Misc"
+];
 function BorderedIcon(props) {
   const theme = useMantineTheme();
   return /* @__PURE__ */ jsx(
@@ -4025,6 +4138,7 @@ function SelectItem(props) {
       data: formattedItems,
       allowDeselect: false,
       searchable: true,
+      comboboxProps: { withinPortal: true, zIndex: 2e3 },
       leftSectionWidth: "4vh",
       leftSection: props.value ? /* @__PURE__ */ jsx(
         Image,
@@ -4430,6 +4544,83 @@ var FiveMKeyBindInput = Object.assign(Root, {
   Category,
   Key
 });
+function buildGroupedData(extraIds = []) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const c of GTA_CONTROLS) {
+    if (!groups.has(c.group)) groups.set(c.group, []);
+    groups.get(c.group).push(c);
+  }
+  const data = GTA_CONTROL_GROUP_ORDER.flatMap((g) => {
+    const items = groups.get(g);
+    if (!items || items.length === 0) return [];
+    return [
+      {
+        group: g,
+        items: items.map((c) => ({
+          value: String(c.id),
+          label: formatGtaControl(c.id)
+        }))
+      }
+    ];
+  });
+  const knownIds = new Set(GTA_CONTROLS.map((c) => c.id));
+  const customs = extraIds.filter((id) => !knownIds.has(id));
+  if (customs.length > 0) {
+    data.push({
+      group: "Custom",
+      items: customs.map((id) => ({ value: String(id), label: `Control ${id}` }))
+    });
+  }
+  return data;
+}
+function ControlSelect({
+  value,
+  onChange,
+  label = "Control",
+  size = "xs",
+  searchable = true,
+  ...rest
+}) {
+  const data = buildGroupedData(value != null ? [value] : []);
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      label,
+      size,
+      searchable,
+      maxDropdownHeight: 320,
+      nothingFoundMessage: "No matching controls",
+      ...rest,
+      data,
+      value: value != null ? String(value) : null,
+      onChange: (v) => onChange(v == null ? null : Number(v))
+    }
+  );
+}
+function ControlMultiSelect({
+  value,
+  onChange,
+  label = "Controls",
+  size = "xs",
+  searchable = true,
+  ...rest
+}) {
+  const data = buildGroupedData(value);
+  return /* @__PURE__ */ jsx(
+    MultiSelect,
+    {
+      label,
+      size,
+      searchable,
+      maxDropdownHeight: 320,
+      nothingFoundMessage: "No matching controls",
+      ...rest,
+      data,
+      value: value.map(String),
+      onChange: (vals) => onChange(vals.map((v) => Number(v)).filter((n) => Number.isFinite(n)))
+    }
+  );
+}
 function AsyncSaveButton({
   onSave,
   color,
@@ -4639,6 +4830,6 @@ function TestBed({
   );
 }
 
-export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, Counter, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, InfoBox, InputContainer, LevelBanner, LevelPanel, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, Title, useModal, useModalActions, useNavigation, useNavigationStore };
+export { AdminPageTitle, AsyncSaveButton, BlipColorSelect, BlipDisplaySelect, BlipIconSelect, BorderedIcon, ConfigPanel, ConfirmModal, ControlMultiSelect, ControlSelect, Counter, FiveMKeyBindInput, FloatingParticles, GroupName, GroupRank, GroupSelect, InfoBox, InputContainer, LevelBanner, LevelPanel, Modal, ModalContext, ModalProvider, MotionFlex, MotionIcon, MotionImage, MotionText, NavBar, NavigationContext, NavigationProvider, PositionPicker, PromptModal, SegmentedControl, SegmentedProgress, SelectItem, TestBed, Title, useModal, useModalActions, useNavigation, useNavigationStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map