@rific/auto-paper 0.9.2 → 0.9.4

package/dist/index.js

@@ -32,6 +32,8 @@ var index_exports = {};
 __export(index_exports, {
   Appbar: () => Appbar,
   AppearancePicker: () => AppearancePicker,
+  AutoAppearancePicker: () => AutoAppearancePicker,
+  AutoPalettePicker: () => AutoPalettePicker,
   BlurView: () => BlurView,
   BottomNavigation: () => BottomNavigation,
   Button: () => Button,
@@ -60,6 +62,7 @@ __export(index_exports, {
   getTonalColor: () => getTonalColor,
   getTriadicPalette: () => getTriadicPalette,
   isDarkColor: () => isDarkColor,
+  resolveSeedColor: () => resolveSeedColor,
   selectThemeAppearance: () => selectThemeAppearance,
   selectThemeBlur: () => selectThemeBlur,
   selectThemeColor: () => selectThemeColor,
@@ -147,20 +150,35 @@ var AppearancePicker = ({ value, onChange, showLabels = true, icons }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.SegmentedButtons, { value, onValueChange: (v) => onChange(v), buttons: APPEARANCES.map((a) => ({ value: a.value, label: showLabels ? a.label : void 0, icon: resolvedIcons[a.value], accessibilityLabel: a.label })) });
 };
 
-// src/components/BlurView.tsx
-var import_react6 = require("react");
-var import_react_native4 = require("react-native");
-var import_react_native_paper5 = require("react-native-paper");
+// src/useThemeSettings.ts
+var import_react4 = require("react");
+var useThemeSettings = () => (0, import_react4.useContext)(ThemeSettingsContext);
 
-// src/ThemeProvider.tsx
-var import_react5 = require("react");
-var import_react_native3 = require("react-native");
-var import_react_native_paper4 = require("react-native-paper");
+// src/components/AutoAppearancePicker.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AutoAppearancePicker = (props) => {
+  const { settings, set } = useThemeSettings();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AppearancePicker, { ...props, value: settings.appearance, onChange: (appearance) => set({ appearance }) });
+};
 
-// src/useComputedTheme.ts
-var import_react4 = require("react");
-var import_react_native2 = require("react-native");
-var import_react_native_paper3 = require("react-native-paper");
+// src/utils/resolveSeedColor.ts
+var resolveSeedColor = (color) => typeof color === "string" ? color : color.primary;
+
+// src/components/PalettePicker.tsx
+var import_react11 = require("react");
+var import_react_native7 = require("react-native");
+var import_react_native_paper9 = require("react-native-paper");
+
+// src/useSwatchGrid.ts
+var import_react5 = require("react");
+var SWATCH_GRID_COLUMNS = 5;
+var SWATCH_GRID_GAP = 12;
+function useSwatchSize(fallback) {
+  const [width, setWidth] = (0, import_react5.useState)(0);
+  const onLayout = ({ nativeEvent }) => setWidth(nativeEvent.layout.width);
+  const size = width > 0 ? (width - SWATCH_GRID_GAP * (SWATCH_GRID_COLUMNS - 1)) / SWATCH_GRID_COLUMNS : fallback;
+  return { onLayout, size };
+}
 
 // src/utils/colorNames.ts
 var colorNames = {
@@ -360,6 +378,25 @@ var getRgb = (value) => {
   return null;
 };
 
+// src/utils/isDarkColor.ts
+var isDarkColor = (value) => {
+  const rgb = getRgb(value);
+  if (!rgb) return false;
+  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255];
+  const [rs, gs, bs] = [r, g, b].map((c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+  const luminance = 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+  return luminance < 0.5;
+};
+
+// src/utils/getSwatchContrast.ts
+var RING_WIDTH = 1;
+var SELECTED_RING_WIDTH = 3;
+var getContrastColor = (color) => isDarkColor(color) ? "#ffffff" : "#000000";
+var getSwatchRing = (color, selected, outlineColor) => ({
+  borderColor: selected ? getContrastColor(color) : outlineColor,
+  borderWidth: selected ? SELECTED_RING_WIDTH : RING_WIDTH
+});
+
 // src/utils/getHex.ts
 var getHex = (value) => {
   const rgb = getRgb(value);
@@ -375,92 +412,6 @@ var getHex = (value) => {
   return hexString;
 };
 
-// src/utils/getBlendedColor.ts
-var getBlendedColor = (foreground, background, alpha) => {
-  const fg = getRgb(foreground);
-  const bg = getRgb(background);
-  if (!fg || !bg) return background;
-  const safeAlpha = Math.min(1, Math.max(0, alpha));
-  const r = Math.round(fg.r * safeAlpha + bg.r * (1 - safeAlpha));
-  const g = Math.round(fg.g * safeAlpha + bg.g * (1 - safeAlpha));
-  const b = Math.round(fg.b * safeAlpha + bg.b * (1 - safeAlpha));
-  return getHex(`rgb(${r}, ${g}, ${b})`) ?? background;
-};
-
-// src/utils/getTonalColor.ts
-var getTonalColor = (color, lightness) => {
-  const rgb = getRgb(color);
-  if (!rgb) return color;
-  const r = rgb.r / 255;
-  const g = rgb.g / 255;
-  const b = rgb.b / 255;
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const delta = max - min;
-  let h = 0;
-  if (delta !== 0) {
-    if (max === r) h = (g - b) / delta % 6;
-    else if (max === g) h = (b - r) / delta + 2;
-    else h = (r - g) / delta + 4;
-    h = (h * 60 + 360) % 360;
-  }
-  const l = (max + min) / 2;
-  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
-  const targetL = Math.min(1, Math.max(0, lightness));
-  const c = (1 - Math.abs(2 * targetL - 1)) * s;
-  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
-  const m = targetL - c / 2;
-  let r2 = 0, g2 = 0, b2 = 0;
-  if (h < 60) {
-    r2 = c;
-    g2 = x;
-    b2 = 0;
-  } else if (h < 120) {
-    r2 = x;
-    g2 = c;
-    b2 = 0;
-  } else if (h < 180) {
-    r2 = 0;
-    g2 = c;
-    b2 = x;
-  } else if (h < 240) {
-    r2 = 0;
-    g2 = x;
-    b2 = c;
-  } else if (h < 300) {
-    r2 = x;
-    g2 = 0;
-    b2 = c;
-  } else {
-    r2 = c;
-    g2 = 0;
-    b2 = x;
-  }
-  const toInt = (n) => Math.round((n + m) * 255);
-  return getHex(`rgb(${toInt(r2)}, ${toInt(g2)}, ${toInt(b2)})`) ?? color;
-};
-
-// src/utils/isDarkColor.ts
-var isDarkColor = (value) => {
-  const rgb = getRgb(value);
-  if (!rgb) return false;
-  const [r, g, b] = [rgb.r / 255, rgb.g / 255, rgb.b / 255];
-  const [rs, gs, bs] = [r, g, b].map((c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
-  const luminance = 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
-  return luminance < 0.5;
-};
-
-// src/utils/getColorRoles.ts
-var getColorRoles = (base, surface, containerAlpha = 0.15) => {
-  const container = getBlendedColor(base, surface, containerAlpha);
-  return {
-    color: base,
-    onColor: getTonalColor(base, isDarkColor(base) ? 0.95 : 0.08),
-    container,
-    onContainer: getTonalColor(base, isDarkColor(container) ? 0.92 : 0.12)
-  };
-};
-
 // src/utils/getTriadicPalette.ts
 var HARMONY_OFFSETS = {
   analogous: [1 / 12, 2 / 12],
@@ -542,6 +493,103 @@ function hslToHex(h, s, l) {
   return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
+// src/components/ColorPicker.tsx
+var import_react10 = require("react");
+var import_react_native6 = require("react-native");
+var import_react_native_paper7 = require("react-native-paper");
+
+// src/components/Dialog.tsx
+var import_react9 = __toESM(require("react"));
+var import_react_native5 = require("react-native");
+var import_react_native_paper6 = require("react-native-paper");
+var import_react_native_safe_area_context = require("react-native-safe-area-context");
+
+// src/ThemeProvider.tsx
+var import_react7 = require("react");
+var import_react_native3 = require("react-native");
+var import_react_native_paper4 = require("react-native-paper");
+
+// src/useComputedTheme.ts
+var import_react6 = require("react");
+var import_react_native2 = require("react-native");
+var import_react_native_paper3 = require("react-native-paper");
+
+// src/utils/getBlendedColor.ts
+var getBlendedColor = (foreground, background, alpha) => {
+  const fg = getRgb(foreground);
+  const bg = getRgb(background);
+  if (!fg || !bg) return background;
+  const safeAlpha = Math.min(1, Math.max(0, alpha));
+  const r = Math.round(fg.r * safeAlpha + bg.r * (1 - safeAlpha));
+  const g = Math.round(fg.g * safeAlpha + bg.g * (1 - safeAlpha));
+  const b = Math.round(fg.b * safeAlpha + bg.b * (1 - safeAlpha));
+  return getHex(`rgb(${r}, ${g}, ${b})`) ?? background;
+};
+
+// src/utils/getTonalColor.ts
+var getTonalColor = (color, lightness) => {
+  const rgb = getRgb(color);
+  if (!rgb) return color;
+  const r = rgb.r / 255;
+  const g = rgb.g / 255;
+  const b = rgb.b / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const delta = max - min;
+  let h = 0;
+  if (delta !== 0) {
+    if (max === r) h = (g - b) / delta % 6;
+    else if (max === g) h = (b - r) / delta + 2;
+    else h = (r - g) / delta + 4;
+    h = (h * 60 + 360) % 360;
+  }
+  const l = (max + min) / 2;
+  const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  const targetL = Math.min(1, Math.max(0, lightness));
+  const c = (1 - Math.abs(2 * targetL - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = targetL - c / 2;
+  let r2 = 0, g2 = 0, b2 = 0;
+  if (h < 60) {
+    r2 = c;
+    g2 = x;
+    b2 = 0;
+  } else if (h < 120) {
+    r2 = x;
+    g2 = c;
+    b2 = 0;
+  } else if (h < 180) {
+    r2 = 0;
+    g2 = c;
+    b2 = x;
+  } else if (h < 240) {
+    r2 = 0;
+    g2 = x;
+    b2 = c;
+  } else if (h < 300) {
+    r2 = x;
+    g2 = 0;
+    b2 = c;
+  } else {
+    r2 = c;
+    g2 = 0;
+    b2 = x;
+  }
+  const toInt = (n) => Math.round((n + m) * 255);
+  return getHex(`rgb(${toInt(r2)}, ${toInt(g2)}, ${toInt(b2)})`) ?? color;
+};
+
+// src/utils/getColorRoles.ts
+var getColorRoles = (base, surface, containerAlpha = 0.15) => {
+  const container = getBlendedColor(base, surface, containerAlpha);
+  return {
+    color: base,
+    onColor: getTonalColor(base, isDarkColor(base) ? 0.95 : 0.08),
+    container,
+    onContainer: getTonalColor(base, isDarkColor(container) ? 0.92 : 0.12)
+  };
+};
+
 // src/useComputedTheme.ts
 function normalizeExplicitColor(value) {
   if (!getRgb(value)) throw new Error(`Invalid color format: ${value}`);
@@ -553,11 +601,11 @@ var SEMANTIC_BASE_COLORS = {
   danger: "#B00020"
 };
 function useComputedTheme(appearance, color, harmony = "split-complementary") {
-  const [theme, setTheme] = (0, import_react4.useState)(null);
+  const [theme, setTheme] = (0, import_react6.useState)(null);
   const primaryInput = typeof color === "string" ? color : color.primary;
   const secondaryInput = typeof color === "string" ? null : color.secondary;
   const tertiaryInput = typeof color === "string" ? null : color.tertiary;
-  const computeTheme = (0, import_react4.useCallback)(() => {
+  const computeTheme = (0, import_react6.useCallback)(() => {
     let resolved = appearance;
     if (resolved === "system") resolved = import_react_native2.Appearance.getColorScheme();
     if (resolved === "no-preference" || !resolved) resolved = "light";
@@ -619,10 +667,10 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
     };
     setTheme(_theme);
   }, [appearance, primaryInput, secondaryInput, tertiaryInput, harmony]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     computeTheme();
   }, [computeTheme]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const subscription = import_react_native2.Appearance.addChangeListener(computeTheme);
     return subscription.remove;
   }, [computeTheme]);
@@ -630,39 +678,39 @@ function useComputedTheme(appearance, color, harmony = "split-complementary") {
 }
 
 // src/ThemeProvider.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var NavBarContext = (0, import_react5.createContext)({});
-var useNavBarContext = () => (0, import_react5.useContext)(NavBarContext);
-var BlurModuleContext = (0, import_react5.createContext)(void 0);
-var useBlurModule = () => (0, import_react5.useContext)(BlurModuleContext);
-var ReanimatedModuleContext = (0, import_react5.createContext)(void 0);
-var useReanimatedModule = () => (0, import_react5.useContext)(ReanimatedModuleContext);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var NavBarContext = (0, import_react7.createContext)({});
+var useNavBarContext = () => (0, import_react7.useContext)(NavBarContext);
+var BlurModuleContext = (0, import_react7.createContext)(void 0);
+var useBlurModule = () => (0, import_react7.useContext)(BlurModuleContext);
+var ReanimatedModuleContext = (0, import_react7.createContext)(void 0);
+var useReanimatedModule = () => (0, import_react7.useContext)(ReanimatedModuleContext);
 function Provider({ children, defaults, expoBlur, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }) {
-  const [settings, setSettings] = (0, import_react5.useState)(() => ({ ...defaultThemeSettings, ...initialValue }));
-  const set = (0, import_react5.useCallback)((patch) => {
+  const [settings, setSettings] = (0, import_react7.useState)(() => ({ ...defaultThemeSettings, ...initialValue }));
+  const set = (0, import_react7.useCallback)((patch) => {
     setSettings((prev) => ({ ...prev, ...patch }));
   }, []);
-  const onChangeRef = (0, import_react5.useRef)(onChange);
+  const onChangeRef = (0, import_react7.useRef)(onChange);
   onChangeRef.current = onChange;
-  const prevSettings = (0, import_react5.useRef)(settings);
-  (0, import_react5.useEffect)(() => {
+  const prevSettings = (0, import_react7.useRef)(settings);
+  (0, import_react7.useEffect)(() => {
     if (prevSettings.current !== settings) {
       prevSettings.current = settings;
       onChangeRef.current?.(settings);
     }
   }, [settings]);
   const theme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
-  const called = (0, import_react5.useRef)(false);
-  (0, import_react5.useEffect)(() => {
+  const called = (0, import_react7.useRef)(false);
+  (0, import_react7.useEffect)(() => {
     if (theme && !called.current) {
       called.current = true;
       onReady?.();
     }
   }, [theme, onReady]);
   if (!theme) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ThemeSettingsContext.Provider, { value: { settings, set }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native_paper4.Provider, { theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeSettingsContext.Provider, { value: { settings, set }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native_paper4.Provider, { theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavBarContext.Provider, { value: { navigationBar, onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BlurModuleContext.Provider, { value: expoBlur, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ReanimatedModuleContext.Provider, { value: reanimated, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native3.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) }) }) })
   ] }) });
 }
 var styles = import_react_native3.StyleSheet.create({
@@ -670,132 +718,52 @@ var styles = import_react_native3.StyleSheet.create({
 });
 
 // src/components/BlurView.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_react_native4 = require("react-native");
+var import_react_native_paper5 = require("react-native-paper");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ELEVATION_OPACITY = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 };
 var VARIANT_TINT_OPACITY = { light: 0.12, dark: 0.18 };
 var BlurView = ({ blur = true, children, elevation, style, tintColor, tintOpacity, variant = "surface", ...props }) => {
   const { dark, colors } = (0, import_react_native_paper5.useTheme)();
-  const { settings } = (0, import_react6.useContext)(ThemeSettingsContext);
+  const { settings } = (0, import_react8.useContext)(ThemeSettingsContext);
   const expoBlur = useBlurModule();
   const surfaceColor = variant === "surfaceVariant" ? colors.surfaceVariant : colors.surface;
   const variantColor = variant === "primary" ? colors.primary : variant === "secondary" ? colors.secondary : variant === "tertiary" ? colors.tertiary : variant === "error" ? colors.error : void 0;
   const resolvedTintColor = tintColor ?? variantColor ?? (elevation !== void 0 ? colors.primary : void 0);
   const resolvedTintOpacity = tintOpacity ?? (tintColor ? dark ? 0.24 : 0.16 : variantColor ? dark ? VARIANT_TINT_OPACITY.dark : VARIANT_TINT_OPACITY.light : elevation !== void 0 ? ELEVATION_OPACITY[elevation] : 0);
-  const tint = resolvedTintColor && resolvedTintOpacity > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
+  const tint = resolvedTintColor && resolvedTintOpacity > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: resolvedTintColor, opacity: resolvedTintOpacity }] }) : null;
   if (blur && expoBlur)
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(expoBlur.BlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(expoBlur.BlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native4.View, { style: [import_react_native4.StyleSheet.absoluteFill, { backgroundColor: surfaceColor, opacity: settings.blurTint }] }),
       tint,
       children
     ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { ...props, style: [{ backgroundColor: surfaceColor }, style], children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native4.View, { ...props, style: [{ backgroundColor: surfaceColor }, style], children: [
     tint,
     children
   ] });
 };
 
-// src/components/BottomNavigation.tsx
-var import_react7 = require("react");
-var import_react_native5 = require("react-native");
-var import_react_native_paper6 = require("react-native-paper");
-
-// src/navigation-bar.ts
-var setNavigationBarStyle = (navigationBar, dark) => {
-  if (!navigationBar) return;
-  navigationBar.NavigationBar.setStyle(dark ? "light" : "dark");
-};
-
-// src/components/BottomNavigation.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-function useNavigationBarSync() {
-  const theme = (0, import_react_native_paper6.useTheme)();
-  const { navigationBar, onNavBarChange } = useNavBarContext();
-  (0, import_react7.useEffect)(() => {
-    if (import_react_native5.Platform.OS !== "android") return;
-    if (onNavBarChange) onNavBarChange(theme.colors.surface, theme.dark);
-    else if (navigationBar) setNavigationBarStyle(navigationBar, theme.dark);
-  }, [theme, onNavBarChange, navigationBar]);
-}
-function BottomNavigationComponent(props) {
-  const defaults = usePaperDefaults();
-  useNavigationBarSync();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper6.BottomNavigation, { ...defaults.BottomNavigation, ...props });
-}
-function Bar(props) {
-  useNavigationBarSync();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper6.BottomNavigation.Bar, { ...props });
-}
-BottomNavigationComponent.Bar = Bar;
-BottomNavigationComponent.SceneMap = import_react_native_paper6.BottomNavigation?.SceneMap;
-var BottomNavigation = BottomNavigationComponent;
-
-// src/components/Button.tsx
-var import_react_native_paper7 = require("react-native-paper");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function Button(props) {
-  const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper7.Button, { ...defaults.Button, ...props });
-}
-
-// src/components/Chip.tsx
-var import_react_native_paper8 = require("react-native-paper");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-function Chip({ variant, style, selectedColor, ...props }) {
-  const defaults = usePaperDefaults();
-  const { colors } = (0, import_react_native_paper8.useTheme)();
-  const variantStyle = variant === "primary" ? { backgroundColor: colors.primaryContainer } : variant === "secondary" ? { backgroundColor: colors.secondaryContainer } : variant === "tertiary" ? { backgroundColor: colors.tertiaryContainer } : variant === "surface" ? { backgroundColor: colors.surface } : void 0;
-  const variantSelectedColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper8.Chip, { ...defaults.Chip, selectedColor: selectedColor ?? variantSelectedColor, ...props, style: [variantStyle, style] });
-}
-
-// src/components/ColorPicker.tsx
-var import_react10 = require("react");
-var import_react_native7 = require("react-native");
-var import_react_native_paper10 = require("react-native-paper");
-
-// src/useSwatchGrid.ts
-var import_react8 = require("react");
-var SWATCH_GRID_COLUMNS = 5;
-var SWATCH_GRID_GAP = 12;
-function useSwatchSize(fallback) {
-  const [width, setWidth] = (0, import_react8.useState)(0);
-  const onLayout = ({ nativeEvent }) => setWidth(nativeEvent.layout.width);
-  const size = width > 0 ? (width - SWATCH_GRID_GAP * (SWATCH_GRID_COLUMNS - 1)) / SWATCH_GRID_COLUMNS : fallback;
-  return { onLayout, size };
-}
-
-// src/utils/getSwatchContrast.ts
-var RING_WIDTH = 1;
-var SELECTED_RING_WIDTH = 3;
-var getContrastColor = (color) => isDarkColor(color) ? "#ffffff" : "#000000";
-var getSwatchRing = (color, selected, outlineColor) => ({
-  borderColor: selected ? getContrastColor(color) : outlineColor,
-  borderWidth: selected ? SELECTED_RING_WIDTH : RING_WIDTH
-});
-
 // src/components/Dialog.tsx
-var import_react9 = __toESM(require("react"));
-var import_react_native6 = require("react-native");
-var import_react_native_paper9 = require("react-native-paper");
-var import_react_native_safe_area_context = require("react-native-safe-area-context");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var ANIMATION_DURATION = 220;
 var DIALOG_MARGIN = 32;
 function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, dismissableBackButton = dismissable, visible, onDismiss, children, style, testID = "dialog" }) {
   const blur = useBlur(blurProp);
   const reanimated = useReanimatedModule();
-  const theme = (0, import_react_native_paper9.useTheme)();
+  const theme = (0, import_react_native_paper6.useTheme)();
   const { colors, isV3, roundness } = theme;
   const { scale } = theme.animation;
   const { bottom, left, right, top } = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
-  const opacity = (0, import_react9.useRef)(new import_react_native6.Animated.Value(visible ? 1 : 0)).current;
+  const opacity = (0, import_react9.useRef)(new import_react_native5.Animated.Value(visible ? 1 : 0)).current;
   const [mounted, setMounted] = (0, import_react9.useState)(visible);
   (0, import_react9.useEffect)(() => {
     if (visible) {
       setMounted(true);
-      import_react_native6.Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: import_react_native6.Easing.out(import_react_native6.Easing.cubic), toValue: 1, useNativeDriver: true }).start();
+      import_react_native5.Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: import_react_native5.Easing.out(import_react_native5.Easing.cubic), toValue: 1, useNativeDriver: true }).start();
     } else {
-      import_react_native6.Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: import_react_native6.Easing.out(import_react_native6.Easing.cubic), toValue: 0, useNativeDriver: true }).start(({ finished }) => {
+      import_react_native5.Animated.timing(opacity, { duration: scale * ANIMATION_DURATION, easing: import_react_native5.Easing.out(import_react_native5.Easing.cubic), toValue: 0, useNativeDriver: true }).start(({ finished }) => {
         if (finished) setMounted(false);
       });
     }
@@ -806,7 +774,7 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
       if (dismissable || dismissableBackButton) onDismiss?.();
       return true;
     };
-    const subscription = import_react_native6.BackHandler.addEventListener("hardwareBackPress", onHardwareBackPress);
+    const subscription = import_react_native5.BackHandler.addEventListener("hardwareBackPress", onHardwareBackPress);
     return () => subscription.remove();
   }, [dismissable, dismissableBackButton, onDismiss, visible]);
   if (!mounted) return null;
