react-native-ensys-camera-x 1.0.7

package/lib/module/iconConfig.js

@@ -0,0 +1,796 @@
+"use strict";
+
+/**
+ * THE centralized icon configuration for the whole plugin.
+ *
+ * The plugin renders icons on two physically different surfaces:
+ *
+ *  - **`app`** — the React Native components (`RenderIcon`, the preview/viewer
+ *    screens, audio player chrome). These are React components drawn from RN
+ *    primitives; see `src/icons.tsx`.
+ *  - **`camera`** — the native Android camera Activity and its media editor.
+ *    That UI is Kotlin and *cannot* render React components, so its icons are
+ *    Android vector drawables or inline SVG rendered by the platform parser;
+ *    see `CameraIconName` in `src/types.ts`.
+ *
+ * Historically each surface had its own key space, with overlapping names
+ * (`close` meant two different things). This module puts ONE catalog of unique,
+ * camelCase {@link CameraIconId} keys in front of both of them: a host app
+ * customizes `close` once and the change lands on every surface that draws a
+ * close icon.
+ *
+ * Every entry is optional and every icon keeps its shipped default — omitting an
+ * id (or omitting the config entirely) leaves the plugin pixel-identical to its
+ * stock appearance.
+ *
+ * ```tsx
+ * import { setCameraIcons } from 'react-native-ensys-camera-x';
+ *
+ * setCameraIcons({
+ *   close: MyCloseIcon,                    // a React component
+ *   flashOn: require('./flash-on.png'),    // an image
+ *   done: { svg: '<svg viewBox="0 0 24 24">...</svg>' },
+ *   send: { tintColor: '#25D366' },        // recolor the built-in icon
+ *   crop: { resourceName: 'my_crop' },     // an Android drawable in your app
+ * });
+ * ```
+ *
+ * This module is intentionally side-effect free: it owns the catalog and the
+ * pure resolvers. The live store, the native bridge push and the public
+ * `setCameraIcons()` entry point live in `src/config.ts`, which is the single
+ * place that talks to both layers.
+ */
+import { Image } from 'react-native';
+import { createDefaultIconRegistry, DefaultFallbackIcon, DEFAULT_ICON_SIZE } from "./icons.js";
+import { NativeSvgIcon } from "./NativeSvgIcon.js";
+
+// ============================================================================
+// Icon ids
+// ============================================================================
+
+/**
+ * Which surface an icon is drawn on. Determines which customization fields
+ * actually take effect for that icon — see {@link CameraIconCustomization}.
+ */
+
+/**
+ * Every customizable icon in the plugin, as one flat set of unique keys.
+ *
+ * Ids are camelCase and deliberately distinct from the two internal key spaces
+ * they drive (`CameraIconKey` for the RN registry, `CameraIconName` for the
+ * native drawables) so there is never any doubt about which one a config object
+ * is addressing.
+ */
+
+/** One row of {@link CAMERA_ICON_CATALOG}. */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The single source of truth: every icon id, the surfaces it drives, and the
+ * internal keys it maps onto.
+ *
+ * Typed as a total `Record` on purpose — adding a member to
+ * {@link CameraIconId} without adding its row here is a compile error, so the
+ * catalog can never drift out of sync with the union.
+ */
+export const CAMERA_ICON_CATALOG = {
+  // ── Common controls ────────────────────────────────────────────────────
+  close: {
+    surface: 'both',
+    appKey: 'close',
+    nativeName: 'close',
+    description: 'Close / dismiss a screen, sheet or overlay.'
+  },
+  back: {
+    surface: 'both',
+    appKey: 'back',
+    nativeName: 'back',
+    description: 'Back arrow in headers.'
+  },
+  done: {
+    surface: 'both',
+    appKey: 'done',
+    nativeName: 'done',
+    description: 'Confirm / apply the current step (checkmark).'
+  },
+  cancel: {
+    surface: 'app',
+    appKey: 'cancel',
+    description: 'Cancel an action without applying it.'
+  },
+  check: {
+    surface: 'app',
+    appKey: 'check',
+    description: 'Generic checkmark used by list and option rows.'
+  },
+  selectionCheck: {
+    surface: 'camera',
+    nativeName: 'selectionCheck',
+    description: 'Checkmark badge on a selected gallery thumbnail.'
+  },
+  // ── Camera screen ──────────────────────────────────────────────────────
+  camera: {
+    surface: 'app',
+    appKey: 'camera',
+    description: 'Generic camera icon (buttons that open the camera).'
+  },
+  photo: {
+    surface: 'app',
+    appKey: 'photo',
+    description: 'Still photo / image media.'
+  },
+  video: {
+    surface: 'app',
+    appKey: 'video',
+    description: 'Video clip media.'
+  },
+  photoMode: {
+    surface: 'both',
+    appKey: 'photo_mode',
+    nativeName: 'photo_mode',
+    description: 'The "Photo" mode tab on the camera screen.'
+  },
+  videoMode: {
+    surface: 'both',
+    appKey: 'video_mode',
+    nativeName: 'video_mode',
+    description: 'The "Video" mode tab on the camera screen.'
+  },
+  flipCamera: {
+    surface: 'both',
+    appKey: 'flip',
+    nativeName: 'flip',
+    description: 'Switch between the front and back camera.'
+  },
+  flashOn: {
+    surface: 'both',
+    appKey: 'flash_on',
+    nativeName: 'flash_on',
+    description: 'Flash forced on.'
+  },
+  flashOff: {
+    surface: 'both',
+    appKey: 'flash_off',
+    nativeName: 'flash_off',
+    description: 'Flash off.'
+  },
+  flashAuto: {
+    surface: 'both',
+    appKey: 'flash_auto',
+    nativeName: 'flash_auto',
+    description: 'Flash in automatic mode.'
+  },
+  gallery: {
+    surface: 'both',
+    appKey: 'gallery',
+    nativeName: 'gallery',
+    description: 'Gallery / recent media — the bottom-left thumbnail placeholder.'
+  },
+  record: {
+    surface: 'app',
+    appKey: 'record',
+    description: 'Start recording (record dot).'
+  },
+  mic: {
+    surface: 'app',
+    appKey: 'mic',
+    description: 'Microphone — audio recording entry points.'
+  },
+  lock: {
+    surface: 'both',
+    appKey: 'lock',
+    nativeName: 'lock',
+    description: 'Locked state — hands-free recording is engaged.'
+  },
+  lockOpen: {
+    surface: 'both',
+    appKey: 'lock_open',
+    nativeName: 'lock_open',
+    description: 'The slide-to-lock rail shown while holding to record.'
+  },
+  // ── Editor tools ───────────────────────────────────────────────────────
+  crop: {
+    surface: 'both',
+    appKey: 'crop',
+    nativeName: 'crop',
+    description: 'Crop tool in the editor.'
+  },
+  rotate: {
+    surface: 'both',
+    appKey: 'rotate',
+    nativeName: 'rotate',
+    description: 'Rotate the image 90°.'
+  },
+  aspectRatio: {
+    surface: 'camera',
+    nativeName: 'aspect_ratio',
+    description: 'Aspect-ratio picker inside the crop tool.'
+  },
+  filter: {
+    surface: 'both',
+    appKey: 'filter',
+    nativeName: 'filter',
+    description: 'Colour filter strip.'
+  },
+  sticker: {
+    surface: 'both',
+    appKey: 'sticker',
+    nativeName: 'sticker',
+    description: 'Add-sticker tool.'
+  },
+  emoji: {
+    surface: 'both',
+    appKey: 'emoji',
+    nativeName: 'emoji',
+    description: 'Add-emoji tool.'
+  },
+  gif: {
+    surface: 'camera',
+    nativeName: 'gif',
+    description: 'Add-GIF tool.'
+  },
+  text: {
+    surface: 'both',
+    appKey: 'text',
+    nativeName: 'text',
+    description: 'Add-text tool.'
+  },
+  textBackground: {
+    surface: 'camera',
+    nativeName: 'text_bg',
+    description: 'Cycle the text background style while typing.'
+  },
+  textAlignLeft: {
+    surface: 'camera',
+    nativeName: 'text_align_left',
+    description: 'Text aligned left (text tool).'
+  },
+  textAlignCenter: {
+    surface: 'camera',
+    nativeName: 'text_align_center',
+    description: 'Text aligned centre (text tool).'
+  },
+  textAlignRight: {
+    surface: 'camera',
+    nativeName: 'text_align_right',
+    description: 'Text aligned right (text tool).'
+  },
+  draw: {
+    surface: 'app',
+    appKey: 'draw',
+    description: 'Freehand drawing tool.'
+  },
+  marker: {
+    surface: 'camera',
+    nativeName: 'marker',
+    description: 'Marker / pen tool in the native editor.'
+  },
+  brushThin: {
+    surface: 'camera',
+    nativeName: 'brush_thin',
+    description: 'Thin brush width.'
+  },
+  brushMedium: {
+    surface: 'camera',
+    nativeName: 'brush_medium',
+    description: 'Medium brush width.'
+  },
+  brushThick: {
+    surface: 'camera',
+    nativeName: 'brush_thick',
+    description: 'Thick brush width.'
+  },
+  clearDrawing: {
+    surface: 'camera',
+    nativeName: 'clear_drawing',
+    description: 'Erase every drawing stroke.'
+  },
+  undo: {
+    surface: 'both',
+    appKey: 'undo',
+    nativeName: 'undo',
+    description: 'Undo the last edit.'
+  },
+  redo: {
+    surface: 'both',
+    appKey: 'redo',
+    nativeName: 'redo',
+    description: 'Redo the last undone edit.'
+  },
+  overlayClose: {
+    surface: 'camera',
+    nativeName: 'overlay_close',
+    description: 'The X on a selected sticker / emoji / GIF / text overlay that deletes it.'
+  },
+  overlayResize: {
+    surface: 'camera',
+    nativeName: 'overlay_resize',
+    description: 'The corner handle that resizes a selected overlay.'
+  },
+  // ── Media actions & playback ───────────────────────────────────────────
+  play: {
+    surface: 'both',
+    appKey: 'play',
+    nativeName: 'play',
+    description: 'Play video or audio.'
+  },
+  pause: {
+    surface: 'both',
+    appKey: 'pause',
+    nativeName: 'pause',
+    description: 'Pause playback or recording.'
+  },
+  stop: {
+    surface: 'app',
+    appKey: 'stop',
+    description: 'Stop playback or recording.'
+  },
+  volumeOn: {
+    surface: 'both',
+    appKey: 'volume_on',
+    nativeName: 'volume_on',
+    description: 'Sound on — video audio is kept.'
+  },
+  volumeOff: {
+    surface: 'both',
+    appKey: 'volume_off',
+    nativeName: 'volume_off',
+    description: 'Sound off — video is muted.'
+  },
+  mute: {
+    surface: 'app',
+    appKey: 'mute',
+    description: 'Muted indicator on a media tile.'
+  },
+  trim: {
+    surface: 'both',
+    appKey: 'trim',
+    nativeName: 'trim',
+    description: 'Trim a video clip.'
+  },
+  cover: {
+    surface: 'both',
+    appKey: 'cover',
+    nativeName: 'cover',
+    description: "Pick a video's cover frame."
+  },
+  compress: {
+    surface: 'app',
+    appKey: 'compress',
+    description: 'Compress an image or video.'
+  },
+  export: {
+    surface: 'app',
+    appKey: 'export',
+    description: 'Export in another file format.'
+  },
+  send: {
+    surface: 'both',
+    appKey: 'send',
+    nativeName: 'send',
+    description: 'Send / confirm the selected media.'
+  },
+  download: {
+    surface: 'both',
+    appKey: 'download',
+    nativeName: 'download',
+    description: 'Save media to the device.'
+  },
+  share: {
+    surface: 'both',
+    appKey: 'share',
+    nativeName: 'share',
+    description: 'Share media with another app.'
+  },
+  delete: {
+    surface: 'both',
+    appKey: 'delete',
+    nativeName: 'delete',
+    description: 'Delete / remove media.'
+  },
+  trash: {
+    surface: 'app',
+    appKey: 'trash',
+    description: 'Dustbin shown when dragging an overlay away, and in bulk-delete bars.'
+  },
+  more: {
+    surface: 'app',
+    appKey: 'more',
+    description: 'Generic overflow / "more" affordance in the app UI.'
+  },
+  moreOptions: {
+    surface: 'camera',
+    nativeName: 'more_vert',
+    description: 'The ⋮ overflow button in the native preview header (Compress / Export By).'
+  },
+  upload: {
+    surface: 'app',
+    appKey: 'upload',
+    description: 'Upload media to a server.'
+  },
+  uploadStatus: {
+    surface: 'camera',
+    nativeName: 'stat_upload',
+    description: 'Small status-bar icon of the upload notification. Must be a plain monochrome vector.'
+  },
+  // ── Documents & audio ──────────────────────────────────────────────────
+  document: {
+    surface: 'both',
+    appKey: 'document',
+    nativeName: 'document',
+    description: 'Document file (PDF, DOCX, …).'
+  },
+  audio: {
+    surface: 'both',
+    appKey: 'audio',
+    nativeName: 'audio',
+    description: 'Audio file.'
+  },
+  browseAudio: {
+    surface: 'app',
+    appKey: 'browse_audio',
+    description: 'Browse the device for an audio file.'
+  },
+  imageVideo: {
+    surface: 'app',
+    appKey: 'image_video',
+    description: 'Combined image-or-video picker entry point.'
+  },
+  // ── Indicators ─────────────────────────────────────────────────────────
+  chevronUp: {
+    surface: 'both',
+    appKey: 'chevron_up',
+    nativeName: 'chevron_up',
+    description: 'Upward chevron — swipe-up hints and expanding panels.'
+  },
+  chevronDown: {
+    surface: 'camera',
+    nativeName: 'chevron_down',
+    description: 'Downward chevron — collapsing the editor colour palette.'
+  },
+  chevronRight: {
+    surface: 'app',
+    appKey: 'chevron_right',
+    description: 'Forward chevron on navigable rows.'
+  },
+  warning: {
+    surface: 'app',
+    appKey: 'warning',
+    description: 'Warning / error state.'
+  },
+  plus: {
+    surface: 'app',
+    appKey: 'plus',
+    description: 'Add / expand (the floating action button).'
+  },
+  minus: {
+    surface: 'app',
+    appKey: 'minus',
+    description: 'Remove / collapse.'
+  },
+  plusClose: {
+    surface: 'app',
+    appKey: 'plus_close',
+    description: 'The FAB animated plus-to-close (+ ↔ ×) morphing icon.'
+  },
+  circularSeek: {
+    surface: 'app',
+    appKey: 'circular_seek',
+    description: 'The video player ±10s circular seek skip rings.'
+  },
+  viewDetails: {
+    surface: 'app',
+    appKey: 'view_details',
+    description: 'The View Details / metadata info (i) icon on the media viewer.'
+  },
+  info: {
+    surface: 'app',
+    appKey: 'view_details',
+    description: 'Information icon (alias for viewDetails).'
+  }
+};
+
+/** Every icon id, in catalog order. Handy for docs and tests. */
+export const CAMERA_ICON_IDS = Object.keys(CAMERA_ICON_CATALOG);
+
+/** Narrowing guard for an unknown string. */
+export function isCameraIconId(value) {
+  return Object.prototype.hasOwnProperty.call(CAMERA_ICON_CATALOG, value);
+}
+
+// ============================================================================
+// Customization shapes
+// ============================================================================
+
+/**
+ * How one icon should be customized.
+ *
+ * Which fields take effect depends on the icon's `surface`
+ * ({@link CAMERA_ICON_CATALOG}):
+ *
+ * | Field          | `app` surface | `camera` surface |
+ * | -------------- | ------------- | ---------------- |
+ * | `component`    | ✅            | —                |
+ * | `source`       | ✅            | —                |
+ * | `svg`          | ✅            | ✅               |
+ * | `resourceName` | —             | ✅               |
+ * | `tintColor`    | ✅            | ✅               |
+ * | `size`         | ✅            | —                |
+ *
+ * A `both`-surface icon accepts all of them and applies each where it works,
+ * so `{ component: MyClose, resourceName: 'my_close' }` replaces the artwork on
+ * every surface at once. Anything left unset keeps the icon's shipped default.
+ */
+
+/**
+ * A customization, or one of two shorthands: a bare React component, or a bare
+ * image source. `close: MyIcon` is exactly `close: { component: MyIcon }`.
+ */
+
+/**
+ * The centralized icon configuration: a flat map of icon id → replacement.
+ * Every key is optional; an absent key keeps the plugin's default icon.
+ */
+
+// ============================================================================
+// Normalization
+// ============================================================================
+
+const CUSTOMIZATION_FIELDS = ['component', 'source', 'svg', 'resourceName', 'tintColor', 'size'];
+
+/**
+ * Collapse any of the accepted shorthands into a full
+ * {@link CameraIconCustomization}.
+ *
+ * The three input shapes are distinguished structurally, because an image
+ * source is `number | object | array` and a React component is
+ * `function | object`:
+ *
+ *  - a function, or an object carrying React's `$$typeof` brand
+ *    (`memo`/`forwardRef` results) → a component;
+ *  - a number (what `require('./x.png')` compiles to) or an array of sources,
+ *    or an object with a `uri` → an image source;
+ *  - an object mentioning any customization field → already a customization;
+ *  - anything else → treated as an image source, which is what the remaining
+ *    `ImageSourcePropType` variants are.
+ */
+export function normalizeCameraIconValue(value) {
+  if (typeof value === 'function') {
+    return {
+      component: value
+    };
+  }
+  if (typeof value === 'number' || Array.isArray(value)) {
+    return {
+      source: value
+    };
+  }
+  if (value && typeof value === 'object') {
+    const record = value;
+    if ('$$typeof' in record) {
+      return {
+        component: value
+      };
+    }
+    if ('uri' in record) {
+      return {
+        source: value
+      };
+    }
+    if (CUSTOMIZATION_FIELDS.some(field => field in record)) {
+      return value;
+    }
+  }
+  return {
+    source: value
+  };
+}
+
+/**
+ * Wrap an image source in an {@link IconComponent}.
+ *
+ * The incoming `color` prop is deliberately ignored: a host-supplied PNG is
+ * usually already coloured, and blanket-tinting it with the current theme
+ * colour would flatten it. Pass `tintColor` explicitly to opt into recolouring.
+ */
+export function createImageIconComponent(source, tintColor) {
+  const ImageIcon = ({
+    size,
+    style
+  }) => {
+    const edge = size ?? DEFAULT_ICON_SIZE;
+    return /*#__PURE__*/_jsx(Image, {
+      source: source,
+      resizeMode: "contain",
+      style: [{
+        width: edge,
+        height: edge
+      }, tintColor ? {
+        tintColor
+      } : null, style]
+    });
+  };
+  ImageIcon.displayName = 'CameraImageIcon';
+  return ImageIcon;
+}
+
+/**
+ * Basic structural validity check for inline SVG markup: a non-empty string
+ * within the native parser's size cap, with an `<svg>` root and at least one
+ * drawable element the parser understands (`path` / `rect` / `circle` /
+ * `ellipse` / `line` / `polyline` / `polygon`). Markup that fails this is
+ * treated as "no SVG" so the icon keeps its built-in default — the same safe
+ * fallback the renderers apply when parsing fails at draw time.
+ */
+export function isRenderableSvg(svg) {
+  if (typeof svg !== 'string') return false;
+  const markup = svg.trim();
+  if (markup.length === 0 || markup.length > 256 * 1024) return false;
+  if (!/<svg[\s>]/i.test(markup)) return false;
+  return /<(path|rect|circle|ellipse|line|polyline|polygon)[\s/>]/i.test(markup);
+}
+
+/**
+ * Wrap inline SVG markup in an {@link IconComponent} for the React Native
+ * component surface. The markup is drawn by the library's OWN bundled native
+ * renderer (`CameraSvgIcon`, backed by `SvgDrawable`) — no `react-native-svg`
+ * and no third-party SVG library.
+ *
+ * Anything that cannot be drawn falls back to [fallback] (the icon's built-in
+ * default component): invalid/empty markup, a platform with no native half
+ * (iOS / web), or an older linked binary without the renderer. So a
+ * customization never leaves an empty box.
+ *
+ * `currentColor` in the markup follows the icon's tint — an explicit
+ * [tintColor] wins, otherwise the render-time `color` is used — while explicit
+ * colours inside the SVG are always preserved.
+ */
+export function createSvgIconComponent(svg, tintColor, fallback) {
+  const Fallback = fallback ?? DefaultFallbackIcon;
+  if (!isRenderableSvg(svg)) {
+    return Fallback;
+  }
+  const SvgIcon = props => {
+    const edge = props.size ?? DEFAULT_ICON_SIZE;
+    const tint = tintColor ?? props.color;
+    return /*#__PURE__*/_jsx(NativeSvgIcon, {
+      svg: svg,
+      tintColor: tint,
+      style: [{
+        width: edge,
+        height: edge
+      }, props.style],
+      fallback: /*#__PURE__*/_jsx(Fallback, {
+        ...props
+      })
+    });
+  };
+  SvgIcon.displayName = 'CameraSvgIcon';
+  return SvgIcon;
+}
+
+// ============================================================================
+// Projection onto the two internal layers
+// ============================================================================
+
+/**
+ * Project the centralized config onto the RN component registry
+ * (`src/icons.tsx`).
+ *
+ * Only ids with an `appKey` contribute. Artwork replacements become registry
+ * `overrides` — which take precedence over any registry a host also passes to
+ * `CameraIconProvider` — while bare `tintColor` / `size` become per-icon
+ * overrides that recolour or resize the *built-in* component. Ids the caller
+ * left out never appear, so their defaults resolve untouched.
+ */
+export function resolveCameraIconRegistryConfig(config) {
+  const overrides = {};
+  // One shared default registry: both the returned base registry and each SVG
+  // icon's fallback are drawn from it, so an invalid SVG resolves to the exact
+  // built-in component that key ships with.
+  const defaultRegistry = createDefaultIconRegistry();
+  Object.keys(config).forEach(id => {
+    const entry = CAMERA_ICON_CATALOG[id];
+    const raw = config[id];
+    if (!entry?.appKey || raw === undefined || raw === null) {
+      return;
+    }
+    const custom = normalizeCameraIconValue(raw);
+    const override = {};
+    if (custom.component) {
+      override.component = custom.component;
+    } else if (custom.svg !== undefined && isRenderableSvg(custom.svg)) {
+      // Invalid/empty SVG is intentionally skipped here so the built-in default
+      // (still in the registry) resolves untouched — the "fall back to the
+      // default icon" guarantee.
+      override.component = createSvgIconComponent(custom.svg, custom.tintColor, defaultRegistry.get(entry.appKey));
+    } else if (custom.source !== undefined) {
+      override.component = createImageIconComponent(custom.source, custom.tintColor);
+    }
+    if (custom.tintColor !== undefined) {
+      override.tintColor = custom.tintColor;
+    }
+    if (custom.size !== undefined) {
+      override.size = custom.size;
+    }
+    if (Object.keys(override).length > 0) {
+      overrides[entry.appKey] = override;
+    }
+  });
+  return {
+    registry: defaultRegistry,
+    overrides
+  };
+}
+
+/**
+ * Project the centralized config onto the native drawable layer
+ * (`CameraIconConfig` in `src/types.ts`), which is serialized to the Android
+ * Activity by `setCameraConfig`.
+ *
+ * Only ids with a `nativeName` contribute, and only the fields the native side
+ * understands (`resourceName`, `tintColor`, `size`) are carried across — a
+ * React component cannot cross into Kotlin UI. The wire format is unchanged, so
+ * no native code has to know this module exists.
+ */
+export function resolveNativeIconConfig(config) {
+  const overrides = {};
+  Object.keys(config).forEach(id => {
+    const entry = CAMERA_ICON_CATALOG[id];
+    const raw = config[id];
+    if (!entry?.nativeName || raw === undefined || raw === null) {
+      return;
+    }
+    const custom = normalizeCameraIconValue(raw);
+    const style = {};
+    if (custom.svg !== undefined) {
+      style.svg = custom.svg;
+    }
+    if (custom.resourceName !== undefined) {
+      style.resourceName = custom.resourceName;
+    }
+    if (custom.tintColor !== undefined) {
+      style.tintColor = custom.tintColor;
+    }
+    if (custom.size !== undefined) {
+      style.size = custom.size;
+    }
+    if (Object.keys(style).length > 0) {
+      overrides[entry.nativeName] = style;
+    }
+  });
+  return {
+    overrides
+  };
+}
+
+/** Merge two centralized icon configs; `override` wins per icon id. */
+export function mergeCameraIconsConfig(base, override) {
+  if (!override) {
+    return base;
+  }
+  const merged = {
+    ...base
+  };
+  Object.keys(override).forEach(id => {
+    const next = override[id];
+    if (next === undefined) {
+      return;
+    }
+    const previous = merged[id];
+    // Two plain customization objects compose field-by-field, so
+    // `{ tintColor }` set now does not erase a `{ component }` set earlier.
+    // Any other shape (component / image source) replaces outright.
+    if (previous !== undefined) {
+      const a = normalizeCameraIconValue(previous);
+      const b = normalizeCameraIconValue(next);
+      merged[id] = {
+        ...a,
+        ...b
+      };
+      return;
+    }
+    merged[id] = next;
+  });
+  return merged;
+}
+//# sourceMappingURL=iconConfig.js.map