@rific/auto-paper 0.1.3 → 0.3.1

package/dist/index.js

@@ -22,98 +22,834 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Appbar: () => Appbar,
+  AppearancePicker: () => AppearancePicker,
+  BlurView: () => BlurView,
+  BottomNavigation: () => BottomNavigation,
   Button: () => Button,
   Chip: () => Chip,
+  ColorPicker: () => ColorPicker,
+  Dialog: () => Dialog,
   FAB: () => FAB,
+  HarmonyPicker: () => HarmonyPicker,
   IconButton: () => IconButton,
+  Menu: () => Menu,
   Provider: () => Provider,
   TextInput: () => TextInput,
+  ThemeSettingsContext: () => ThemeSettingsContext,
   createThemeReducer: () => createThemeReducer,
+  defaultColors: () => defaultColors,
+  defaultThemeSettings: () => defaultThemeSettings,
   getBlendedColor: () => getBlendedColor,
   getHex: () => getHex,
   getRgb: () => getRgb,
   getTriadicPalette: () => getTriadicPalette,
   isDarkColor: () => isDarkColor,
   selectThemeAppearance: () => selectThemeAppearance,
+  selectThemeBlur: () => selectThemeBlur,
   selectThemeColor: () => selectThemeColor,
+  selectThemeHarmony: () => selectThemeHarmony,
   themeActions: () => themeActions,
   themeReducer: () => themeReducer,
+  useBlur: () => useBlur,
   useComputedTheme: () => useComputedTheme,
-  usePaperDefaults: () => usePaperDefaults
+  usePaperDefaults: () => usePaperDefaults,
+  useThemeSettings: () => useThemeSettings
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/Button.tsx
+// src/BlurContext.tsx
+var import_react2 = require("react");
+
+// src/ThemeSettingsContext.ts
+var import_react = require("react");
+var defaultThemeSettings = {
+  appearance: "system",
+  blur: true,
+  blurTint: 0.2,
+  color: "#6750a4",
+  harmony: "split-complementary"
+};
+var ThemeSettingsContext = (0, import_react.createContext)({
+  settings: defaultThemeSettings,
+  set: () => {
+  }
+});
+
+// src/BlurContext.tsx
+function useBlur(override) {
+  const { settings } = (0, import_react2.useContext)(ThemeSettingsContext);
+  return override ?? settings.blur;
+}
+
+// src/components/Appbar.tsx
+var import_react_native = require("react-native");
 var import_react_native_paper = require("react-native-paper");
 
 // src/PaperDefaultsContext.tsx
-var import_react = require("react");
-var PaperDefaultsContext = (0, import_react.createContext)({});
+var import_react3 = require("react");
+var PaperDefaultsContext = (0, import_react3.createContext)({});
 function usePaperDefaults() {
-  return (0, import_react.useContext)(PaperDefaultsContext);
+  return (0, import_react3.useContext)(PaperDefaultsContext);
 }
 
-// src/components/Button.tsx
+// src/components/Appbar.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function Button(props) {
+function Header({ style, ...props }) {
   const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Button, { ...defaults.Button, ...props });
+  const theme = (0, import_react_native_paper.useTheme)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.StatusBar, { backgroundColor: theme.colors.surface, barStyle: theme.dark ? "light-content" : "dark-content" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_paper.Appbar.Header, { ...defaults.AppbarHeader, ...props, style })
+  ] });
 }
+var Appbar = {
+  Header,
+  Content: import_react_native_paper.Appbar.Content,
+  Action: import_react_native_paper.Appbar.Action,
+  BackAction: import_react_native_paper.Appbar.BackAction
+};
 
-// src/components/Chip.tsx
+// src/components/AppearancePicker.tsx
 var import_react_native_paper2 = require("react-native-paper");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function Chip(props) {
-  const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.Chip, { ...defaults.Chip, ...props });
-}
+var APPEARANCES = [
+  { label: "System", value: "system", icon: "brightness-auto" },
+  { label: "Light", value: "light", icon: "white-balance-sunny" },
+  { label: "Dark", value: "dark", icon: "weather-night" }
+];
+var AppearancePicker = ({ value, onChange }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native_paper2.SegmentedButtons, { value, onValueChange: (v) => onChange(v), buttons: APPEARANCES.map((a) => ({ value: a.value, label: a.label, icon: a.icon })) });
 
-// src/components/FAB.tsx
+// src/components/BlurView.tsx
+var import_expo_blur = require("expo-blur");
+var import_react4 = require("react");
+var import_react_native2 = require("react-native");
 var import_react_native_paper3 = require("react-native-paper");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function FAB(props) {
-  const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_paper3.FAB, { ...defaults.FAB, ...props });
-}
+var ELEVATION_OPACITY = { 0: 0, 1: 0.05, 2: 0.08, 3: 0.11, 4: 0.12, 5: 0.14 };
+var BlurView = ({ blur = true, children, elevation, style, ...props }) => {
+  const { dark, colors } = (0, import_react_native_paper3.useTheme)();
+  const { settings } = (0, import_react4.useContext)(ThemeSettingsContext);
+  const tintOpacity = elevation !== void 0 ? ELEVATION_OPACITY[elevation] : 0;
+  const tint = tintOpacity > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: [import_react_native2.StyleSheet.absoluteFill, { backgroundColor: colors.primary, opacity: tintOpacity }] }) : null;
+  if (blur)
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_expo_blur.BlurView, { ...props, tint: dark ? "dark" : "light", style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native2.View, { style: [import_react_native2.StyleSheet.absoluteFill, { backgroundColor: colors.surface, opacity: settings.blurTint }] }),
+      tint,
+      children
+    ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native2.View, { style: [{ backgroundColor: colors.surface }, style], children: [
+    tint,
+    children
+  ] });
+};
 
