@tastic/hud 0.1.6 → 0.3.0

package/dist/index.js

@@ -28,22 +28,22 @@ __export(TriggerGauge_exports, {
 function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, dashWidth, startDeg = DEFAULT_START_DEG, endDeg = startDeg }) {
   const totalDurationMs = MOUNT_DURATION_MS + Math.max(0, segments - 1) * MOUNT_STAGGER_MS;
   const mountProgress = (0, import_react_native_reanimated.useSharedValue)(0);
-  (0, import_react2.useLayoutEffect)(() => {
+  (0, import_react3.useLayoutEffect)(() => {
     mountProgress.value = (0, import_react_native_reanimated.withTiming)(1, { duration: totalDurationMs, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
   }, []);
   const rawSweepDeg = ((endDeg - startDeg) % 360 + 360) % 360;
   const totalSweepDeg = rawSweepDeg === 0 ? 360 : rawSweepDeg;
   const step = segments > 0 ? totalSweepDeg / segments : 0;
-  const centerDeg = (0, import_react2.useCallback)((i) => startDeg + (i + 0.5) * step, [startDeg, step]);
+  const centerDeg = (0, import_react3.useCallback)((i) => startDeg + (i + 0.5) * step, [startDeg, step]);
   const singleSelect = litIndices.length === 1;
   const angleDeg = (0, import_react_native_reanimated.useSharedValue)(centerDeg(litIndices[0] ?? 0));
   const litIndicesKey = [...litIndices].sort((a, b) => a - b).join(",");
-  const [transitionFrom, setTransitionFrom] = (0, import_react2.useState)(litIndices);
+  const [transitionFrom, setTransitionFrom] = (0, import_react3.useState)(litIndices);
   const transitionFromKey = [...transitionFrom].sort((a, b) => a - b).join(",");
-  const lastKeyRef = (0, import_react2.useRef)(litIndicesKey);
-  const lastIndicesRef = (0, import_react2.useRef)(litIndices);
+  const lastKeyRef = (0, import_react3.useRef)(litIndicesKey);
+  const lastIndicesRef = (0, import_react3.useRef)(litIndices);
   const selectionProgress = (0, import_react_native_reanimated.useSharedValue)(1);
-  (0, import_react2.useLayoutEffect)(() => {
+  (0, import_react3.useLayoutEffect)(() => {
     if (litIndicesKey !== lastKeyRef.current) {
       if (singleSelect && lastIndicesRef.current.length === 1) {
         angleDeg.value = (0, import_react_native_reanimated.withTiming)(centerDeg(litIndices[0]), { duration: SELECTION_TRANSITION_DURATION_MS, easing: import_react_native_reanimated.Easing.out(import_react_native_reanimated.Easing.cubic) });
@@ -72,7 +72,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
       if (mountProgress.value < 1) {
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = (0, import_core2.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
+        local = (0, import_core3.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       }
       const sweep = dashAngleDeg * local;
       if (sweep <= 0) continue;
@@ -96,7 +96,7 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
         if (!isLitNow) continue;
         const startFrac = i * MOUNT_STAGGER_MS / totalDurationMs;
         const endFrac = startFrac + MOUNT_DURATION_MS / totalDurationMs;
-        local = (0, import_core2.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
+        local = (0, import_core3.clamp)((mountProgress.value - startFrac) / (endFrac - startFrac), 0, 1);
       } else if (isLitNow === wasLit) {
         local = 1;
       } else if (isLitNow) {
@@ -120,21 +120,21 @@ function TriggerGauge({ segments, litIndices, size, accentColor, mutedColor, das
     height: canvasSize,
     width: canvasSize
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native7.View, { style: [styles4.container, gaugeSizeStyle], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native_skia.Canvas, { style: canvasSizeStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_skia.Path, { path: unlitPath, style: "stroke", strokeWidth: UNLIT_THICKNESS, strokeCap: "round", color: mutedColor, opacity: 0.35 }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_skia.Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native10.View, { style: [styles7.container, gaugeSizeStyle], pointerEvents: "none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native_skia.Canvas, { style: canvasSizeStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_skia.Path, { path: unlitPath, style: "stroke", strokeWidth: UNLIT_THICKNESS, strokeCap: "round", color: mutedColor, opacity: 0.35 }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_skia.Path, { path: litPath, style: "stroke", strokeWidth: LIT_THICKNESS, strokeCap: "round", color: accentColor, opacity: 1 })
   ] }) });
 }
-var import_react_native_skia, import_core2, import_react2, import_react_native7, import_react_native_reanimated, import_jsx_runtime5, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles4;
+var import_react_native_skia, import_core3, import_react3, import_react_native10, import_react_native_reanimated, import_jsx_runtime8, UNLIT_THICKNESS, LIT_THICKNESS, DASH_GAP_PX, ARC_GAP, DEFAULT_START_DEG, MIN_DASH_ANGLE_DEG, MOUNT_DURATION_MS, MOUNT_STAGGER_MS, SELECTION_TRANSITION_DURATION_MS, styles7;
 var init_TriggerGauge = __esm({
   "src/TriggerGauge.tsx"() {
     "use strict";
     import_react_native_skia = require("@shopify/react-native-skia");
-    import_core2 = require("@tastic/core");
-    import_react2 = require("react");
-    import_react_native7 = require("react-native");
+    import_core3 = require("@tastic/core");
+    import_react3 = require("react");
+    import_react_native10 = require("react-native");
     import_react_native_reanimated = require("react-native-reanimated");
-    import_jsx_runtime5 = require("react/jsx-runtime");
+    import_jsx_runtime8 = require("react/jsx-runtime");
     UNLIT_THICKNESS = 3;
     LIT_THICKNESS = 7;
     DASH_GAP_PX = 9;
@@ -144,7 +144,7 @@ var init_TriggerGauge = __esm({
     MOUNT_DURATION_MS = 450;
     MOUNT_STAGGER_MS = 40;
     SELECTION_TRANSITION_DURATION_MS = 260;
-    styles4 = import_react_native7.StyleSheet.create({
+    styles7 = import_react_native10.StyleSheet.create({
       container: {
         alignItems: "center",
         justifyContent: "center",
@@ -157,55 +157,282 @@ var init_TriggerGauge = __esm({
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BaseSettingsDialog: () => BaseSettingsDialog,
+  CornerActionButtons: () => CornerActionButtons,
   InlineColorPicker: () => InlineColorPicker,
+  LABELED_DROPDOWN_POPOVER_WIDTH: () => LABELED_DROPDOWN_POPOVER_WIDTH,
+  LabeledDropdown: () => LabeledDropdown,
   MONO_FONT: () => MONO_FONT,
   PopoverBody: () => PopoverBody,
   PressAwayOverlay: () => PressAwayOverlay,
   ReadyButton: () => ReadyButton,
   SectionedDropdown: () => SectionedDropdown,
+  SharedActionBand: () => SharedActionBand,
   TriggerGaugeHost: () => TriggerGaugeHost,
+  getLabeledDropdownContentHeight: () => getLabeledDropdownContentHeight,
   loadSkiaWeb: () => loadSkiaWeb,
   useAutoAlign: () => useAutoAlign,
   usePopoverHost: () => usePopoverHost
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/fonts.ts
-var import_react_native = require("react-native");
-var MONO_FONT = import_react_native.Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" });
-
-// src/InlineColorPicker.tsx
+// src/BaseSettingsDialog.tsx
 var import_auto_paper = require("@rific/auto-paper");
 var import_feedback_press = require("@rific/feedback-press");
+var import_updater = require("@rific/updater");
 var import_core = require("@tastic/core");
-var import_react_native4 = require("react-native");
+var import_react = require("react");
+var import_react_native = require("react-native");
 var import_react_native_paper = require("react-native-paper");
+var import_jsx_runtime = require("react/jsx-runtime");
+function SettingIcon({ source, color, containerColor }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: [styles.iconBadge, { backgroundColor: containerColor }], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source, size: 18, color }) });
+}
+function BaseSettingsDialog({ visible, onDismiss, rotation = 0, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound = false, hideHaptics = false, hideAppearance = false, hideUpdateCheck = false, onUpdateError, children }) {
+  const { dark, colors } = (0, import_auto_paper.useAutoPaperTheme)();
+  const isTouchPrimary = (0, import_core.useIsTouchPrimaryDevice)();
+  const { settings: hapticSettings, set: setHapticSettings } = (0, import_feedback_press.useHapticSettings)();
+  const { settings: soundSettings, set: setSoundSettings } = (0, import_feedback_press.useSoundSettings)();
+  const sound = (0, import_react.useContext)(import_feedback_press.SoundContext);
+  const { forceShort: forceHapticFeedback } = (0, import_feedback_press.useVibration)();
+  const [infoMessage, setInfoMessage] = (0, import_react.useState)(null);
+  const { check, checking, updateReady } = (0, import_updater.useUpdater)({
+    autoCheck: false,
+    autoPrompt: false,
+    onError: onUpdateError,
+    onInfo: (title, message) => setInfoMessage({ title, message })
+  });
+  const showLockOrientation = isTouchPrimary && lockOrientation !== void 0 && onLockOrientationChange !== void 0;
+  const showEdgeGuard = import_react_native.Platform.OS === "ios" && deferBottomEdgeGestures !== void 0 && onDeferBottomEdgeGestures !== void 0;
+  const showHaptics = import_react_native.Platform.OS !== "web" && !hideHaptics;
+  const showSound = !hideSound;
+  const showAppearance = !hideAppearance;
+  const showUpdateCheck = import_react_native.Platform.OS !== "web" && !hideUpdateCheck;
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const cardBg = dark ? "#111111" : "#F2F2F2";
+  const cardBorder = dark ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.2)";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_auto_paper.Dialog, { visible, onDismiss, style: [styles.dialog, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_auto_paper.Dialog.Title, { children: "Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_auto_paper.Dialog.ScrollArea, { style: styles.scrollArea, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.ScrollView, { contentContainerStyle: styles.content, showsVerticalScrollIndicator: false, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.toggleGroup, children: [
+          showLockOrientation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_feedback_press.TouchableRipple, { onPress: () => onLockOrientationChange(!lockOrientation), style: styles.toggleButton, accessibilityLabel: `Lock orientation ${lockOrientation ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.toggleContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SettingIcon, { source: lockOrientation ? "lock" : "lock-open-variant-outline", color: lockOrientation ? colors.secondary : colors.onSurfaceVariant, containerColor: lockOrientation ? colors.secondaryContainer : colors.surfaceVariant }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.flexShrink, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Lock Orientation" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Pins the current layout" })
+            ] })
+          ] }) }),
+          showEdgeGuard && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_feedback_press.TouchableRipple, { onPress: () => onDeferBottomEdgeGestures(!deferBottomEdgeGestures), style: styles.toggleButton, accessibilityLabel: `Edge guard ${deferBottomEdgeGestures ? "on" : "off"}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.toggleContent, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SettingIcon, { source: deferBottomEdgeGestures ? "shield-check-outline" : "shield-off-outline", color: deferBottomEdgeGestures ? colors.secondary : colors.onSurfaceVariant, containerColor: deferBottomEdgeGestures ? colors.secondaryContainer : colors.surfaceVariant }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.flexShrink, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Edge Guard" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "bodySmall", numberOfLines: 1, style: { color: colors.onSurfaceVariant }, children: "Requires a second swipe" })
+            ] })
+          ] }) }),
+          (showSound || showHaptics) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.toggleRow, children: [
+            showSound && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_feedback_press.TouchableRipple,
+              {
+                soundDisabled: true,
+                onPress: () => {
+                  const enabled = !soundSettings.enabled;
+                  setSoundSettings({ enabled });
+                  if (enabled) sound.selection?.();
+                },
+                style: styles.toggleButtonInRow,
+                accessibilityLabel: `Sound ${soundSettings.enabled ? "on" : "off"}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.toggleContent, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SettingIcon, { source: soundSettings.enabled ? "volume-high" : "volume-off", color: soundSettings.enabled ? colors.tertiary : colors.onSurfaceVariant, containerColor: soundSettings.enabled ? colors.tertiaryContainer : colors.surfaceVariant }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Sound" })
+                ] })
+              }
+            ),
+            showHaptics && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_feedback_press.TouchableRipple,
+              {
+                hapticDisabled: true,
+                onPress: () => {
+                  const vibrate = !hapticSettings.vibrate;
+                  setHapticSettings({ vibrate });
+                  if (vibrate) forceHapticFeedback();
+                },
+                style: styles.toggleButtonInRow,
+                accessibilityLabel: `Haptics ${hapticSettings.vibrate ? "on" : "off"}`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.toggleContent, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SettingIcon, { source: hapticSettings.vibrate ? "vibrate" : "vibrate-off", color: hapticSettings.vibrate ? colors.tertiary : colors.onSurfaceVariant, containerColor: hapticSettings.vibrate ? colors.tertiaryContainer : colors.surfaceVariant }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "bodyLarge", style: { color: colors.onSurface }, children: "Haptics" })
+                ] })
+              }
+            )
+          ] })
+        ] }),
+        showAppearance && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.section, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "labelMedium", style: [styles.sectionLabel, { color: colors.onSurfaceVariant }], children: "APPEARANCE" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_auto_paper.AutoAppearancePicker, { showLabels: false })
+        ] }),
+        children,
+        showUpdateCheck && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles.section, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native_paper.Text, { variant: "labelSmall", style: [styles.sectionLabel, { color: colors.onSurfaceVariant }], children: [
+            "VERSION ",
+            version,
+            updateReady ? " \xB7 UPDATE READY" : ""
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_feedback_press.Button, { mode: "outlined", onPress: check, loading: checking, disabled: checking, children: "Check for Updates" })
+        ] })
+      ] }) })
+    ] }),
+    infoMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: styles.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: [styles.overlayCard, { backgroundColor: cardBg, borderColor: cardBorder }, rotation % 360 !== 0 && { transform: [{ rotate: `${rotation}deg` }] }], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Icon, { source: "information-outline", size: 64, color: colors.secondary }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "headlineLarge", style: [styles.overlayTitle, { color: colors.secondary }], children: infoMessage.title }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Text, { variant: "bodyLarge", style: [styles.overlayBody, { color: fg }], children: infoMessage.message }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_feedback_press.Button, { mode: "contained", onPress: () => setInfoMessage(null), style: styles.overlayButton, buttonColor: colors.primary, textColor: colors.onPrimary, children: "OK" })
+    ] }) }) })
+  ] });
+}
+var styles = import_react_native.StyleSheet.create({
+  content: {
+    gap: 24,
+    paddingVertical: 20
+  },
+  // Caps the card so it never grows past the screen — without this the dialog just keeps
+  // growing to fit its content and the overflow gets clipped by the screen edge, which is
+  // what happened in landscape where there's less height to work with. Dialog.ScrollArea +
+  // ScrollView below then take over and let the content scroll within that bound.
+  dialog: {
+    maxHeight: "90%"
+  },
+  flexShrink: {
+    flexShrink: 1
+  },
+  iconBadge: {
+    alignItems: "center",
+    borderRadius: 10,
+    height: 36,
+    justifyContent: "center",
+    width: 36
+  },
+  overlay: {
+    alignItems: "center",
+    backgroundColor: "rgba(0,0,0,0.72)",
+    bottom: 0,
+    justifyContent: "center",
+    left: 0,
+    position: "absolute",
+    right: 0,
+    top: 0
+  },
+  overlayBody: { textAlign: "center" },
+  overlayButton: { width: 160 },
+  overlayCard: {
+    alignItems: "center",
+    borderRadius: 20,
+    borderWidth: 1,
+    gap: 16,
+    maxWidth: 360,
+    padding: 32
+  },
+  overlayTitle: { fontWeight: "bold" },
+  scrollArea: {
+    marginBottom: 0
+  },
+  section: {
+    gap: 12
+  },
+  sectionLabel: {
+    letterSpacing: 2
+  },
+  // Negative margin cancels the padding so the icon still lines up with APPEARANCE/SOUND &
+  // HAPTICS below, while the ripple/hover highlight itself gets room to breathe on both sides
+  // instead of a flush edge-to-edge slab. overflow: 'hidden' makes sure that highlight actually
+  // clips to borderRadius instead of drawing as a plain rectangle.
+  toggleButton: {
+    borderRadius: 12,
+    marginHorizontal: -12,
+    overflow: "hidden",
+    paddingHorizontal: 12,
+    paddingVertical: 10
+  },
+  // Same shape as toggleButton but `flex: 1` instead of its own `marginHorizontal: -12` — two of
+  // these side by side in toggleRow would otherwise both pull inward and collide in the middle.
+  // toggleRow carries that edge-alignment margin once, for the row as a whole, instead.
+  toggleButtonInRow: {
+    borderRadius: 12,
+    flex: 1,
+    overflow: "hidden",
+    paddingHorizontal: 12,
+    paddingVertical: 10
+  },
+  toggleContent: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12
+  },
+  toggleGroup: {
+    gap: 4
+  },
+  toggleRow: {
+    flexDirection: "row",
+    gap: 4,
+    marginHorizontal: -12
+  }
+});
 
-// src/PopoverBody.tsx
+// src/CornerActionButtons.tsx
+var import_feedback_press2 = require("@rific/feedback-press");
 var import_react_native2 = require("react-native");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function CornerActionButtons({ onBack, onSettings, fg, insets }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press2.IconButton, { icon: "arrow-left", iconColor: fg, size: 24, style: [styles2.back, { top: 8 + insets.top, left: 8 + insets.left }], onPress: onBack, accessibilityLabel: "Back" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press2.IconButton, { icon: "cog", iconColor: fg, size: 24, style: [styles2.topRight, { top: 8 + insets.top, right: 8 + insets.right }], onPress: onSettings, accessibilityLabel: "Settings" })
+  ] });
+}
+var styles2 = import_react_native2.StyleSheet.create({
+  back: {
+    position: "absolute"
+  },
+  topRight: {
+    position: "absolute"
+  }
+});
+
+// src/fonts.ts
+var import_react_native3 = require("react-native");
+var MONO_FONT = import_react_native3.Platform.select({ ios: "Menlo", android: "monospace", default: "monospace" });
+
+// src/InlineColorPicker.tsx
+var import_auto_paper2 = require("@rific/auto-paper");
+var import_feedback_press3 = require("@rific/feedback-press");
+var import_core2 = require("@tastic/core");
+var import_react_native6 = require("react-native");
+var import_react_native_paper2 = require("react-native-paper");
+
+// src/PopoverBody.tsx
+var import_react_native4 = require("react-native");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var CARET_SIZE = 7;
 var CARET_RING_OFFSET = 2;
 var CARET_DIP = 1;
 function PopoverBody({ visible, children, align = "center", verticalAlign = "below", caretColor, caretBorderColor, caretBorderWidth = 1, triggerSize = 0 }) {
   if (!visible) return null;
   const above = verticalAlign === "above";
-  const alignStyle = align === "left" ? styles.contentLeft : align === "right" ? styles.contentRight : styles.contentCenter;
-  const verticalStyle = above ? styles.contentAbove : styles.contentBelow;
+  const alignStyle = align === "left" ? styles3.contentLeft : align === "right" ? styles3.contentRight : styles3.contentCenter;
+  const verticalStyle = above ? styles3.contentAbove : styles3.contentBelow;
   const ringSize = CARET_SIZE + caretBorderWidth;
   const caretOffset = (halfFootprint) => align === "right" ? { right: triggerSize / 2 - halfFootprint } : { left: triggerSize / 2 - halfFootprint };
   const caretFill = above ? "borderTopColor" : "borderBottomColor";
   const caretWidthProp = above ? "borderTopWidth" : "borderBottomWidth";
   const caretEdge = (size) => above ? { bottom: -size + CARET_DIP } : { top: -size + CARET_DIP };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native2.View, { style: [styles.content, alignStyle, verticalStyle], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native4.View, { style: [styles3.content, alignStyle, verticalStyle], children: [
     children,
-    caretColor && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [styles.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native2.View, { style: [styles.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
+    caretColor && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { style: [styles3.caret, caretOffset(ringSize), caretEdge(ringSize), { [caretFill]: caretBorderColor ?? caretColor, [caretWidthProp]: ringSize, borderLeftWidth: ringSize, borderRightWidth: ringSize }] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.View, { style: [styles3.caret, caretOffset(CARET_SIZE), caretEdge(CARET_SIZE - CARET_RING_OFFSET), { [caretFill]: caretColor, [caretWidthProp]: CARET_SIZE, borderLeftWidth: CARET_SIZE, borderRightWidth: CARET_SIZE }] })
     ] })
   ] });
 }
-var styles = import_react_native2.StyleSheet.create({
+var styles3 = import_react_native4.StyleSheet.create({
   caret: {
     borderLeftColor: "transparent",
     borderRightColor: "transparent",
@@ -248,22 +475,22 @@ var styles = import_react_native2.StyleSheet.create({
 });
 
 // src/useAutoAlign.ts
-var import_react = require("react");
-var import_react_native3 = require("react-native");
+var import_react2 = require("react");
+var import_react_native5 = require("react-native");
 var EDGE_MARGIN = 12;
 function useAutoAlign(open, contentWidth, contentHeight) {
-  const triggerRef = (0, import_react.useRef)(null);
-  const { width: windowWidth, height: windowHeight } = (0, import_react_native3.useWindowDimensions)();
-  const [align, setAlign] = (0, import_react.useState)("center");
-  const [verticalAlign, setVerticalAlign] = (0, import_react.useState)("below");
-  const [maxHeight, setMaxHeight] = (0, import_react.useState)(contentHeight);
-  const [measured, setMeasured] = (0, import_react.useState)(false);
-  const [prevOpen, setPrevOpen] = (0, import_react.useState)(open);
+  const triggerRef = (0, import_react2.useRef)(null);
+  const { width: windowWidth, height: windowHeight } = (0, import_react_native5.useWindowDimensions)();
+  const [align, setAlign] = (0, import_react2.useState)("center");
+  const [verticalAlign, setVerticalAlign] = (0, import_react2.useState)("below");
+  const [maxHeight, setMaxHeight] = (0, import_react2.useState)(contentHeight);
+  const [measured, setMeasured] = (0, import_react2.useState)(false);
+  const [prevOpen, setPrevOpen] = (0, import_react2.useState)(open);
   if (open !== prevOpen) {
     setPrevOpen(open);
     if (open) setMeasured(false);
   }
-  const measure = (0, import_react.useCallback)(() => {
+  const measure = (0, import_react2.useCallback)(() => {
     triggerRef.current?.measureInWindow((x, y, triggerWidth, triggerHeight) => {
       const centerX = x + triggerWidth / 2;
       const overflowsRight = centerX + contentWidth / 2 > windowWidth - EDGE_MARGIN;
@@ -279,14 +506,14 @@ function useAutoAlign(open, contentWidth, contentHeight) {
       setMeasured(true);
     });
   }, [contentWidth, contentHeight, windowWidth, windowHeight]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (open) measure();
   }, [open, measure]);
   return { align, maxHeight, measured, triggerRef, verticalAlign };
 }
 
 // src/InlineColorPicker.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var EMOJI_PATTERN = /\p{Extended_Pictographic}/u;
 var DEFAULT_SIZE = 48;
 var SWATCH_SIZE = 28;
@@ -299,10 +526,10 @@ var SCREEN_MARGIN = 40;
 function widthForColumns(columns) {
   return SWATCHES_BORDER_WIDTH * 2 + SWATCHES_PADDING * 2 + SWATCH_SIZE * columns + SWATCHES_GAP * (columns - 1);
 }
-function InlineColorPicker({ id, host, value, onChange, swatches = import_auto_paper.defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
+function InlineColorPicker({ id, host, value, onChange, swatches = import_auto_paper2.defaultColors, takenValue, allowSwapTaken, dark, align: alignOverride, icon = "palette", tag, labelFontFamily = MONO_FONT, autoDismiss = true, columns, size = DEFAULT_SIZE }) {
   const menuBg = dark ? "#000000" : "#FFFFFF";
-  const { width: windowWidth } = (0, import_react_native4.useWindowDimensions)();
-  const autoColumns = (0, import_core.clamp)(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
+  const { width: windowWidth } = (0, import_react_native6.useWindowDimensions)();
+  const autoColumns = (0, import_core2.clamp)(Math.floor((windowWidth - 2 * SCREEN_MARGIN + SWATCHES_GAP) / (SWATCH_SIZE + SWATCHES_GAP)), MIN_COLUMNS, MAX_COLUMNS);
   const resolvedColumns = columns ?? autoColumns;
   const swatchesWidth = widthForColumns(resolvedColumns);
   const swatchRows = Math.ceil(swatches.length / resolvedColumns);
@@ -310,16 +537,16 @@ function InlineColorPicker({ id, host, value, onChange, swatches = import_auto_p
   const open = host.openId === id;
   const { align: autoAlign, maxHeight, measured, triggerRef, verticalAlign } = useAutoAlign(open, swatchesWidth, swatchesHeight);
   const align = alignOverride ?? autoAlign;
-  const contrastColor = (0, import_auto_paper.getContrastColor)(value);
+  const contrastColor = (0, import_auto_paper2.getContrastColor)(value);
   const tagFontSize = size * (tag && EMOJI_PATTERN.test(tag) ? 0.6 : 0.4);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native4.View, { style: [styles2.anchor, open && styles2.anchorOpen], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_feedback_press.TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles2.trigger, { backgroundColor: value, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, { ref: triggerRef, collapsable: false, style: styles2.triggerMeasure, children: tag ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Text, { style: [styles2.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: value, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.ScrollView, { style: [styles2.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }], contentContainerStyle: styles2.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native6.View, { style: [styles4.anchor, open && styles4.anchorOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => host.toggle(id), borderless: true, style: [styles4.trigger, { backgroundColor: value, borderRadius: size / 2, height: size, width: size }], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native6.View, { ref: triggerRef, collapsable: false, style: styles4.triggerMeasure, children: tag ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { style: [styles4.tagLabel, { color: contrastColor, fontFamily: labelFontFamily, fontSize: tagFontSize }], numberOfLines: 1, adjustsFontSizeToFit: true, children: tag }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: icon, size: size * 0.6, color: contrastColor }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: value, caretBorderWidth: SWATCHES_BORDER_WIDTH, triggerSize: size, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native6.ScrollView, { style: [styles4.swatches, { backgroundColor: menuBg, borderColor: value, width: swatchesWidth, maxHeight }], contentContainerStyle: styles4.swatchesContent, showsVerticalScrollIndicator: false, children: swatches.map((swatch) => {
       const selected = swatch.value.toLowerCase() === value.toLowerCase();
       const taken = !selected && !!takenValue && swatch.value.toLowerCase() === takenValue.toLowerCase();
       const swappable = taken && allowSwapTaken;
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_feedback_press.TouchableRipple,
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_feedback_press3.TouchableRipple,
         {
           disabled: taken && !swappable,
           onPress: () => {
@@ -327,15 +554,15 @@ function InlineColorPicker({ id, host, value, onChange, swatches = import_auto_p
             if (autoDismiss) host.close();
           },
           borderless: true,
-          style: [styles2.swatch, { backgroundColor: swatch.value }, selected && styles2.swatchSelected, taken && !swappable && styles2.swatchTaken],
-          children: selected ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: "check", size: 16, color: (0, import_auto_paper.getContrastColor)(swatch.value) }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: "swap-horizontal", size: 16, color: (0, import_auto_paper.getContrastColor)(swatch.value) }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper.Icon, { source: "close", size: 16, color: (0, import_auto_paper.getContrastColor)(swatch.value) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native4.View, {})
+          style: [styles4.swatch, { backgroundColor: swatch.value }, selected && styles4.swatchSelected, taken && !swappable && styles4.swatchTaken],
+          children: selected ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "check", size: 16, color: (0, import_auto_paper2.getContrastColor)(swatch.value) }) : swappable ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "swap-horizontal", size: 16, color: (0, import_auto_paper2.getContrastColor)(swatch.value) }) : taken ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Icon, { source: "close", size: 16, color: (0, import_auto_paper2.getContrastColor)(swatch.value) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native6.View, {})
         },
         swatch.value
       );
     }) }) })
   ] });
 }
-var styles2 = import_react_native4.StyleSheet.create({
+var styles4 = import_react_native6.StyleSheet.create({
   anchor: {
     position: "relative"
   },
@@ -406,31 +633,126 @@ var styles2 = import_react_native4.StyleSheet.create({
   }
 });
 
+// src/LabeledDropdown.tsx
+var import_auto_paper3 = require("@rific/auto-paper");
+var import_feedback_press4 = require("@rific/feedback-press");
+var import_react_native7 = require("react-native");
+var import_react_native_paper3 = require("react-native-paper");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var TRIGGER_HEIGHT = 28;
+var POPOVER_WIDTH = 180;
+var ROW_HEIGHT = 36;
+var LIST_PADDING = 8;
+var LABELED_DROPDOWN_POPOVER_WIDTH = POPOVER_WIDTH;
+function getLabeledDropdownContentHeight(optionCount) {
+  return LIST_PADDING * 2 + optionCount * ROW_HEIGHT;
+}
+function LabeledDropdown({ id, host, options, value, onChange, color, dark, align: forcedAlign, alignOverride }) {
+  const menuBg = dark ? "#000000" : "#FFFFFF";
+  const fg = dark ? "#FFFFFF" : "#000000";
+  const open = host.openId === id;
+  const selected = options.find((o) => o.value === value) ?? null;
+  const contentHeight = LIST_PADDING * 2 + options.length * ROW_HEIGHT;
+  const auto = useAutoAlign(open, POPOVER_WIDTH, contentHeight);
+  const placement = alignOverride ?? auto;
+  const { maxHeight, measured, triggerRef, verticalAlign } = placement;
+  const align = forcedAlign ?? placement.align;
+  const handleSelect = (option) => {
+    onChange(option.value);
+    host.close();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native7.View, { style: [styles5.anchor, open && styles5.anchorOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_feedback_press4.TouchableRipple, { onPress: () => host.toggle(id), style: styles5.trigger, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native7.View, { ref: triggerRef, collapsable: false, style: styles5.triggerInner, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Text, { style: [styles5.triggerLabel, { color }], numberOfLines: 1, children: (selected?.label ?? "").toUpperCase() }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Icon, { source: "menu-down", size: 16, color })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: color, caretBorderWidth: 2, triggerSize: TRIGGER_HEIGHT, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native7.ScrollView, { style: [styles5.menu, { backgroundColor: menuBg, borderColor: color, width: POPOVER_WIDTH, maxHeight }], contentContainerStyle: styles5.menuContent, showsVerticalScrollIndicator: false, children: options.map((option) => {
+      const isSelected = option.value === value;
+      const onColor = (0, import_auto_paper3.getContrastColor)(color);
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_feedback_press4.TouchableRipple, { onPress: () => handleSelect(option), style: [styles5.row, isSelected && { backgroundColor: color }], children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native7.View, { style: styles5.rowInner, children: [
+        option.icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Icon, { source: option.icon, size: 18, color: isSelected ? onColor : fg }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper3.Text, { style: [styles5.rowLabel, { color: isSelected ? onColor : fg }], numberOfLines: 1, children: option.label })
+      ] }) }, option.value);
+    }) }) })
+  ] });
+}
+var styles5 = import_react_native7.StyleSheet.create({
+  anchor: {
+    position: "relative"
+  },
+  // React Native Web gives every position:'relative' view its own stacking context, so the
+  // elevation has to live on the anchor itself — see PopoverBody's own stacking-context notes.
+  anchorOpen: {
+    zIndex: 100
+  },
+  menu: {
+    borderRadius: 12,
+    borderWidth: 2,
+    elevation: 8,
+    shadowColor: "#000000",
+    shadowOffset: { height: 2, width: 0 },
+    shadowOpacity: 0.3,
+    shadowRadius: 8
+  },
+  menuContent: {
+    padding: LIST_PADDING
+  },
+  row: {
+    borderRadius: 8,
+    height: ROW_HEIGHT
+  },
+  rowInner: {
+    alignItems: "center",
+    flexDirection: "row",
+    flex: 1,
+    gap: 8,
+    paddingHorizontal: 12
+  },
+  rowLabel: {
+    flex: 1,
+    fontSize: 14
+  },
+  trigger: {
+    alignSelf: "flex-start"
+  },
+  triggerInner: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 2,
+    height: TRIGGER_HEIGHT
+  },
+  triggerLabel: {
+    fontSize: 13,
+    fontWeight: "700",
+    letterSpacing: 1
+  }
+});
+
 // src/loadSkiaWeb.ts
 function loadSkiaWeb() {
   return Promise.resolve();
 }
 
 // src/PressAwayOverlay.tsx
-var import_react_native5 = require("react-native");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_react_native8 = require("react-native");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function PressAwayOverlay({ active, onPress, style }) {
   if (!active) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native5.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native5.StyleSheet.absoluteFill, style] });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native8.Pressable, { accessibilityLabel: "Dismiss", accessibilityRole: "button", onPress, style: [import_react_native8.StyleSheet.absoluteFill, style] });
 }
 
 // src/ReadyButton.tsx
-var import_feedback_press2 = require("@rific/feedback-press");
-var import_react_native6 = require("react-native");
-var import_react_native_paper2 = require("react-native-paper");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_feedback_press5 = require("@rific/feedback-press");
+var import_react_native9 = require("react-native");
+var import_react_native_paper4 = require("react-native-paper");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ReadyButton({ color, ready, onToggleReady, style, labelFontFamily = MONO_FONT }) {
-  const readyButtonStyle = [styles3.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
+  const readyButtonStyle = [styles6.readyButton, { borderColor: color }, ready && { backgroundColor: color }, style];
   const labelTextStyle = { fontFamily: labelFontFamily, fontWeight: "bold" };
   const labelColorStyle = { color: ready ? "#000000" : color };
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_feedback_press2.TouchableRipple, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper2.Text, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press5.TouchableRipple, { onPress: onToggleReady, borderless: true, style: readyButtonStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper4.Text, { variant: "labelLarge", style: [labelTextStyle, labelColorStyle], children: ready ? "READY \u2713" : "READY?" }) });
 }
-var styles3 = import_react_native6.StyleSheet.create({
+var styles6 = import_react_native9.StyleSheet.create({
   readyButton: {
     alignItems: "center",
     borderRadius: 12,
@@ -443,21 +765,21 @@ var styles3 = import_react_native6.StyleSheet.create({
 });
 
 // src/SectionedDropdown.tsx
-var import_auto_paper2 = require("@rific/auto-paper");
-var import_feedback_press3 = require("@rific/feedback-press");
-var import_react_native8 = require("react-native");
-var import_react_native_paper3 = require("react-native-paper");
+var import_auto_paper4 = require("@rific/auto-paper");
+var import_feedback_press6 = require("@rific/feedback-press");
+var import_react_native11 = require("react-native");
+var import_react_native_paper5 = require("react-native-paper");
 
 // src/TriggerGaugeHost.tsx
-var import_react3 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var LazyTriggerGauge = (0, import_react3.lazy)(() => loadSkiaWeb().then(() => Promise.resolve().then(() => (init_TriggerGauge(), TriggerGauge_exports)).then((m) => ({ default: m.TriggerGauge }))));
+var import_react4 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var LazyTriggerGauge = (0, import_react4.lazy)(() => loadSkiaWeb().then(() => Promise.resolve().then(() => (init_TriggerGauge(), TriggerGauge_exports)).then((m) => ({ default: m.TriggerGauge }))));
 function TriggerGaugeHost(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react3.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(LazyTriggerGauge, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react4.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LazyTriggerGauge, { ...props }) });
 }
 
 // src/SectionedDropdown.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var MENU_BORDER_WIDTH = 1;
 var TRIGGER_SIZE = 44;
 var MENU_MIN_WIDTH = 200;
@@ -470,8 +792,8 @@ var MENU_DIVIDER_HEIGHT = 9;
 var MENU_VERTICAL_PADDING = 12;
 function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accentColor, mutedColor, onAccentColor, dark, align: alignOverride, autoDismiss = true, labelFontFamily = MONO_FONT, allClearLabels = { all: "All", clear: "Clear" } }) {
   const menuBg = dark ? "#000000" : "#FFFFFF";
-  const menuBorderColor = (0, import_auto_paper2.getBlendedColor)(mutedColor, menuBg, 0.5);
-  const resolvedOnAccentColor = onAccentColor ?? (0, import_auto_paper2.getColorRoles)(accentColor, menuBg).onColor;
+  const menuBorderColor = (0, import_auto_paper4.getBlendedColor)(mutedColor, menuBg, 0.5);
+  const resolvedOnAccentColor = onAccentColor ?? (0, import_auto_paper4.getColorRoles)(accentColor, menuBg).onColor;
   const fg = dark ? "#FFFFFF" : "#000000";
   const open = host.openId === id;
   const estimatedHeight = MENU_VERTICAL_PADDING + sections.reduce((sum, section, sectionIndex) => {
@@ -503,17 +825,17 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
     }
     gaugeOffset += section.options.length;
   }
-  const anchorStyle = [styles5.anchor, open && styles5.anchorOpen];
+  const anchorStyle = [styles8.anchor, open && styles8.anchorOpen];
   const menuStyle = { backgroundColor: menuBg, borderColor: menuBorderColor, maxHeight };
   const dividerStyle = { backgroundColor: menuBorderColor };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: anchorStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { ref: triggerRef, collapsable: false, style: styles5.triggerBox, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { style: anchorStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { ref: triggerRef, collapsable: false, style: styles8.triggerBox, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TriggerGaugeHost, { segments: gaugeSegments, litIndices: gaugeLitIndices, size: TRIGGER_SIZE, accentColor, mutedColor }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press6.IconButton, { icon: triggerIcon, iconColor: triggerIconColor, size: triggerIconSize, accessibilityLabel, onPress: () => host.toggle(id) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.ScrollView, { style: [styles5.menu, menuStyle], contentContainerStyle: styles5.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { children: [
-      sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native8.View, { style: [styles5.divider, dividerStyle] }),
-      section.kind === "single" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PopoverBody, { visible: open && measured, align, verticalAlign, caretColor: menuBg, caretBorderColor: menuBorderColor, caretBorderWidth: MENU_BORDER_WIDTH, triggerSize: TRIGGER_SIZE, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native11.ScrollView, { style: [styles8.menu, menuStyle], contentContainerStyle: styles8.menuContent, showsVerticalScrollIndicator: false, children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { children: [
+      sectionIndex > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native11.View, { style: [styles8.divider, dividerStyle] }),
+      section.kind === "single" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         SingleSection,
         {
           section,
@@ -526,7 +848,7 @@ function SectionedDropdown({ id, host, icon, accessibilityLabel, sections, accen
             if (autoDismiss) host.close();
           }
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MultiSection, { section, accentColor, onAccentColor: resolvedOnAccentColor, mutedColor, labelFontFamily, allClearLabels })
     ] }, section.id)) }) })
   ] });
 }
@@ -538,17 +860,17 @@ function SingleSection({
   labelFontFamily,
   onSelect
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: section.options.map((option) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: section.options.map((option) => {
     const selected = option.value === section.value;
     const rowColor = selected ? onAccentColor : mutedColor;
-    const itemStyle = [styles5.item, selected && { backgroundColor: accentColor }];
+    const itemStyle = [styles8.item, selected && { backgroundColor: accentColor }];
     const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
     const descriptionStyle = { fontFamily: labelFontFamily, color: rowColor };
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: styles5.itemRow, children: [
-      option.icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: styles5.itemLabelColumn, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: labelStyle, children: option.label }),
-        option.description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelSmall", style: descriptionStyle, children: option.description })
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press6.TouchableRipple, { onPress: () => onSelect(option.value), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { style: styles8.itemRow, children: [
+      option.icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper5.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { style: styles8.itemLabelColumn, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper5.Text, { variant: "labelLarge", style: labelStyle, children: option.label }),
+        option.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper5.Text, { variant: "labelSmall", style: descriptionStyle, children: option.description })
       ] })
     ] }) }, option.value);
   }) });
@@ -562,23 +884,23 @@ function MultiSection({
   allClearLabels
 }) {
   const allSelected = section.value.length === section.options.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
     section.options.map((option, i) => {
       const selected = section.value.includes(option.value);
       const rowColor = selected ? onAccentColor : mutedColor;
       const prevSelected = selected && i > 0 && section.value.includes(section.options[i - 1].value);
       const nextSelected = selected && i < section.options.length - 1 && section.value.includes(section.options[i + 1].value);
-      const itemStyle = [styles5.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
+      const itemStyle = [styles8.item, selected && { backgroundColor: accentColor }, prevSelected && { borderTopLeftRadius: 0, borderTopRightRadius: 0 }, nextSelected && { borderBottomLeftRadius: 0, borderBottomRightRadius: 0 }];
       const labelStyle = { fontFamily: labelFontFamily, color: rowColor, fontWeight: selected ? "bold" : "normal" };
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_react_native8.View, { style: styles5.itemRow, children: [
-        option.icon && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [styles5.itemLabelFlex, labelStyle], children: option.label })
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press6.TouchableRipple, { onPress: () => section.onChange(selected ? section.value.filter((v) => v !== option.value) : [...section.value, option.value]), style: itemStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_native11.View, { style: styles8.itemRow, children: [
+        option.icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper5.Icon, { source: option.icon, size: MENU_ITEM_ICON_SIZE, color: rowColor }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper5.Text, { variant: "labelLarge", style: [styles8.itemLabelFlex, labelStyle], children: option.label })
       ] }) }, option.value);
     }),
-    section.allClear && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_feedback_press3.TouchableRipple, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles5.item, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper3.Text, { variant: "labelLarge", style: [styles5.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
+    section.allClear && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_feedback_press6.TouchableRipple, { onPress: () => section.onChange(allSelected ? [] : section.options.map((o) => o.value)), style: styles8.item, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper5.Text, { variant: "labelLarge", style: [styles8.allClearLabel, { fontFamily: labelFontFamily, color: accentColor }], children: allSelected ? allClearLabels.clear : allClearLabels.all }) })
   ] });
 }
-var styles5 = import_react_native8.StyleSheet.create({
+var styles8 = import_react_native11.StyleSheet.create({
   allClearLabel: {
     fontWeight: "bold",
     textAlign: "center"
@@ -595,7 +917,7 @@ var styles5 = import_react_native8.StyleSheet.create({
     zIndex: 100
   },
   divider: {
-    height: import_react_native8.StyleSheet.hairlineWidth,
+    height: import_react_native11.StyleSheet.hairlineWidth,
     marginVertical: 4
   },
   item: {
@@ -642,25 +964,61 @@ var styles5 = import_react_native8.StyleSheet.create({
   }
 });
 
+// src/SharedActionBand.tsx
+var import_feedback_press7 = require("@rific/feedback-press");
+var import_react_native12 = require("react-native");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function SharedActionBand({ onBack, onSettings, onRandomize, onReset, fg, popoverOpen, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: [styles9.column, popoverOpen && styles9.columnOpen], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react_native12.View, { style: styles9.actionsRow, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press7.IconButton, { icon: "arrow-left", iconColor: fg, size: 20, onPress: onBack, accessibilityLabel: "Back" }),
+      onRandomize && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press7.IconButton, { icon: "dice-multiple", iconColor: fg, size: 18, onPress: onRandomize, accessibilityLabel: "Randomize match settings" }),
+      onReset && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press7.IconButton, { icon: "restore", iconColor: fg, size: 18, onPress: onReset, accessibilityLabel: "Reset match settings to defaults" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_feedback_press7.IconButton, { icon: "cog", iconColor: fg, size: 20, onPress: onSettings, accessibilityLabel: "Settings" })
+    ] }),
+    children
+  ] });
+}
+var styles9 = import_react_native12.StyleSheet.create({
+  actionsRow: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 16
+  },
+  column: {
+    alignItems: "center",
+    gap: 8
+  },
+  columnOpen: {
+    zIndex: 100
+  }
+});
+
 // src/usePopoverHost.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function usePopoverHost() {
-  const [openId, setOpenId] = (0, import_react4.useState)(null);
-  const toggle = (0, import_react4.useCallback)((id) => {
+  const [openId, setOpenId] = (0, import_react5.useState)(null);
+  const toggle = (0, import_react5.useCallback)((id) => {
     setOpenId((prev) => prev === id ? null : id);
   }, []);
-  const close = (0, import_react4.useCallback)(() => setOpenId(null), []);
+  const close = (0, import_react5.useCallback)(() => setOpenId(null), []);
   return { openId, toggle, close };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BaseSettingsDialog,
+  CornerActionButtons,
   InlineColorPicker,
+  LABELED_DROPDOWN_POPOVER_WIDTH,
+  LabeledDropdown,
   MONO_FONT,
   PopoverBody,
   PressAwayOverlay,
   ReadyButton,
   SectionedDropdown,
+  SharedActionBand,
   TriggerGaugeHost,
+  getLabeledDropdownContentHeight,
   loadSkiaWeb,
   useAutoAlign,
   usePopoverHost