@@ -816,30 +784,30 @@ function DialogComponent({ animatedStyle, blur: blurProp, dismissable = true, di
         return import_react9.default.cloneElement(child, { style: [{ marginTop: 24 }, child.props.style] });
       }
     }
-    if (i === 0 && import_react9.default.isValidElement(child) && child.type === import_react_native_paper9.Dialog.Content) {
+    if (i === 0 && import_react9.default.isValidElement(child) && child.type === import_react_native_paper6.Dialog.Content) {
       return import_react9.default.cloneElement(child, { style: [{ paddingTop: 24 }, child.props.style] });
     }
     return child;
   });
   const borderRadius = (isV3 ? 7 : 1) * roundness;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native6.Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [import_react_native6.StyleSheet.absoluteFill, { opacity }], testID, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [import_react_native6.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.View, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native_paper6.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native5.Animated.View, { accessibilityLiveRegion: "polite", accessibilityViewIsModal: true, pointerEvents: visible ? "box-none" : "none", style: [import_react_native5.StyleSheet.absoluteFill, { opacity }], testID, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.Pressable, { accessibilityLabel: "Close modal", accessibilityRole: "button", disabled: !dismissable, onPress: dismissable ? onDismiss : void 0, style: [import_react_native5.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }], testID: `${testID}-backdrop` }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native5.View, { pointerEvents: "box-none", style: [styles2.wrapper, { marginBottom: bottom, marginTop: top, paddingHorizontal: Math.max(left, right, DIALOG_MARGIN) }], testID: `${testID}-wrapper`, children: reanimated && animatedStyle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(reanimated.View, { style: animatedStyle, testID: `${testID}-animated-wrapper`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(BlurView, { blur, style: [styles2.card, { borderRadius }, style], testID: `${testID}-surface`, children: content }) })
   ] }) });
 }