-// src/components/IconButton.tsx
-var import_react_native_paper4 = require("react-native-paper");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function IconButton(props) {
-  const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native_paper4.IconButton, { ...defaults.IconButton, ...props });
-}
+// 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/components/TextInput.tsx
-var import_react2 = require("react");
+// src/ThemeProvider.tsx
+var import_react6 = 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 TextInput = (0, import_react2.forwardRef)(function TextInput2(props, ref) {
-  const defaults = usePaperDefaults();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native_paper5.TextInput, { ref, ...defaults.TextInput, ...props });
-});
 
-// node_modules/redux/dist/redux.mjs
-var randomString = () => Math.random().toString(36).substring(7).split("").join(".");
-var ActionTypes = {
-  INIT: `@@redux/INIT${/* @__PURE__ */ randomString()}`,
-  REPLACE: `@@redux/REPLACE${/* @__PURE__ */ randomString()}`,
-  PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${randomString()}`
+// src/useComputedTheme.ts
+var import_react5 = require("react");
+var import_react_native3 = require("react-native");
+var import_react_native_paper4 = require("react-native-paper");
+
+// src/utils/colorNames.ts
+var colorNames = {
+  aliceblue: "#f0f8ff",
+  antiquewhite: "#faebd7",
+  aqua: "#00ffff",
+  aquamarine: "#7fffd4",
+  azure: "#f0ffff",
+  beige: "#f5f5dc",
+  bisque: "#ffe4c4",
+  black: "#000000",
+  blanchedalmond: "#ffebcd",
+  blue: "#0000ff",
+  blueviolet: "#8a2be2",
+  brown: "#a52a2a",
+  burlywood: "#deb887",
+  cadetblue: "#5f9ea0",
+  chartreuse: "#7fff00",
+  chocolate: "#d2691e",
+  coral: "#ff7f50",
+  cornflowerblue: "#6495ed",
+  cornsilk: "#fff8dc",
+  crimson: "#dc143c",
+  cyan: "#00ffff",
+  darkblue: "#00008b",
+  darkcyan: "#008b8b",
+  darkgoldenrod: "#b8860b",
+  darkgray: "#a9a9a9",
+  darkgrey: "#a9a9a9",
+  darkgreen: "#006400",
+  darkkhaki: "#bdb76b",
+  darkmagenta: "#8b008b",
+  darkolivegreen: "#556b2f",
+  darkorange: "#ff8c00",
+  darkorchid: "#9932cc",
+  darkred: "#8b0000",
+  darksalmon: "#e9967a",
+  darkseagreen: "#8fbc8f",
+  darkslateblue: "#483d8b",
+  darkslategray: "#2f4f4f",
+  darkslategrey: "#2f4f4f",
+  darkturquoise: "#00ced1",
+  darkviolet: "#9400d3",
+  deeppink: "#ff1493",
+  deepskyblue: "#00bfff",
+  dimgray: "#696969",
+  dimgrey: "#696969",
+  dodgerblue: "#1e90ff",
+  firebrick: "#b22222",
+  floralwhite: "#fffaf0",
+  forestgreen: "#228b22",
+  fuchsia: "#ff00ff",
+  gainsboro: "#dcdcdc",
+  ghostwhite: "#f8f8ff",
+  gold: "#ffd700",
+  goldenrod: "#daa520",
+  gray: "#808080",
+  grey: "#808080",
+  green: "#008000",
+  greenyellow: "#adff2f",
+  honeydew: "#f0fff0",
+  hotpink: "#ff69b4",
+  indianred: "#cd5c5c",
+  indigo: "#4b0082",
+  ivory: "#fffff0",
+  khaki: "#f0e68c",
+  lavender: "#e6e6fa",
+  lavenderblush: "#fff0f5",
+  lawngreen: "#7cfc00",
+  lemonchiffon: "#fffacd",
+  lightblue: "#add8e6",
+  lightcoral: "#f08080",
+  lightcyan: "#e0ffff",
+  lightgoldenrodyellow: "#fafad2",
+  lightgray: "#d3d3d3",
+  lightgrey: "#d3d3d3",
+  lightgreen: "#90ee90",
+  lightpink: "#ffb6c1",
+  lightsalmon: "#ffa07a",
+  lightseagreen: "#20b2aa",
+  lightskyblue: "#87cefa",
+  lightslategray: "#778899",
+  lightslategrey: "#778899",
+  lightsteelblue: "#b0c4de",
+  lightyellow: "#ffffe0",
+  lime: "#00ff00",
+  limegreen: "#32cd32",
+  linen: "#faf0e6",
+  magenta: "#ff00ff",
+  maroon: "#800000",
+  mediumaquamarine: "#66cdaa",
+  mediumblue: "#0000cd",
+  mediumorchid: "#ba55d3",
+  mediumpurple: "#9370db",
+  mediumseagreen: "#3cb371",
+  mediumslateblue: "#7b68ee",
+  mediumspringgreen: "#00fa9a",
+  mediumturquoise: "#48d1cc",
+  mediumvioletred: "#c71585",
+  midnightblue: "#191970",
+  mintcream: "#f5fffa",
+  mistyrose: "#ffe4e1",
+  moccasin: "#ffe4b5",
+  navajowhite: "#ffdead",
+  navy: "#000080",
+  oldlace: "#fdf5e6",
+  olive: "#808000",
+  olivedrab: "#6b8e23",
+  orange: "#ffa500",
+  orangered: "#ff4500",
+  orchid: "#da70d6",
+  palegoldenrod: "#eee8aa",
+  palegreen: "#98fb98",
+  paleturquoise: "#afeeee",
+  palevioletred: "#db7093",
+  papayawhip: "#ffefd5",
+  peachpuff: "#ffdab9",
+  peru: "#cd853f",
+  pink: "#ffc0cb",
+  plum: "#dda0dd",
+  powderblue: "#b0e0e6",
+  purple: "#800080",
+  rebeccapurple: "#663399",
+  red: "#ff0000",
+  rosybrown: "#bc8f8f",
+  royalblue: "#4169e1",
+  saddlebrown: "#8b4513",
+  salmon: "#fa8072",
+  sandybrown: "#f4a460",
+  seagreen: "#2e8b57",
+  seashell: "#fff5ee",
+  sienna: "#a0522d",
+  silver: "#c0c0c0",
+  skyblue: "#87ceeb",
+  slateblue: "#6a5acd",
+  slategray: "#708090",
+  slategrey: "#708090",
+  snow: "#fffafa",
+  springgreen: "#00ff7f",
+  steelblue: "#4682b4",
+  tan: "#d2b48c",
+  teal: "#008080",
+  thistle: "#d8bfd8",
+  tomato: "#ff6347",
+  transparent: "transparent",
+  turquoise: "#40e0d0",
+  violet: "#ee82ee",
+  wheat: "#f5deb3",
+  white: "#ffffff",
+  whitesmoke: "#f5f5f5",
+  yellow: "#ffff00",
+  yellowgreen: "#9acd32"
 };
-function isPlainObject(obj) {
-  if (typeof obj !== "object" || obj === null)
-    return false;
-  let proto = obj;
-  while (Object.getPrototypeOf(proto) !== null) {
-    proto = Object.getPrototypeOf(proto);
+
+// src/utils/getRgb.ts
+var getRgb = (value) => {
+  if (!value) return null;
+  let trimmed = value.trim().toLowerCase();
+  const namedColor = colorNames[trimmed];
+  if (namedColor) trimmed = namedColor;
+  const hexMatch = trimmed.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);
+  if (hexMatch) {
+    const hex = hexMatch[1];
+    let normalized = hex;
+    if (hex.length === 3) {
+      normalized = hex.split("").map((c) => c + c).join("");
+    } else if (hex.length === 8) {
+      const alpha = parseInt(hex.substring(6, 8), 16);
+      normalized = hex.substring(0, 6);
+      const intVal2 = parseInt(normalized, 16);
+      return {
+        r: intVal2 >> 16 & 255,
+        g: intVal2 >> 8 & 255,
+        b: intVal2 & 255,
+        a: alpha / 255
+      };
+    }
+    const intVal = parseInt(normalized, 16);
+    return {
+      r: intVal >> 16 & 255,
+      g: intVal >> 8 & 255,
+      b: intVal & 255
+    };
   }
-  return Object.getPrototypeOf(obj) === proto || Object.getPrototypeOf(obj) === null;
-}
-function compose(...funcs) {
-  if (funcs.length === 0) {
-    return (arg) => arg;
+  const rgbMatch = trimmed.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([0-9.]+))?\s*\)$/i);
+  if (rgbMatch) {
+    const result = {
+      r: Number(rgbMatch[1]),
+      g: Number(rgbMatch[2]),
+      b: Number(rgbMatch[3])
+    };
+    if (rgbMatch[4] !== void 0) {
+      result.a = Number(rgbMatch[4]);
+    }
+    return result;
   }
-  if (funcs.length === 1) {
+  return null;
+};
+
+// src/utils/getHex.ts
+var getHex = (value) => {
+  const rgb = getRgb(value);
+  if (!rgb) return null;
+  const toHex = (n) => {
+    const hex = Math.round(n).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  };
+  const hexString = `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
+  if (rgb.a !== void 0) {
+    return `${hexString}${toHex(rgb.a * 255)}`;
+  }
+  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/getTriadicPalette.ts
+var HARMONY_OFFSETS = {
+  analogous: [1 / 12, 2 / 12],
+  complementary: [1 / 4, 1 / 2],
+  "double-split": [1 / 12, 11 / 12],
+  "split-complementary": [5 / 12, 7 / 12],
+  square: [1 / 4, 3 / 4],
+  triadic: [1 / 3, 2 / 3]
+};
+function getTriadicPalette(primaryColor, harmony = "split-complementary") {
+  const rgb = getRgb(primaryColor);
+  if (!rgb) throw new Error(`Invalid color format: ${primaryColor}`);
+  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 l = (max + min) / 2;
+  let h = 0;
+  let s = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  const [o1, o2] = HARMONY_OFFSETS[harmony];
+  return {
+    primary: getHex(primaryColor) ?? primaryColor,
+    secondary: hslToHex((h + o1) % 1, s, l),
+    tertiary: hslToHex((h + o2) % 1, s, l)
+  };
+}
+function hslToHex(h, s, l) {
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h * 6 % 2 - 1));
+  const m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  if (h < 1 / 6) {
+    r = c;
+    g = x;
+    b = 0;
+  } else if (h < 2 / 6) {
+    r = x;
+    g = c;
+    b = 0;
+  } else if (h < 3 / 6) {
+    r = 0;
+    g = c;
+    b = x;
+  } else if (h < 4 / 6) {
+    r = 0;
+    g = x;
+    b = c;
+  } else if (h < 5 / 6) {
+    r = x;
+    g = 0;
+    b = c;
+  } else {
+    r = c;
+    g = 0;
+    b = x;
+  }
+  const toHex = (value) => {
+    const hex = Math.round((value + m) * 255).toString(16);
+    return hex.length === 1 ? `0${hex}` : hex;
+  };
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+
+// 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/useComputedTheme.ts
+function useComputedTheme(appearance, color, harmony = "split-complementary") {
+  const [theme, setTheme] = (0, import_react5.useState)(null);
+  const computeTheme = (0, import_react5.useCallback)(() => {
+    let resolved = appearance;
+    if (resolved === "system") resolved = import_react_native3.Appearance.getColorScheme();
+    if (resolved === "no-preference" || !resolved) resolved = "light";
+    const base = resolved === "dark" ? import_react_native_paper4.MD3DarkTheme : import_react_native_paper4.MD3LightTheme;
+    const _theme = {
+      ...base,
+      colors: {
+        ...base.colors,
+        elevation: { ...base.colors.elevation }
+      }
+    };
+    const palette = getTriadicPalette(color, harmony);
+    const surface = base.colors.surface;
+    _theme.colors.primary = palette.primary;
+    _theme.colors.onPrimary = getTonalColor(palette.primary, isDarkColor(palette.primary) ? 0.95 : 0.08);
+    _theme.colors.primaryContainer = getBlendedColor(palette.primary, surface, 0.15);
+    _theme.colors.onPrimaryContainer = getTonalColor(palette.primary, isDarkColor(_theme.colors.primaryContainer) ? 0.92 : 0.12);
+    _theme.colors.secondary = palette.secondary;
+    _theme.colors.onSecondary = getTonalColor(palette.secondary, isDarkColor(palette.secondary) ? 0.95 : 0.08);
+    _theme.colors.secondaryContainer = getBlendedColor(palette.secondary, surface, 0.15);
+    _theme.colors.onSecondaryContainer = getTonalColor(palette.secondary, isDarkColor(_theme.colors.secondaryContainer) ? 0.92 : 0.12);
+    _theme.colors.tertiary = palette.tertiary;
+    _theme.colors.onTertiary = getTonalColor(palette.tertiary, isDarkColor(palette.tertiary) ? 0.95 : 0.08);
+    _theme.colors.tertiaryContainer = getBlendedColor(palette.tertiary, surface, 0.15);
+    _theme.colors.onTertiaryContainer = getTonalColor(palette.tertiary, isDarkColor(_theme.colors.tertiaryContainer) ? 0.92 : 0.12);
+    const blended = getBlendedColor(color, palette.secondary, 0.5);
+    const tintSurface = (alpha) => getBlendedColor(blended, surface, alpha);
+    _theme.colors.background = base.dark ? "#0F0F0F" : "#F0F0F0";
+    _theme.colors.surface = surface;
+    _theme.colors.surfaceVariant = tintSurface(0.2);
+    _theme.colors.outline = getBlendedColor(color, base.colors.outline, 0.45);
+    const grey = base.dark ? "#424242" : "#c2c2c2";
+    const blendedGrey = getBlendedColor(blended, grey, 0.05);
+    _theme.colors.elevation = {
+      ..._theme.colors.elevation,
+      level1: _theme.colors.surface,
+      level2: getBlendedColor(blendedGrey, _theme.colors.surface, 0.25),
+      level3: getBlendedColor(blendedGrey, _theme.colors.surface, 0.4),
+      level4: getBlendedColor(blendedGrey, _theme.colors.surface, 0.55),
+      level5: getBlendedColor(blendedGrey, _theme.colors.surface, 0.7)
+    };
+    setTheme(_theme);
+  }, [appearance, color, harmony]);
+  (0, import_react5.useEffect)(() => {
+    computeTheme();
+  }, [computeTheme]);
+  (0, import_react5.useEffect)(() => {
+    const subscription = import_react_native3.Appearance.addChangeListener(computeTheme);
+    return subscription.remove;
+  }, [computeTheme]);
+  return theme;
+}
+
+// src/ThemeProvider.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var NavBarContext = (0, import_react6.createContext)({});
+var useNavBarContext = () => (0, import_react6.useContext)(NavBarContext);
+function Provider({ overrides, onChange, children, defaults, onNavBarChange, onReady, statusBarProps, style }) {
+  const [settings, setSettings] = (0, import_react6.useState)(() => ({ ...defaultThemeSettings, ...overrides }));
+  const set2 = (0, import_react6.useCallback)(
+    (patch) => {
+      setSettings((prev) => {
+        const next = { ...prev, ...patch };
+        onChange?.(next);
+        return next;
+      });
+    },
+    [onChange]
+  );
+  const theme = useComputedTheme(settings.appearance, settings.color, settings.harmony);
+  const called = (0, import_react6.useRef)(false);
+  (0, import_react6.useEffect)(() => {
+    if (theme && !called.current) {
+      called.current = true;
+      onReady?.();
+    }
+  }, [theme, onReady]);
+  if (!theme) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThemeSettingsContext.Provider, { value: { settings, set: set2 }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native_paper5.Provider, { theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.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: { onNavBarChange }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) }) })
+  ] }) });
+}
+var styles = import_react_native4.StyleSheet.create({
+  flex: { flex: 1 }
+});
+
+// src/components/BottomNavigation.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function useNavigationBarSync() {
+  const theme = (0, import_react_native_paper6.useTheme)();
+  const { onNavBarChange } = useNavBarContext();
+  (0, import_react7.useEffect)(() => {
+    if (import_react_native5.Platform.OS !== "android" || !onNavBarChange) return;
+    onNavBarChange(theme.colors.surface, theme.dark);
+  }, [theme, onNavBarChange]);
+}
+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(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_native_paper8.Chip, { ...defaults.Chip, ...props });
+}
+
+// src/components/ColorPicker.tsx
+var import_react9 = require("react");
+var import_react_native7 = require("react-native");
+var import_react_native_paper10 = require("react-native-paper");
+
+// src/components/Dialog.tsx
+var import_react8 = require("react");
+var import_react_native6 = require("react-native");
+var import_react_native_paper9 = require("react-native-paper");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function DialogComponent({ blur: blurProp, visible, onDismiss, children, style, ...rest }) {
+  const blur = useBlur(blurProp);
+  const { roundness, colors } = (0, import_react_native_paper9.useTheme)();
+  const opacity = (0, import_react8.useRef)(new import_react_native6.Animated.Value(0)).current;
+  const [mounted, setMounted] = (0, import_react8.useState)(visible);
+  (0, import_react8.useEffect)(() => {
+    if (visible) {
+      setMounted(true);
+      import_react_native6.Animated.timing(opacity, { toValue: 1, duration: 200, useNativeDriver: true }).start();
+    } else {
+      import_react_native6.Animated.timing(opacity, { toValue: 0, duration: 150, useNativeDriver: true }).start(() => setMounted(false));
+    }
+  }, [visible]);
+  if (!blur) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper9.Dialog, { visible, onDismiss, style, ...rest, children });
+  }
+  if (!mounted) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native_paper9.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_react_native6.Animated.View, { style: [import_react_native6.StyleSheet.absoluteFill, { opacity }], pointerEvents: visible ? "box-none" : "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.TouchableWithoutFeedback, { onPress: onDismiss, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.View, { style: [import_react_native6.StyleSheet.absoluteFill, { backgroundColor: colors.backdrop }] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_native6.View, { style: styles2.wrapper, pointerEvents: "box-none", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlurView, { style: [styles2.card, { borderRadius: roundness * 7 }], children }) })
+  ] }) });
+}
+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;
+var Dialog = DialogComponent;
+var styles2 = import_react_native6.StyleSheet.create({
+  card: { overflow: "hidden" },
+  wrapper: { flex: 1, justifyContent: "center", paddingHorizontal: 26 }
+});
+
+// src/components/ColorPicker.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var defaultColors = [
+  { label: "Red", value: "#f44336" },
+  { label: "Coral", value: "#ff5722" },
+  { label: "Orange", value: "#ff6d00" },
+  { label: "Amber", value: "#ff9800" },
+  { label: "Yellow", value: "#fdd835" },
+  { label: "Lime", value: "#8bc34a" },
+  { label: "Emerald", value: "#4caf50" },
+  { label: "Teal", value: "#009688" },
+  { label: "Cyan", value: "#00bcd4" },
+  { label: "Blue", value: "#2196f3" },
+  { label: "Indigo", value: "#3f51b5" },
+  { label: "Deep Purple", value: "#673ab7" },
+  { label: "Violet", value: "#9c27b0" },
+  { label: "Magenta", value: "#d500f9" },
+  { label: "Pink", value: "#ec407a" },
+  { label: "Rose", value: "#e91e63" },
+  { label: "Brown", value: "#795548" },
+  { label: "Blue Grey", value: "#607d8b" }
+];
+var ColorPicker = ({ value, onChange, colors = defaultColors, blur: blurProp }) => {
+  const blur = useBlur(blurProp);
+  const [open, setOpen] = (0, import_react9.useState)(false);
+  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 }], borderless: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "palette", size: 20, color: "white" }) }),
+    /* @__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, children: colors.map(({ value: hex }) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      import_react_native7.TouchableOpacity,
+      {
+        onPress: () => {
+          onChange(hex);
+          setOpen(false);
+        },
+        style: [styles3.swatch, { backgroundColor: hex }, value === hex && styles3.selected],
+        children: value === hex && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react_native_paper10.Icon, { source: "check", size: 20, color: "white" })
+      },
+      hex
+    )) }) }) })
+  ] });
+};
+var styles3 = import_react_native7.StyleSheet.create({
+  selected: { borderColor: "white", borderWidth: 3 },
+  swatch: { alignItems: "center", borderRadius: 24, height: 48, justifyContent: "center", width: 48 },
+  swatches: { flexDirection: "row", flexWrap: "wrap", gap: 12, paddingTop: 12 },
+  trigger: { alignItems: "center", alignSelf: "flex-start", borderRadius: 24, height: 48, justifyContent: "center", width: 48 }
+});
+
+// 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_react10 = 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 HARMONIES = [
+  { label: "Triadic", value: "triadic", icon: "triangle-outline" },
+  { label: "Split", value: "split-complementary", icon: "arrow-split-vertical" },
+  { label: "Analogous", value: "analogous", icon: "ray-end-arrow" },
+  { label: "Square", value: "square", icon: "square-outline" },
+  { 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_react10.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(props) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_native_paper14.IconButton, { ...defaults.IconButton, ...props });
+}
+
+// src/components/TextInput.tsx
+var import_react11 = require("react");
+var import_react_native_paper15 = require("react-native-paper");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var TextInput = (0, import_react11.forwardRef)(function TextInput2(props, ref) {
+  const defaults = usePaperDefaults();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_native_paper15.TextInput, { ref, ...defaults.TextInput, ...props });
+});
+
+// node_modules/redux/dist/redux.mjs
+var randomString = () => Math.random().toString(36).substring(7).split("").join(".");
+var ActionTypes = {
+  INIT: `@@redux/INIT${/* @__PURE__ */ randomString()}`,
+  REPLACE: `@@redux/REPLACE${/* @__PURE__ */ randomString()}`,
+  PROBE_UNKNOWN_ACTION: () => `@@redux/PROBE_UNKNOWN_ACTION${randomString()}`
+};
+function isPlainObject(obj) {
+  if (typeof obj !== "object" || obj === null)
+    return false;
+  let proto = obj;
+  while (Object.getPrototypeOf(proto) !== null) {
+    proto = Object.getPrototypeOf(proto);
+  }
+  return Object.getPrototypeOf(obj) === proto || Object.getPrototypeOf(obj) === null;
+}
+function compose(...funcs) {
+  if (funcs.length === 0) {
+    return (arg) => arg;
+  }
+  if (funcs.length === 1) {
     return funcs[0];
   }
   return funcs.reduce((a, b) => (...args) => a(b(...args)));
@@ -1634,12 +2370,16 @@ function formatProdErrorMessage(code) {
 // src/redux/themeSlice.ts
 var defaultInitialState = {
   appearance: "system",
-  color: "#6750a4"
+  blur: true,
+  color: "#6750a4",
+  harmony: "split-complementary"
 };
 var reducers = {
   initialize: (state, action) => ({ ...state, ...action.payload }),
   setAppearance: (state, action) => ({ ...state, appearance: action.payload }),
-  setColor: (state, action) => ({ ...state, color: action.payload })
+  setBlur: (state, action) => ({ ...state, blur: action.payload }),
+  setColor: (state, action) => ({ ...state, color: action.payload }),
+  setHarmony: (state, action) => ({ ...state, harmony: action.payload })
 };
 function createThemeReducer(initialState) {
   return createSlice({
@@ -1656,419 +2396,46 @@ var defaultSlice = createSlice({
 var themeActions = defaultSlice.actions;
 var themeReducer = defaultSlice.reducer;
 var selectThemeAppearance = (state) => state.appearance;
+var selectThemeBlur = (state) => state.blur;
 var selectThemeColor = (state) => state.color;
+var selectThemeHarmony = (state) => state.harmony;
 
-// src/ThemeProvider.tsx
-var import_react4 = require("react");
-var import_react_native2 = require("react-native");
-var import_react_native_paper7 = require("react-native-paper");
-
-// src/useComputedTheme.ts
-var import_react3 = require("react");
-var import_react_native = require("react-native");
-var import_react_native_paper6 = require("react-native-paper");
-
-// src/utils/colorNames.ts
-var colorNames = {
-  aliceblue: "#f0f8ff",
-  antiquewhite: "#faebd7",
-  aqua: "#00ffff",
-  aquamarine: "#7fffd4",
-  azure: "#f0ffff",
-  beige: "#f5f5dc",
-  bisque: "#ffe4c4",
-  black: "#000000",
-  blanchedalmond: "#ffebcd",
-  blue: "#0000ff",
-  blueviolet: "#8a2be2",
-  brown: "#a52a2a",
-  burlywood: "#deb887",
-  cadetblue: "#5f9ea0",
-  chartreuse: "#7fff00",
-  chocolate: "#d2691e",
-  coral: "#ff7f50",
-  cornflowerblue: "#6495ed",
-  cornsilk: "#fff8dc",
-  crimson: "#dc143c",
-  cyan: "#00ffff",
-  darkblue: "#00008b",
-  darkcyan: "#008b8b",
-  darkgoldenrod: "#b8860b",
-  darkgray: "#a9a9a9",
-  darkgrey: "#a9a9a9",
-  darkgreen: "#006400",
-  darkkhaki: "#bdb76b",
-  darkmagenta: "#8b008b",
-  darkolivegreen: "#556b2f",
-  darkorange: "#ff8c00",
-  darkorchid: "#9932cc",
-  darkred: "#8b0000",
-  darksalmon: "#e9967a",
-  darkseagreen: "#8fbc8f",
-  darkslateblue: "#483d8b",
-  darkslategray: "#2f4f4f",
-  darkslategrey: "#2f4f4f",
-  darkturquoise: "#00ced1",
-  darkviolet: "#9400d3",
-  deeppink: "#ff1493",
-  deepskyblue: "#00bfff",
-  dimgray: "#696969",
-  dimgrey: "#696969",
-  dodgerblue: "#1e90ff",
-  firebrick: "#b22222",
-  floralwhite: "#fffaf0",
-  forestgreen: "#228b22",
-  fuchsia: "#ff00ff",
-  gainsboro: "#dcdcdc",
-  ghostwhite: "#f8f8ff",
-  gold: "#ffd700",
-  goldenrod: "#daa520",
-  gray: "#808080",
-  grey: "#808080",
-  green: "#008000",
-  greenyellow: "#adff2f",
-  honeydew: "#f0fff0",
-  hotpink: "#ff69b4",
-  indianred: "#cd5c5c",
-  indigo: "#4b0082",
-  ivory: "#fffff0",
-  khaki: "#f0e68c",
-  lavender: "#e6e6fa",
-  lavenderblush: "#fff0f5",
-  lawngreen: "#7cfc00",
-  lemonchiffon: "#fffacd",
-  lightblue: "#add8e6",
-  lightcoral: "#f08080",
-  lightcyan: "#e0ffff",
-  lightgoldenrodyellow: "#fafad2",
-  lightgray: "#d3d3d3",
-  lightgrey: "#d3d3d3",
-  lightgreen: "#90ee90",
-  lightpink: "#ffb6c1",
-  lightsalmon: "#ffa07a",
-  lightseagreen: "#20b2aa",
-  lightskyblue: "#87cefa",
-  lightslategray: "#778899",
-  lightslategrey: "#778899",
-  lightsteelblue: "#b0c4de",
-  lightyellow: "#ffffe0",
-  lime: "#00ff00",
-  limegreen: "#32cd32",
-  linen: "#faf0e6",
-  magenta: "#ff00ff",
-  maroon: "#800000",
-  mediumaquamarine: "#66cdaa",
-  mediumblue: "#0000cd",
-  mediumorchid: "#ba55d3",
-  mediumpurple: "#9370db",
-  mediumseagreen: "#3cb371",
-  mediumslateblue: "#7b68ee",
-  mediumspringgreen: "#00fa9a",
-  mediumturquoise: "#48d1cc",
-  mediumvioletred: "#c71585",
-  midnightblue: "#191970",
-  mintcream: "#f5fffa",
-  mistyrose: "#ffe4e1",
-  moccasin: "#ffe4b5",
-  navajowhite: "#ffdead",
-  navy: "#000080",
-  oldlace: "#fdf5e6",
-  olive: "#808000",
-  olivedrab: "#6b8e23",
-  orange: "#ffa500",
-  orangered: "#ff4500",
-  orchid: "#da70d6",
-  palegoldenrod: "#eee8aa",
-  palegreen: "#98fb98",
-  paleturquoise: "#afeeee",
-  palevioletred: "#db7093",
-  papayawhip: "#ffefd5",
-  peachpuff: "#ffdab9",
-  peru: "#cd853f",
-  pink: "#ffc0cb",
-  plum: "#dda0dd",
-  powderblue: "#b0e0e6",
-  purple: "#800080",
-  rebeccapurple: "#663399",
-  red: "#ff0000",
-  rosybrown: "#bc8f8f",
-  royalblue: "#4169e1",
-  saddlebrown: "#8b4513",
-  salmon: "#fa8072",
-  sandybrown: "#f4a460",
-  seagreen: "#2e8b57",
-  seashell: "#fff5ee",
-  sienna: "#a0522d",
-  silver: "#c0c0c0",
-  skyblue: "#87ceeb",
-  slateblue: "#6a5acd",
-  slategray: "#708090",
-  slategrey: "#708090",
-  snow: "#fffafa",
-  springgreen: "#00ff7f",
-  steelblue: "#4682b4",
-  tan: "#d2b48c",
-  teal: "#008080",
-  thistle: "#d8bfd8",
-  tomato: "#ff6347",
-  transparent: "transparent",
-  turquoise: "#40e0d0",
-  violet: "#ee82ee",
-  wheat: "#f5deb3",
-  white: "#ffffff",
-  whitesmoke: "#f5f5f5",
-  yellow: "#ffff00",
-  yellowgreen: "#9acd32"
-};
-
-// src/utils/getRgb.ts
-var getRgb = (value) => {
-  if (!value) return null;
-  let trimmed = value.trim().toLowerCase();
-  const namedColor = colorNames[trimmed];
-  if (namedColor) trimmed = namedColor;
-  const hexMatch = trimmed.match(/^#?([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i);
-  if (hexMatch) {
-    const hex = hexMatch[1];
-    let normalized = hex;
-    if (hex.length === 3) {
-      normalized = hex.split("").map((c) => c + c).join("");
-    } else if (hex.length === 8) {
-      const alpha = parseInt(hex.substring(6, 8), 16);
-      normalized = hex.substring(0, 6);
-      const intVal2 = parseInt(normalized, 16);
-      return {
-        r: intVal2 >> 16 & 255,
-        g: intVal2 >> 8 & 255,
-        b: intVal2 & 255,
-        a: alpha / 255
-      };
-    }
-    const intVal = parseInt(normalized, 16);
-    return {
-      r: intVal >> 16 & 255,
-      g: intVal >> 8 & 255,
-      b: intVal & 255
-    };
-  }
-  const rgbMatch = trimmed.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([0-9.]+))?\s*\)$/i);
-  if (rgbMatch) {
-    const result = {
-      r: Number(rgbMatch[1]),
-      g: Number(rgbMatch[2]),
-      b: Number(rgbMatch[3])
-    };
-    if (rgbMatch[4] !== void 0) {
-      result.a = Number(rgbMatch[4]);
-    }
-    return result;
-  }
-  return null;
-};
-
-// src/utils/getHex.ts
-var getHex = (value) => {
-  const rgb = getRgb(value);
-  if (!rgb) return null;
-  const toHex = (n) => {
-    const hex = Math.round(n).toString(16);
-    return hex.length === 1 ? "0" + hex : hex;
-  };
-  const hexString = `#${toHex(rgb.r)}${toHex(rgb.g)}${toHex(rgb.b)}`;
-  if (rgb.a !== void 0) {
-    return `${hexString}${toHex(rgb.a * 255)}`;
-  }
-  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/getTriadicPalette.ts
-function getTriadicPalette(primaryColor) {
-  const rgb = getRgb(primaryColor);
-  if (!rgb) throw new Error(`Invalid color format: ${primaryColor}`);
-  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 l = (max + min) / 2;
-  let h = 0;
-  let s = 0;
-  if (max !== min) {
-    const d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch (max) {
-      case r:
-        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
-        break;
-      case g:
-        h = ((b - r) / d + 2) / 6;
-        break;
-      case b:
-        h = ((r - g) / d + 4) / 6;
-        break;
-    }
-  }
-  return {
-    primary: getHex(primaryColor) ?? primaryColor,
-    secondary: hslToHex((h + 1 / 3) % 1, s, l),
-    tertiary: hslToHex((h + 2 / 3) % 1, s, l)
-  };
-}
-function hslToHex(h, s, l) {
-  const c = (1 - Math.abs(2 * l - 1)) * s;
-  const x = c * (1 - Math.abs(h * 6 % 2 - 1));
-  const m = l - c / 2;
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  if (h < 1 / 6) {
-    r = c;
-    g = x;
-    b = 0;
-  } else if (h < 2 / 6) {
-    r = x;
-    g = c;
-    b = 0;
-  } else if (h < 3 / 6) {
-    r = 0;
-    g = c;
-    b = x;
-  } else if (h < 4 / 6) {
-    r = 0;
-    g = x;
-    b = c;
-  } else if (h < 5 / 6) {
-    r = x;
-    g = 0;
-    b = c;
-  } else {
-    r = c;
-    g = 0;
-    b = x;
-  }
-  const toHex = (value) => {
-    const hex = Math.round((value + m) * 255).toString(16);
-    return hex.length === 1 ? `0${hex}` : hex;
-  };
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
-}
-
-// 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/useComputedTheme.ts
-function useComputedTheme(appearance, color) {
-  const [theme, setTheme] = (0, import_react3.useState)(null);
-  const computeTheme = (0, import_react3.useCallback)(() => {
-    let resolved = appearance;
-    if (resolved === "system") resolved = import_react_native.Appearance.getColorScheme();
-    if (resolved === "no-preference" || !resolved) resolved = "light";
-    const base = resolved === "dark" ? import_react_native_paper6.MD3DarkTheme : import_react_native_paper6.MD3LightTheme;
-    const _theme = {
-      ...base,
-      colors: {
-        ...base.colors,
-        elevation: { ...base.colors.elevation }
-      }
-    };
-    const palette = getTriadicPalette(color);
-    const surface = base.colors.surface;
-    _theme.colors.primary = palette.primary;
-    _theme.colors.onPrimary = isDarkColor(palette.primary) ? "#ffffff" : "#000000";
-    _theme.colors.primaryContainer = getBlendedColor(palette.primary, surface, 0.15);
-    _theme.colors.onPrimaryContainer = isDarkColor(_theme.colors.primaryContainer) ? "#ffffff" : "#000000";
-    _theme.colors.secondary = palette.secondary;
-    _theme.colors.onSecondary = isDarkColor(palette.secondary) ? "#ffffff" : "#000000";
-    _theme.colors.secondaryContainer = getBlendedColor(palette.secondary, surface, 0.15);
-    _theme.colors.onSecondaryContainer = isDarkColor(_theme.colors.secondaryContainer) ? "#ffffff" : "#000000";
-    _theme.colors.tertiary = palette.tertiary;
-    _theme.colors.onTertiary = isDarkColor(palette.tertiary) ? "#ffffff" : "#000000";
-    _theme.colors.tertiaryContainer = getBlendedColor(palette.tertiary, surface, 0.15);
-    _theme.colors.onTertiaryContainer = isDarkColor(_theme.colors.tertiaryContainer) ? "#ffffff" : "#000000";
-    const blended = getBlendedColor(color, palette.secondary, 0.5);
-    const tintSurface = (alpha) => getBlendedColor(blended, surface, alpha);
-    _theme.colors.surface = surface;
-    _theme.colors.surfaceVariant = tintSurface(0.2);
-    _theme.colors.outline = getBlendedColor(color, base.colors.outline, 0.45);
-    const grey = base.dark ? "#424242" : "#c2c2c2";
-    const blendedGrey = getBlendedColor(blended, grey, 0.05);
-    _theme.colors.elevation = {
-      ..._theme.colors.elevation,
-      level1: _theme.colors.surface,
-      level2: getBlendedColor(blendedGrey, _theme.colors.surface, 0.25),
-      level3: getBlendedColor(blendedGrey, _theme.colors.surface, 0.4),
-      level4: getBlendedColor(blendedGrey, _theme.colors.surface, 0.55),
-      level5: getBlendedColor(blendedGrey, _theme.colors.surface, 0.7)
-    };
-    setTheme(_theme);
-  }, [appearance, color]);
-  (0, import_react3.useEffect)(() => {
-    computeTheme();
-  }, [computeTheme]);
-  (0, import_react3.useEffect)(() => {
-    const subscription = import_react_native.Appearance.addChangeListener(computeTheme);
-    return subscription.remove;
-  }, [computeTheme]);
-  return theme;
-}
-
-// src/ThemeProvider.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function Provider({ appearance, color, children, defaults, onReady, statusBarProps, style }) {
-  const theme = useComputedTheme(appearance, color);
-  const called = (0, import_react4.useRef)(false);
-  (0, import_react4.useEffect)(() => {
-    if (theme && !called.current) {
-      called.current = true;
-      onReady?.();
-    }
-  }, [theme, onReady]);
-  if (!theme) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native_paper7.Provider, { theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.StatusBar, { backgroundColor: theme.colors.background, barStyle: theme.dark ? "light-content" : "dark-content", ...statusBarProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PaperDefaultsContext.Provider, { value: defaults ?? {}, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native2.View, { style: [styles.flex, { backgroundColor: theme.colors.background }, style], children }) })
-  ] });
-}
-var styles = import_react_native2.StyleSheet.create({
-  flex: { flex: 1 }
-});
+// src/useThemeSettings.ts
+var import_react12 = require("react");
+var useThemeSettings = () => (0, import_react12.useContext)(ThemeSettingsContext);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Appbar,
+  AppearancePicker,
+  BlurView,
+  BottomNavigation,
   Button,
   Chip,
+  ColorPicker,
+  Dialog,
   FAB,
+  HarmonyPicker,
   IconButton,
+  Menu,
   Provider,
   TextInput,
+  ThemeSettingsContext,
   createThemeReducer,
+  defaultColors,
+  defaultThemeSettings,
   getBlendedColor,
   getHex,
   getRgb,
   getTriadicPalette,
   isDarkColor,
   selectThemeAppearance,
+  selectThemeBlur,
   selectThemeColor,
+  selectThemeHarmony,
   themeActions,
   themeReducer,
+  useBlur,
   useComputedTheme,
-  usePaperDefaults
+  usePaperDefaults,
+  useThemeSettings
 });