@defra/interactive-map 0.0.16-alpha → 0.0.18-alpha

package/src/App/layout/layout.module.scss

@@ -158,10 +158,6 @@
   & > *:empty {
     display: none;
   }
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: bottom 0.15s ease;
-  }
 }
 
 .im-o-app__left-top {
@@ -212,10 +208,6 @@
   top: var(--right-offset-top);
   bottom: var(--right-offset-bottom);
   gap: var(--divider-gap);
-
-  @media (prefers-reduced-motion: no-preference) {
-    transition: bottom 0.15s ease;
-  }
 }
 
 .im-o-app__right-top {
@@ -238,55 +230,74 @@
 }
 
 // ---------------------------------------------------
-// Footer: Logo, scalebar, copyright etc
+// Bottom: Logo, scalebar, copyright etc
 // ---------------------------------------------------
 
-.im-o-app__footer {
+.im-o-app__bottom {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   z-index: -2; // Support masking the viewport
 }
 
-.im-o-app__footer-col {
+.im-o-app__bottom-col {
   display: flex;
-  flex-direction: column;
   min-width: auto;
 }
 
-.im-o-app__footer-col:first-child {
-  justify-content: flex-start;
+.im-o-app__bottom-col:first-child {
+  flex-direction: row;
+  align-items: flex-end;
   flex-shrink: 0;
+  gap: var(--divider-gap);
 }
 
-.im-o-app__footer-col:last-child {
+.im-o-app__bottom-col:last-child {
+  position: relative; // anchor for absolutely-positioned attributions
   flex: 1 1 auto;
-  justify-content: flex-end;
-  text-align: right;
+  flex-direction: column;
+  align-items: flex-end;
   min-width: 0;
 }
 
+// Horizontal button rows within the bottom area
+.im-o-app__bottom-left,
+.im-o-app__bottom-right {
+  display: flex;
+  flex-direction: row;
+  gap: var(--divider-gap);
+}
+
+.im-o-app__bottom-right {
+  justify-content: flex-end;
+}
+
 // ---------------------------------------------------
 // Attributions:
 // ---------------------------------------------------
 
 .im-o-app__attributions:not(:empty) {
+  position: absolute;
+  bottom: calc(var(--primary-gap) * -1);
+  right: calc(var(--primary-gap) * -1);
   display: flex;
   justify-content: flex-end;
-  position: relative;
-  padding-top: var(--divider-gap);
-  margin-bottom: calc(var(--primary-gap) * -1);
-  margin-right: calc(var(--primary-gap) * -1);
 }
 
 // ---------------------------------------------------
-// Bottom:
+// Drawer:
 // ---------------------------------------------------
 
-.im-o-app__bottom {
+.im-o-app__drawer {
   z-index: 1;
 }
 
+.im-o-app__drawer .im-c-panel {
+  @include tools.border-focus-corner-override(
+    $corners: 'top'
+  );
+}
+
 // ---------------------------------------------------
 // Actions:
 // ---------------------------------------------------
@@ -387,10 +398,14 @@
     max-height: calc(100% - (var(--primary-gap) * 2));
   }
 
-  .im-c-panel--bottom {
+  .im-c-panel--drawer {
     top: auto;
     bottom: 0;
     max-height: 85%;
+
+    @include tools.border-focus-corner-override(
+      $corners: 'top'
+    );
   }
 
   [class*="im-c-panel--"][class*="-button"] { // Adjacent to button
@@ -452,15 +467,27 @@
     width: 100%;
     left: 0;
     bottom: calc(var(--primary-gap) * 2);
-    
+
     .im-c-panel {
       max-width: var(--action-bar-max-width);
     }
+
+    // max-height animation on a bottom-anchored element grows upward, looking like
+    // a slide-up. Override to opacity-only so the bar fades in instead.
+    @media (prefers-reduced-motion: no-preference) {
+      .im-c-actions {
+        transition: opacity var(--duration) ease;
+      }
+    }
+
+    .im-c-actions--hidden {
+      opacity: 0;
+    }
   }
 }
 
-// Bottom panels corners removed on mobile
-.im-o-app--mobile .im-o-app__bottom,
+// Drawer panels corners removed on mobile
+.im-o-app--mobile .im-o-app__drawer,
 .im-o-app--mobile .im-o-app__actions {
   margin: var(--primary-gap) calc(var(--primary-gap) * -1) calc(var(--primary-gap) * -1) calc(var(--primary-gap) * -1);
 
@@ -473,10 +500,21 @@
   }
 }
 
-.im-o-app--mobile .im-o-app__bottom .im-c-panel {
+.im-o-app--mobile .im-o-app__drawer .im-c-panel {
     clip-path: inset(-20px 0 0 0);
 }
 
+// Inset focus ring on panels that are flush with the container edge,
+// so the ::after ring isn't clipped by the parent overflow:hidden
+.im-o-app--mobile .im-o-app__drawer .im-c-panel::after,
+.im-o-app--mobile .im-o-app__actions .im-c-panel::after,
+.im-o-app__modal .im-c-panel--drawer::after {
+  top: var(--focus-border-width);
+  right: var(--focus-border-width);
+  bottom: var(--focus-border-width);
+  left: var(--focus-border-width);
+}
+
 // 4. State styles
 
 // 5. Responsive tweaks
@@ -488,4 +526,4 @@
   width: 100%;
   max-width: 80%;
   pointer-events: none;
-}
+}

package/src/App/registry/pluginRegistry.js

@@ -2,7 +2,7 @@
 import { registerIcon } from './iconRegistry.js'
 import { registerKeyboardShortcut } from './keyboardShortcutRegistry.js'
 import { allowedSlots } from '../renderer/slots.js'
-import { logger } from '../../utils/logger.js'
+import { logger } from '../../services/logger.js'
 
 const asArray = (value) => Array.isArray(value) ? value : [value]
 

package/src/App/renderer/HtmlElementHost.jsx

@@ -19,7 +19,8 @@ export const getSlotRef = (slot, layoutRefs) => {
     middle: layoutRefs.middleRef,
     'right-top': layoutRefs.rightTopRef,
     'right-bottom': layoutRefs.rightBottomRef,
-    bottom: layoutRefs.bottomRef,
+    'bottom-right': layoutRefs.bottomRightRef,
+    drawer: layoutRefs.drawerRef,
     actions: layoutRefs.actionsRef,
     modal: layoutRefs.modalRef
   }

package/src/App/renderer/HtmlElementHost.test.jsx

@@ -14,8 +14,8 @@ jest.mock('../components/Panel/Panel.jsx', () => ({
 }))
 jest.mock('./slots.js', () => ({
   allowedSlots: {
-    panel: ['left-top', 'side', 'modal', 'bottom'],
-    control: ['left-top', 'banner', 'bottom', 'actions']
+    panel: ['left-top', 'side', 'modal', 'drawer'],
+    control: ['left-top', 'banner', 'drawer', 'actions']
   }
 }))
 
@@ -28,7 +28,7 @@ const SlotHarness = ({ layoutRefs, children }) => (
     <div ref={layoutRefs.leftTopRef} data-slot='left-top' />
     <div ref={layoutRefs.sideRef} data-slot='side' />
     <div ref={layoutRefs.modalRef} data-slot='modal' />
-    <div ref={layoutRefs.bottomRef} data-slot='bottom' />
+    <div ref={layoutRefs.drawerRef} data-slot='drawer' />
     <div ref={layoutRefs.bannerRef} data-slot='banner' />
     <div ref={layoutRefs.actionsRef} data-slot='actions' />
     {children}
@@ -47,7 +47,7 @@ describe('HtmlElementHost', () => {
       topRightColRef: { current: null },
       leftTopRef: { current: null },
       middleRef: { current: null },
-      bottomRef: { current: null },
+      drawerRef: { current: null },
       actionsRef: { current: null },
       modalRef: { current: null },
       viewportRef: { current: null },
@@ -146,13 +146,13 @@ describe('HtmlElementHost', () => {
     expect(getByTestId('panel-p1').dataset.open).toBe('true')
   })
 
-  it('resolves bottom slot to left-top on desktop', () => {
+  it('resolves drawer slot to left-top on desktop', () => {
     const { container } = renderWithSlots({
-      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'bottom' } } },
+      panelConfig: { p1: { html: '<p>Hi</p>', label: 'Test', desktop: { slot: 'drawer' } } },
       openPanels: { p1: { props: {} } }
     })
     expect(container.querySelector('[data-slot="left-top"] [data-testid="panel-p1"]')).toBeTruthy()
-    expect(container.querySelector('[data-slot="bottom"] [data-testid="panel-p1"]')).toBeNull()
+    expect(container.querySelector('[data-slot="drawer"] [data-testid="panel-p1"]')).toBeNull()
   })
 
   it('only shows topmost modal panel', () => {

package/src/App/renderer/mapButtons.js

@@ -1,7 +1,7 @@
 // src/core/renderers/mapButtons.js
 import { MapButton } from '../components/MapButton/MapButton.jsx'
 import { allowedSlots } from './slots.js'
-import { logger } from '../../utils/logger.js'
+import { logger } from '../../services/logger.js'
 
 function getMatchingButtons ({ appState, buttonConfig, slot, evaluateProp }) {
   const { breakpoint, mode } = appState

package/src/App/renderer/mapPanels.test.js

@@ -145,10 +145,10 @@ describe('mapPanels', () => {
     expect(map()).toHaveLength(1)
   })
 
-  it('replaces bottom slot with left-top on non-mobile breakpoints', () => {
+  it('replaces drawer slot with left-top on non-mobile breakpoints', () => {
     defaultAppState.panelConfig = ({
       p1: {
-        desktop: { slot: 'bottom' },
+        desktop: { slot: 'drawer' },
         includeModes: ['view']
       }
     })

package/src/App/renderer/slotHelpers.js

@@ -3,14 +3,14 @@ import { allowedSlots } from './slots.js'
 
 /**
  * Resolves the target slot for a panel based on its breakpoint config.
- * Modal panels always render in the 'modal' slot, and the bottom slot
+ * Modal panels always render in the 'modal' slot, and the drawer slot
  * is only available on mobile — tablet and desktop fall back to 'left-top'.
  */
 export const resolveTargetSlot = (bpConfig, breakpoint) => {
   if (bpConfig.modal) {
     return 'modal'
   }
-  if (bpConfig.slot === 'bottom' && ['tablet', 'desktop'].includes(breakpoint)) {
+  if (bpConfig.slot === 'drawer' && ['tablet', 'desktop'].includes(breakpoint)) {
     return 'left-top'
   }
   return bpConfig.slot

package/src/App/renderer/slotHelpers.test.js

@@ -7,13 +7,13 @@ describe('resolveTargetSlot', () => {
     expect(resolveTargetSlot({ modal: true, slot: 'side' }, 'desktop')).toBe('modal')
   })
 
-  it('replaces bottom with left-top on tablet and desktop', () => {
-    expect(resolveTargetSlot({ slot: 'bottom' }, 'tablet')).toBe('left-top')
-    expect(resolveTargetSlot({ slot: 'bottom' }, 'desktop')).toBe('left-top')
+  it('replaces drawer with left-top on tablet and desktop', () => {
+    expect(resolveTargetSlot({ slot: 'drawer' }, 'tablet')).toBe('left-top')
+    expect(resolveTargetSlot({ slot: 'drawer' }, 'desktop')).toBe('left-top')
   })
 
-  it('keeps bottom on mobile', () => {
-    expect(resolveTargetSlot({ slot: 'bottom' }, 'mobile')).toBe('bottom')
+  it('keeps drawer on mobile', () => {
+    expect(resolveTargetSlot({ slot: 'drawer' }, 'mobile')).toBe('drawer')
   })
 
   it('returns slot as-is otherwise', () => {

package/src/App/renderer/slots.js

@@ -10,8 +10,9 @@ export const layoutSlots = Object.freeze({
   MIDDLE: 'middle',
   RIGHT_TOP: 'right-top',
   RIGHT_BOTTOM: 'right-bottom',
-  FOOTER_RIGHT: 'footer-right',
-  BOTTOM: 'bottom',
+  BOTTOM_LEFT: 'bottom-left',
+  BOTTOM_RIGHT: 'bottom-right',
+  DRAWER: 'drawer',
   ACTIONS: 'actions',
   MODAL: 'modal' // internal only
 })
@@ -22,8 +23,9 @@ export const allowedSlots = Object.freeze({
     layoutSlots.TOP_LEFT,
     layoutSlots.TOP_RIGHT,
     layoutSlots.MIDDLE,
-    layoutSlots.FOOTER_RIGHT,
-    layoutSlots.BOTTOM,
+    layoutSlots.RIGHT_BOTTOM,
+    layoutSlots.BOTTOM_RIGHT,
+    layoutSlots.DRAWER,
     layoutSlots.ACTIONS
   ],
   panel: [
@@ -34,7 +36,7 @@ export const allowedSlots = Object.freeze({
     layoutSlots.MIDDLE,
     layoutSlots.RIGHT_TOP,
     layoutSlots.RIGHT_BOTTOM,
-    layoutSlots.BOTTOM, // Typicaly on mobile
+    layoutSlots.DRAWER, // Typically on mobile
     layoutSlots.MODAL // Internal only
   ],
   button: [
@@ -45,6 +47,8 @@ export const allowedSlots = Object.freeze({
     layoutSlots.LEFT_BOTTOM,
     layoutSlots.RIGHT_TOP,
     layoutSlots.RIGHT_BOTTOM,
+    layoutSlots.BOTTOM_LEFT,
+    layoutSlots.BOTTOM_RIGHT,
     layoutSlots.ACTIONS
   ]
 })

package/src/App/store/AppProvider.jsx

@@ -26,8 +26,10 @@ export const AppProvider = ({ options, children }) => {
     rightRef: useRef(null),
     rightTopRef: useRef(null),
     rightBottomRef: useRef(null),
+    drawerRef: useRef(null),
     bottomRef: useRef(null),
-    footerRef: useRef(null),
+    bottomRightRef: useRef(null),
+    attributionsRef: useRef(null),
     actionsRef: useRef(null),
     bannerRef: useRef(null),
     modalRef: useRef(null),

package/src/App/store/AppProvider.test.jsx

@@ -110,7 +110,7 @@ describe('AppProvider', () => {
     expect(contextValue).toHaveProperty('mode')
     expect(contextValue).toHaveProperty('openPanels')
     expect(contextValue.layoutRefs).toHaveProperty('mainRef')
-    expect(contextValue.layoutRefs).toHaveProperty('footerRef')
+    expect(contextValue.layoutRefs).toHaveProperty('bottomRef')
   })
 
   test('dispatch fallback uses options.panelRegistry.getPanelConfig() when state.panelConfig missing', () => {

package/src/App/store/ServiceProvider.jsx

@@ -1,25 +1,29 @@
 // src/App/store/ServiceProvider.jsx
 import React, { createContext, useMemo, useRef } from 'react'
-import { EVENTS } from '../../config/events.js'
 import { createAnnouncer } from '../../services/announcer.js'
 import { reverseGeocode } from '../../services/reverseGeocode.js'
 import { useConfig } from '../store/configContext.js'
 import { closeApp } from '../../services/closeApp.js'
+import { symbolRegistry } from '../../services/symbolRegistry.js'
+import { patternRegistry } from '../../services/patternRegistry.js'
 
 export const ServiceContext = createContext(null)
 
 export const ServiceProvider = ({ eventBus, children }) => {
-  const { id, handleExitClick } = useConfig()
+  const { id, handleExitClick, symbolDefaults: constructorSymbolDefaults } = useConfig()
   const mapStatusRef = useRef(null)
   const announce = useMemo(() => createAnnouncer(mapStatusRef), [])
 
+  symbolRegistry.setDefaults(constructorSymbolDefaults || {})
+
   const services = useMemo(() => ({
     announce,
     reverseGeocode: (zoom, center) => reverseGeocode(zoom, center),
-    events: EVENTS,
     eventBus,
     mapStatusRef,
-    closeApp: () => closeApp(id, handleExitClick, eventBus)
+    closeApp: () => closeApp(id, handleExitClick, eventBus),
+    symbolRegistry,
+    patternRegistry
   }), [announce])
 
   return (

package/src/App/store/appActionsMap.js

@@ -152,6 +152,12 @@ const toggleHasExclusiveControl = (state, payload) => {
   }
 }
 
+const setPluginsEvaluated = (state) =>
+  state.arePluginsEvaluated ? state : { ...state, arePluginsEvaluated: true }
+
+const clearPluginsEvaluated = (state) =>
+  state.arePluginsEvaluated ? { ...state, arePluginsEvaluated: false } : state
+
 const setSafeZoneInset = (state, { safeZoneInset, syncMapPadding = true }) => {
   return shallowEqual(state.safeZoneInset, safeZoneInset)
     ? state
@@ -163,6 +169,13 @@ const setSafeZoneInset = (state, { safeZoneInset, syncMapPadding = true }) => {
       }
 }
 
+const toggleAppVisible = (state, payload) => {
+  return {
+    ...state,
+    appVisible: payload
+  }
+}
+
 const toggleButtonDisabled = (state, payload) => {
   const { id, isDisabled } = payload
   const updated = new Set(state.disabledButtons)
@@ -358,12 +371,15 @@ export const actionsMap = {
   SET_HYBRID_FULLSCREEN: setHybridFullscreen,
   SET_INTERFACE_TYPE: setInterfaceType,
   SET_MODE: setMode,
+  PLUGINS_EVALUATED: setPluginsEvaluated,
+  CLEAR_PLUGINS_EVALUATED: clearPluginsEvaluated,
   SET_SAFE_ZONE_INSET: setSafeZoneInset,
   REVERT_MODE: revertMode,
   OPEN_PANEL: openPanel,
   CLOSE_PANEL: closePanel,
   CLOSE_ALL_PANELS: closeAllPanels,
   RESTORE_PREVIOUS_PANELS: restorePreviousPanels,
+  TOGGLE_APP_VISIBLE: toggleAppVisible,
   TOGGLE_HAS_EXCLUSIVE_CONTROL: toggleHasExclusiveControl,
   TOGGLE_BUTTON_DISABLED: toggleButtonDisabled,
   TOGGLE_BUTTON_HIDDEN: toggleButtonHidden,

package/src/App/store/appActionsMap.test.js

@@ -128,6 +128,26 @@ describe('actionsMap full coverage', () => {
     expect(result.hasExclusiveControl).toBe(true)
   })
 
+  test('PLUGINS_EVALUATED is no-op when arePluginsEvaluated already true', () => {
+    const s = { ...state, arePluginsEvaluated: true }
+    expect(actionsMap.PLUGINS_EVALUATED(s)).toBe(s)
+  })
+
+  test('PLUGINS_EVALUATED sets arePluginsEvaluated when false', () => {
+    const s = { ...state, arePluginsEvaluated: false }
+    expect(actionsMap.PLUGINS_EVALUATED(s).arePluginsEvaluated).toBe(true)
+  })
+
+  test('CLEAR_PLUGINS_EVALUATED clears arePluginsEvaluated when true', () => {
+    const s = { ...state, arePluginsEvaluated: true }
+    expect(actionsMap.CLEAR_PLUGINS_EVALUATED(s).arePluginsEvaluated).toBe(false)
+  })
+
+  test('CLEAR_PLUGINS_EVALUATED is no-op when arePluginsEvaluated already false', () => {
+    const s = { ...state, arePluginsEvaluated: false }
+    expect(actionsMap.CLEAR_PLUGINS_EVALUATED(s)).toBe(s)
+  })
+
   test('SET_SAFE_ZONE_INSET branch true/false', () => {
     shallowEqualModule.shallowEqual.mockReturnValueOnce(false)
     const res1 = actionsMap.SET_SAFE_ZONE_INSET(state, { safeZoneInset: { top: 10, bottom: 10 } })
@@ -152,6 +172,13 @@ describe('actionsMap full coverage', () => {
     expect(r2.hiddenButtons.has('btn3')).toBe(false)
   })
 
+  test('TOGGLE_APP_VISIBLE sets appVisible to payload', () => {
+    const r1 = actionsMap.TOGGLE_APP_VISIBLE(state, true)
+    expect(r1.appVisible).toBe(true)
+    const r2 = actionsMap.TOGGLE_APP_VISIBLE(state, false)
+    expect(r2.appVisible).toBe(false)
+  })
+
   test('TOGGLE_BUTTON_PRESSED adds/removes button', () => {
     const r1 = actionsMap.TOGGLE_BUTTON_PRESSED(state, { id: 'btn6', isPressed: true })
     expect(r1.pressedButtons.has('btn6')).toBe(true)

package/src/App/store/appDispatchMiddleware.js

@@ -3,7 +3,7 @@ import { EVENTS as events } from '../../config/events.js'
 import { defaultPanelConfig, defaultButtonConfig, defaultControlConfig } from '../../config/appConfig.js'
 import { deepMerge } from '../../utils/deepMerge.js'
 import { allowedSlots } from '../renderer/slots.js'
-import { logger } from '../../utils/logger.js'
+import { logger } from '../../services/logger.js'
 
 const BREAKPOINTS = ['mobile', 'tablet', 'desktop']
 

package/src/App/store/appDispatchMiddleware.test.js

@@ -180,7 +180,7 @@ describe('ADD_CONTROL', () => {
 
   it('does not warn when control has a valid slot', () => {
     run(
-      { type: 'ADD_CONTROL', payload: { id: 'myCtrl', config: { mobile: { slot: 'bottom' }, tablet: { slot: 'top-left' }, desktop: { slot: 'top-left' } } } },
+      { type: 'ADD_CONTROL', payload: { id: 'myCtrl', config: { mobile: { slot: 'drawer' }, tablet: { slot: 'top-left' }, desktop: { slot: 'top-left' } } } },
       { breakpoint: 'desktop' }
     )
     expect(console.warn).not.toHaveBeenCalled()
@@ -238,7 +238,7 @@ describe('ADD_PANEL', () => {
 
     expect(eventBus.emit).toHaveBeenCalledWith(
       events.APP_PANEL_OPENED,
-      { panelId: 'mobilePanel', slot: 'bottom' }
+      { panelId: 'mobilePanel', slot: 'drawer' }
     )
   })
 

package/src/App/store/appReducer.js

@@ -29,7 +29,9 @@ export const initialState = (config) => {
   const openPanels = getInitialOpenPanels(panelConfig, initialBreakpoint)
 
   return {
+    appVisible: null,
     isLayoutReady: false,
+    arePluginsEvaluated: false,
     breakpoint: initialBreakpoint,
     interfaceType: initialInterfaceType,
     preferredColorScheme: autoColorScheme ? preferredColorScheme : appColorScheme,

package/src/App/store/mapActionsMap.js

@@ -12,12 +12,10 @@ const setMapReady = (state) => ({
   isMapReady: true
 })
 
-const setMapStyle = (state, payload) => {
-  return {
-    ...state,
-    mapStyle: payload
-  }
-}
+const setMapStyle = (state, payload) => ({
+  ...state,
+  mapStyle: payload
+})
 
 const setMapSize = (state, payload) => {
   return {

package/src/App/store/mapActionsMap.test.js

@@ -46,8 +46,9 @@ describe('actionsMap', () => {
   })
 
   test('SET_MAP_STYLE sets mapStyle', () => {
-    const result = actionsMap.SET_MAP_STYLE(state, 'satellite')
-    expect(result.mapStyle).toBe('satellite')
+    const mapStyle = { id: 'satellite' }
+    const result = actionsMap.SET_MAP_STYLE(state, mapStyle)
+    expect(result.mapStyle).toBe(mapStyle)
     expect(result.otherProp).toBe(state.otherProp)
   })
 

package/src/App/store/mapReducer.js

@@ -17,10 +17,11 @@ export const initialState = (config) => {
   // Does a plugin handle map styles
   const pluginHandlesMapStyles = !!registeredPlugins?.find(plugin => plugin.config?.handlesMapStyle)
 
+  const initialMapStyle = pluginHandlesMapStyles ? null : mapStyle
   return {
     isMapReady: false,
     mapProvider: null,
-    mapStyle: pluginHandlesMapStyles ? null : mapStyle,
+    mapStyle: initialMapStyle,
     mapSize,
     center,
     zoom,

package/src/InteractiveMap/InteractiveMap.js

@@ -245,6 +245,8 @@ export default class InteractiveMap {
     if (parts.length > 1) {
       document.title = parts[parts.length - 1]
     }
+
+    this.eventBus.emit(events.APP_HIDDEN)
   }
 
   /**
@@ -262,6 +264,8 @@ export default class InteractiveMap {
     }
 
     updateDOMState(this)
+
+    this.eventBus.emit(events.APP_VISIBLE)
   }
 
   /**

package/src/config/appConfig.js

@@ -93,6 +93,9 @@ export const defaultAppConfig = {
   }, {
     id: 'minus',
     svgContent: '<path d="M5 12h14"/>'
+  }, {
+    id: 'chevron',
+    svgContent: '<path d="m6 9 6 6 6-6"/>'
   }]
 }
 
@@ -113,7 +116,7 @@ export const defaultButtonConfig = {
 export const defaultPanelConfig = {
   label: 'Panel',
   mobile: {
-    slot: 'bottom',
+    slot: 'drawer',
     open: true,
     dismissible: true,
     modal: false,
@@ -141,7 +144,7 @@ export const defaultPanelConfig = {
 export const defaultControlConfig = {
   label: 'Control',
   mobile: {
-    slot: 'bottom'
+    slot: 'drawer'
   },
   tablet: {
     slot: 'top-left'
@@ -156,9 +159,3 @@ export const scaleFactor = {
   medium: 1.5,
   large: 2
 }
-
-export const markerSvgPaths = [{
-  shape: 'pin',
-  backgroundPath: 'M31 16.001c0 7.489-8.308 15.289-11.098 17.698-.533.4-1.271.4-1.803 0C15.309 31.29 7 23.49 7 16.001c0-6.583 5.417-12 12-12s12 5.417 12 12z',
-  graphicPath: 'M19 11.001c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.241 5-5-2.24-5-5-5z'
-}]

package/src/config/appConfig.test.js

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react'
-import { defaultAppConfig, defaultButtonConfig, scaleFactor, markerSvgPaths } from './appConfig'
+import { defaultAppConfig, defaultButtonConfig, scaleFactor } from './appConfig'
 
 describe('defaultAppConfig', () => {
   const appState = {
@@ -135,6 +135,5 @@ describe('defaultAppConfig', () => {
   it('exports supplementary configs and constants', () => {
     expect(defaultButtonConfig.label).toBe('Button')
     expect(scaleFactor.large).toBe(2)
-    expect(markerSvgPaths[0].shape).toBe('pin')
   })
 })

package/src/config/defaults.js

@@ -27,8 +27,6 @@ const defaults = {
   mapViewParamKey: 'mv',
   maxMobileWidth: 640,
   minDesktopWidth: 835,
-  markerColor: '#ff0000',
-  markerShape: 'pin',
   nudgePanDelta: 5,
   nudgeZoomDelta: 0.1,
   panDelta: 100,