-DialogComponent.Title = import_react_native_paper9.Dialog.Title;
-DialogComponent.Content = import_react_native_paper9.Dialog.Content;
-DialogComponent.Actions = import_react_native_paper9.Dialog.Actions;
-DialogComponent.ScrollArea = import_react_native_paper9.Dialog.ScrollArea;
+DialogComponent.Title = import_react_native_paper6.Dialog.Title;
+DialogComponent.Content = import_react_native_paper6.Dialog.Content;
+DialogComponent.Actions = import_react_native_paper6.Dialog.Actions;
+DialogComponent.ScrollArea = import_react_native_paper6.Dialog.ScrollArea;
 var Dialog = DialogComponent;
-var styles2 = import_react_native6.StyleSheet.create({
+var styles2 = import_react_native5.StyleSheet.create({
   // Width cap keeps dialogs card-sized on wide viewports (web/tablet); no effect on phones.
   card: { alignSelf: "center", maxWidth: 400, overflow: "hidden", width: "100%" },
   wrapper: { flex: 1, justifyContent: "center", paddingVertical: DIALOG_MARGIN }
 });
 
 // src/components/ColorPicker.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var SIZE = 48;
 var defaultColors = [
   { label: "Red", value: "#f44336" },
@@ -865,60 +833,34 @@ var defaultColors = [
 ];
 var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
-  const { colors: themeColors } = (0, import_react_native_paper10.useTheme)();
+  const { colors: themeColors } = (0, import_react_native_paper7.useTheme)();
   const [open, setOpen] = (0, import_react10.useState)(false);
   const { onLayout, size } = useSwatchSize(SIZE);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }, getSwatchRing(value, false, themeColors.outlineVariant)], borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "palette", size: 20, color: getContrastColor(value) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: styles3.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      import_react_native7.TouchableOpacity,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper7.TouchableRipple, { onPress: () => setOpen(true), style: [styles3.trigger, { backgroundColor: value }, getSwatchRing(value, false, themeColors.outlineVariant)], borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper7.Icon, { source: "palette", size: 20, color: getContrastColor(value) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native6.View, { style: styles3.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_react_native6.TouchableOpacity,
       {
         onPress: () => {
           onChange(hex);
           setOpen(false);
         },
         style: [styles3.swatch, { backgroundColor: hex, borderRadius: size / 2, height: size, width: size }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)],
-        children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "check", size: 20, color: getContrastColor(hex) })
+        children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper7.Icon, { source: "check", size: 20, color: getContrastColor(hex) })
       },
       hex
     )) }) }) })
   ] });
 };
-var styles3 = import_react_native7.StyleSheet.create({
+var styles3 = import_react_native6.StyleSheet.create({
   swatch: { alignItems: "center", justifyContent: "center" },
   swatches: { flexDirection: "row", flexWrap: "wrap", gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: SIZE / 2, height: SIZE, justifyContent: "center", width: SIZE }
 });
 
-// src/components/FAB.tsx
-var import_react_native_paper11 = require("react-native-paper");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-function FAB(props) {
-  const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_native_paper11.FAB, { ...defaults.FAB, ...props });
-}
-
 // src/components/HarmonyPicker.tsx
-var import_react11 = require("react");
-var import_react_native_paper13 = require("react-native-paper");
-
-// src/components/Menu.tsx
-var import_react_native8 = require("react-native");
-var import_react_native_paper12 = require("react-native-paper");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var MenuComponent = ({ blur: blurProp, children, ...props }) => {
-  const blur = useBlur(blurProp);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper12.Menu, { ...props, contentStyle: [styles4.content, props.contentStyle], children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BlurView, { blur, children }) });
-};
-var Menu = Object.assign(MenuComponent, {
-  Item: import_react_native_paper12.Menu.Item
-});
-var styles4 = import_react_native8.StyleSheet.create({
-  content: { backgroundColor: "transparent", paddingVertical: 0 }
-});
-
-// src/components/HarmonyPicker.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react_native_paper8 = require("react-native-paper");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var HARMONIES = [
   { label: "Triadic", value: "triadic", icon: "triangle-outline" },
   { label: "Split", value: "split-complementary", icon: "arrow-split-vertical" },
@@ -927,49 +869,30 @@ var HARMONIES = [
   { label: "Complement", value: "complementary", icon: "circle-half-full" },
   { label: "Dbl Split", value: "double-split", icon: "arrow-expand-horizontal" }
 ];
-var HarmonyPicker = ({ value, onChange, blur: blurProp }) => {
-  const blur = useBlur(blurProp);
-  const [open, setOpen] = (0, import_react11.useState)(false);
-  const selected = HARMONIES.find((h) => h.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-    Menu,
-    {
-      blur,
-      visible: open,
-      onDismiss: () => setOpen(false),
-      anchor: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper13.Button, { mode: "outlined", icon: selected.icon, onPress: () => setOpen(true), children: selected.label }),
-      children: HARMONIES.map((h) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-        Menu.Item,
-        {
-          leadingIcon: h.value === value ? "check" : h.icon,
-          title: h.label,
-          onPress: () => {
-            onChange(h.value);
-            setOpen(false);
-          }
-        },
-        h.value
-      ))
-    }
-  );
-};
-
-// src/components/IconButton.tsx
-var import_react_native_paper14 = require("react-native-paper");
-var import_jsx_runtime13 = require("react/jsx-runtime");
-function IconButton({ variant, iconColor, containerColor, ...props }) {
-  const defaults = usePaperDefaults();
-  const { colors } = (0, import_react_native_paper14.useTheme)();
-  const variantContainerColor = variant === "primary" ? colors.primaryContainer : variant === "secondary" ? colors.secondaryContainer : variant === "tertiary" ? colors.tertiaryContainer : variant === "surface" ? colors.surface : void 0;
-  const variantIconColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_paper14.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
-}
+var COMPACT_MIN_WIDTH = 0;
+var HarmonyPicker = ({ value, onChange, showLabels = true, checkedColor, uncheckedColor, checkedContainerColor, uncheckedContainerColor }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  import_react_native_paper8.SegmentedButtons,
+  {
+    value,
+    onValueChange: (v) => onChange(v),
+    buttons: HARMONIES.map((h) => {
+      const checked = h.value === value;
+      const containerColor = checked ? checkedContainerColor : uncheckedContainerColor;
+      return {
+        value: h.value,
+        icon: h.icon,
+        label: showLabels ? h.label : void 0,
+        accessibilityLabel: h.label,
+        checkedColor,
+        uncheckedColor,
+        style: [showLabels ? void 0 : { minWidth: COMPACT_MIN_WIDTH }, containerColor ? { backgroundColor: containerColor } : void 0]
+      };
+    })
+  }
+);
 
 // src/components/PalettePicker.tsx
-var import_react12 = require("react");
-var import_react_native9 = require("react-native");
-var import_react_native_paper15 = require("react-native-paper");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var SIZE2 = 48;
 var defaultWeights = { primary: 2, secondary: 1, tertiary: 1 };
 var buildWedges = (weights) => {
@@ -983,36 +906,40 @@ var buildWedges = (weights) => {
     { key: "secondary", rotate: primary / 2 + tertiary, share: secondary }
   ];
 };
-var Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.pie, { borderRadius: size / 2, height: size, width: size }], children: buildWedges(weights).map(({ key, rotate, share }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.rotator, { transform: [{ rotate: `${rotate}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: styles5.halfMask, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.innerRotator, { transform: [{ rotate: `${share - 180}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: [styles5.wedgeFill, { backgroundColor: palette[key] }] }) }) }) }, key)) });
-var PalettePicker = ({ value, onChange, harmony = "split-complementary", weights, colors = defaultColors, blur: blurProp }) => {
+var Pie = ({ palette, weights = defaultWeights, size = SIZE2 }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: [styles4.pie, { borderRadius: size / 2, height: size, width: size }], children: buildWedges(weights).map(({ key, rotate, share }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: [styles4.rotator, { transform: [{ rotate: `${rotate}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: styles4.halfMask, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: [styles4.innerRotator, { transform: [{ rotate: `${share - 180}deg` }] }], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: [styles4.wedgeFill, { backgroundColor: palette[key] }] }) }) }) }, key)) });
+var PalettePicker = ({ value, onChange, harmony = "split-complementary", onHarmonyChange, weights, colors = defaultColors, blur: blurProp }) => {
   const blur = useBlur(blurProp);
-  const { colors: themeColors } = (0, import_react_native_paper15.useTheme)();
-  const [open, setOpen] = (0, import_react12.useState)(false);
+  const { colors: themeColors } = (0, import_react_native_paper9.useTheme)();
+  const [open, setOpen] = (0, import_react11.useState)(false);
   const { onLayout, size } = useSwatchSize(SIZE2);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.TouchableRipple, { onPress: () => setOpen(true), style: styles5.trigger, borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_native9.View, { style: styles5.triggerContent, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Pie, { palette: getTriadicPalette(value, harmony), weights }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)], children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "palette", size: 20, color: getContrastColor(value) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper9.TouchableRipple, { onPress: () => setOpen(true), style: styles4.trigger, borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react_native7.View, { style: styles4.triggerContent, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Pie, { palette: getTriadicPalette(value, harmony), weights }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { pointerEvents: "none", style: [styles4.triggerIcon, { borderRadius: SIZE2 / 2 }, getSwatchRing(value, false, themeColors.outlineVariant)], children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper9.Icon, { source: "palette", size: 20, color: getContrastColor(value) }) })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Dialog.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { style: styles5.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
-      import_react_native9.TouchableOpacity,
-      {
-        onPress: () => {
-          onChange(hex);
-          setOpen(false);
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Dialog, { blur, visible: open, onDismiss: () => setOpen(false), children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Dialog.Content, { children: [
+      onHarmonyChange && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: styles4.harmonyRow, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HarmonyPicker, { value: harmony, onChange: onHarmonyChange, showLabels: false }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { style: styles4.swatches, onLayout, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        import_react_native7.TouchableOpacity,
+        {
+          onPress: () => {
+            onChange(hex);
+            setOpen(false);
+          },
+          style: [styles4.swatch, { height: size, width: size }],
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native7.View, { pointerEvents: "none", style: [styles4.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper9.Icon, { source: "check", size: 20, color: getContrastColor(hex) }) })
+          ]
         },
-        style: [styles5.swatch, { height: size, width: size }],
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Pie, { palette: getTriadicPalette(hex, harmony), weights, size }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native9.View, { pointerEvents: "none", style: [styles5.ring, { borderRadius: size / 2 }, getSwatchRing(hex, value === hex, themeColors.outlineVariant)], children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.Icon, { source: "check", size: 20, color: getContrastColor(hex) }) })
-        ]
-      },
-      hex
-    )) }) }) })
+        hex
+      )) })
+    ] }) })
   ] });
 };
-var styles5 = import_react_native9.StyleSheet.create({
+var styles4 = import_react_native7.StyleSheet.create({
   halfMask: { height: "100%", left: "50%", overflow: "hidden", position: "absolute", top: 0, width: "50%" },
+  harmonyRow: { marginBottom: 4 },
   innerRotator: { height: "100%", left: "-100%", overflow: "hidden", position: "absolute", top: 0, width: "200%" },
   pie: { overflow: "hidden" },
   rotator: { height: "100%", left: 0, overflow: "hidden", position: "absolute", top: 0, width: "100%" },
@@ -1025,13 +952,108 @@ var styles5 = import_react_native9.StyleSheet.create({
   wedgeFill: { height: "100%", left: "50%", position: "absolute", top: 0, width: "50%" }
 });
 
+// src/components/AutoPalettePicker.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var AutoPalettePicker = (props) => {
+  const { settings, set } = useThemeSettings();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PalettePicker, { ...props, value: resolveSeedColor(settings.color), onChange: (color) => set({ color }), harmony: settings.harmony, onHarmonyChange: (harmony) => set({ harmony }) });
+};
+
+// src/components/BottomNavigation.tsx
+var import_react12 = require("react");
+var import_react_native8 = require("react-native");
+var import_react_native_paper10 = require("react-native-paper");
+
+// src/navigation-bar.ts
+var setNavigationBarStyle = (navigationBar, dark) => {
+  if (!navigationBar) return;
+  navigationBar.NavigationBar.setStyle(dark ? "light" : "dark");
+};
+
+// src/components/BottomNavigation.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function useNavigationBarSync() {
+  const theme = (0, import_react_native_paper10.useTheme)();
+  const { navigationBar, onNavBarChange } = useNavBarContext();
+  (0, import_react12.useEffect)(() => {
+    if (import_react_native8.Platform.OS !== "android") return;
+    if (onNavBarChange) onNavBarChange(theme.colors.surface, theme.dark);
+    else if (navigationBar) setNavigationBarStyle(navigationBar, theme.dark);
+  }, [theme, onNavBarChange, navigationBar]);
+}
+function BottomNavigationComponent(props) {
+  const defaults = usePaperDefaults();
+  useNavigationBarSync();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper10.BottomNavigation, { ...defaults.BottomNavigation, ...props });
+}
+function Bar(props) {
+  useNavigationBarSync();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_native_paper10.BottomNavigation.Bar, { ...props });
+}
+BottomNavigationComponent.Bar = Bar;
+BottomNavigationComponent.SceneMap = import_react_native_paper10.BottomNavigation?.SceneMap;
+var BottomNavigation = BottomNavigationComponent;
+
+// src/components/Button.tsx
+var import_react_native_paper11 = require("react-native-paper");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Button(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_native_paper11.Button, { ...defaults.Button, ...props });
+}
+
+// src/components/Chip.tsx
+var import_react_native_paper12 = require("react-native-paper");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Chip({ variant, style, selectedColor, ...props }) {
+  const defaults = usePaperDefaults();
+  const { colors } = (0, import_react_native_paper12.useTheme)();
+  const variantStyle = variant === "primary" ? { backgroundColor: colors.primaryContainer } : variant === "secondary" ? { backgroundColor: colors.secondaryContainer } : variant === "tertiary" ? { backgroundColor: colors.tertiaryContainer } : variant === "surface" ? { backgroundColor: colors.surface } : void 0;
+  const variantSelectedColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_paper12.Chip, { ...defaults.Chip, selectedColor: selectedColor ?? variantSelectedColor, ...props, style: [variantStyle, style] });
+}
+
+// src/components/FAB.tsx
+var import_react_native_paper13 = require("react-native-paper");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function FAB(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper13.FAB, { ...defaults.FAB, ...props });
+}
+
+// src/components/IconButton.tsx
+var import_react_native_paper14 = require("react-native-paper");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function IconButton({ variant, iconColor, containerColor, ...props }) {
+  const defaults = usePaperDefaults();
+  const { colors } = (0, import_react_native_paper14.useTheme)();
+  const variantContainerColor = variant === "primary" ? colors.primaryContainer : variant === "secondary" ? colors.secondaryContainer : variant === "tertiary" ? colors.tertiaryContainer : variant === "surface" ? colors.surface : void 0;
+  const variantIconColor = variant === "primary" ? colors.onPrimaryContainer : variant === "secondary" ? colors.onSecondaryContainer : variant === "tertiary" ? colors.onTertiaryContainer : variant === "surface" ? colors.onSurface : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper14.IconButton, { ...defaults.IconButton, containerColor: containerColor ?? variantContainerColor, iconColor: iconColor ?? variantIconColor, ...props });
+}
+
+// src/components/Menu.tsx
+var import_react_native9 = require("react-native");
+var import_react_native_paper15 = require("react-native-paper");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var MenuComponent = ({ blur: blurProp, children, ...props }) => {
+  const blur = useBlur(blurProp);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_native_paper15.Menu, { ...props, contentStyle: [styles5.content, props.contentStyle], children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(BlurView, { blur, children }) });
+};
+var Menu = Object.assign(MenuComponent, {
+  Item: import_react_native_paper15.Menu.Item
+});
+var styles5 = import_react_native9.StyleSheet.create({
+  content: { backgroundColor: "transparent", paddingVertical: 0 }
+});
+
 // src/components/TextInput.tsx
 var import_react13 = require("react");
 var import_react_native_paper16 = require("react-native-paper");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var TextInput = (0, import_react13.forwardRef)(function TextInput2(props, ref) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_native_paper16.TextInput, { ref, ...defaults.TextInput, ...props });
 });
 
 // src/redux/themeSlice.ts
@@ -1075,10 +1097,6 @@ var selectThemeHarmony = (state) => state.harmony;
 var import_react_native_paper17 = require("react-native-paper");
 var useAutoPaperTheme = () => (0, import_react_native_paper17.useTheme)();
 
-// src/useThemeSettings.ts
-var import_react14 = require("react");
-var useThemeSettings = () => (0, import_react14.useContext)(ThemeSettingsContext);
-
 // src/utils/getThirdColor.ts
 function rgbToHsl(r, g, b) {
   r /= 255;
@@ -1164,6 +1182,8 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
 0 && (module.exports = {
   Appbar,
   AppearancePicker,
+  AutoAppearancePicker,
+  AutoPalettePicker,
   BlurView,
   BottomNavigation,
   Button,
@@ -1192,6 +1212,7 @@ var getTintTextColor = (tintColor, backdropColor, tintOpacity) => {
   getTonalColor,
   getTriadicPalette,
   isDarkColor,
+  resolveSeedColor,
   selectThemeAppearance,
   selectThemeBlur,
   selectThemeColor,