purgetss 7.4.0 → 7.5.0

package/lib/templates/purgetss.ui.js.cjs

@@ -3,14 +3,26 @@
 
 function Animation(args = {}) {
   const params = {
+    // Global
     id: args.id,
+    debug: args.debug ?? false,
+    isIOS: Ti.Platform.osname === 'iphone' || Ti.Platform.osname === 'ipad',
+
+    // Play / Toggle / Sequence
     open: false,
-    draggables: [],
     playing: false,
     delay: args.delay ?? 0,
-    debug: args.debug ?? false,
-    isIOS: Ti.Platform.osname === 'iphone' || Ti.Platform.osname === 'ipad',
-    hasTransformation: (args.scale !== undefined || args.rotate !== undefined)
+    hasTransformation: (args.scale !== undefined || args.rotate !== undefined),
+
+    // Draggable
+    draggables: [],
+
+    // Collision Detection
+    collisionViews: [],
+    dragCB: null,
+    dropCB: null,
+    lastHoverTarget: null,
+    lastKnownTarget: null
   }
 
   logger('Create Animation View: ' + params.id)
@@ -41,6 +53,242 @@ function Animation(args = {}) {
     makeViewsDraggable(_views)
   }
 
+  animationView.detectCollisions = (views, _dragCB, _dropCB) => {
+    if (params.debug) { console.log('') }
+    logger('`detectCollisions` method called on: ' + params.id)
+    if (_dragCB) params.dragCB = _dragCB
+    if (_dropCB) params.dropCB = _dropCB
+    const arr = Array.isArray(views) ? views : [views]
+    arr.forEach(view => {
+      view._collisionEnabled = true
+      if (!params.collisionViews.includes(view)) {
+        params.collisionViews.push(view)
+      }
+    })
+  }
+
+  function resolvePosition(view) {
+    if (view._originTop !== undefined) return { top: view._originTop, left: view._originLeft }
+    if (view.top !== undefined && view.top !== null && view.left !== undefined && view.left !== null) return { top: view.top, left: view.left }
+    const r = view.rect
+    return { top: r.y, left: r.x }
+  }
+
+  function normalizePosition(view) {
+    const pos = resolvePosition(view)
+    view.applyProperties({ top: pos.top, left: pos.left, right: null, bottom: null })
+    view._originTop = pos.top
+    view._originLeft = pos.left
+  }
+
+  animationView.swap = (view1, view2) => {
+    if (params.debug) { console.log('') }
+    logger('`swap` method called on: ' + params.id)
+
+      // Cancel any pending bounce-back animations
+      ;[view1, view2].forEach(v => {
+        if (v._bouncingBack) {
+          logger(`   -> cancelling bounce-back for ${v.id} before swap`)
+          v.applyProperties({ top: v._originTop, left: v._originLeft, transform: Ti.UI.createMatrix2D() })
+          v._bouncingBack = false
+        }
+      })
+
+    // Read REAL positions — rect gives actual rendered position, no stale variables
+    const targetRect = view2.rect
+    const sourceHome = { top: view1._originTop ?? view1.top, left: view1._originLeft ?? view1.left }
+
+    // Source goes to target's real position, target goes to source's home
+    const dest1Top = targetRect.y
+    const dest1Left = targetRect.x
+    const dest2Top = sourceHome.top
+    const dest2Left = sourceHome.left
+
+    logger(`   -> ${view1.id}: home(${sourceHome.top}, ${sourceHome.left}) → dest(${dest1Top}, ${dest1Left})`)
+    logger(`   -> ${view2.id}: rect(${targetRect.y}, ${targetRect.x}) → dest(${dest2Top}, ${dest2Left})`)
+
+    const maxZ = params.draggables.length
+    view1.zIndex = maxZ + 1
+    view2.zIndex = maxZ
+
+    view1.animate({
+      ...args, left: dest1Left, top: dest1Top, transform: Ti.UI.createMatrix2D()
+    }, () => {
+      view1.applyProperties({ left: dest1Left, top: dest1Top, transform: Ti.UI.createMatrix2D() })
+      params.draggables.forEach((d, k) => { d.zIndex = k })
+    })
+
+    view2.animate({
+      ...args, left: dest2Left, top: dest2Top
+    }, () => {
+      view2.applyProperties({ left: dest2Left, top: dest2Top })
+    })
+
+    view1._originTop = dest1Top
+    view1._originLeft = dest1Left
+    view2._originTop = dest2Top
+    view2._originLeft = dest2Left
+  }
+
+  animationView.sequence = (_views, _cb) => {
+    if (params.debug) { console.log('') }
+    logger('`sequence` method called on: ' + params.id)
+    const views = Array.isArray(_views) ? _views : [_views]
+    const total = views.length
+
+    params.open = !params.open
+    chooseAnimationBasedOnState('play')
+
+    function animateNext(index) {
+      if (index >= total) { return }
+      const isLast = index === total - 1
+      playView(views[index], (e) => {
+        if (isLast && typeof _cb === 'function') {
+          _cb(e)
+        } else {
+          animateNext(index + 1)
+        }
+      }, 'play', index, total)
+    }
+
+    animateNext(0)
+  }
+
+  animationView.shake = (view, intensity = 10) => {
+    if (params.debug) { console.log('') }
+    logger('`shake` method called on: ' + params.id)
+    if (!view) { return notFound() }
+
+    view.applyProperties({ transform: Ti.UI.createMatrix2D().translate(-intensity, 0) })
+
+    view.animate({
+      ...args,
+      transform: Ti.UI.createMatrix2D().translate(intensity, 0),
+      duration: Math.round((args.duration ?? 400) / 6),
+      autoreverse: true,
+      repeat: 3,
+      curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
+    }, () => {
+      view.applyProperties({ transform: Ti.UI.createMatrix2D() })
+    })
+  }
+
+  animationView.pulse = (view, count = 1) => {
+    if (params.debug) { console.log('') }
+    logger('`pulse` method called on: ' + params.id)
+    if (!view) { return notFound() }
+
+    view.animate({
+      ...args,
+      transform: args.transform ?? Ti.UI.createMatrix2D().scale(1.2),
+      autoreverse: true,
+      repeat: count,
+      curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
+    }, () => {
+      view.applyProperties({ transform: Ti.UI.createMatrix2D() })
+    })
+  }
+
+  animationView.snapTo = (view, targets) => {
+    if (params.debug) { console.log('') }
+    logger('`snapTo` method called on: ' + params.id)
+    if (!view) { return notFound() }
+
+    const arr = Array.isArray(targets) ? targets : [targets]
+    const vr = view.rect
+    const vcx = (view._visualLeft ?? view.left) + vr.width / 2
+    const vcy = (view._visualTop ?? view.top) + vr.height / 2
+
+    let closest = null
+    let minDist = Infinity
+
+    arr.forEach(target => {
+      if (target === view) { return }
+      const tr = target.rect
+      const tcx = tr.x + tr.width / 2
+      const tcy = tr.y + tr.height / 2
+      const dist = Math.sqrt((vcx - tcx) ** 2 + (vcy - tcy) ** 2)
+      if (dist < minDist) {
+        minDist = dist
+        closest = target
+      }
+    })
+
+    if (!closest) { return null }
+
+    const cr = closest.rect
+    normalizePosition(closest)
+    const destLeft = closest._originLeft + (cr.width - vr.width) / 2
+    const destTop = closest._originTop + (cr.height - vr.height) / 2
+
+    view.animate({
+      ...args, left: destLeft, top: destTop, transform: Ti.UI.createMatrix2D()
+    }, () => {
+      view.applyProperties({ left: destLeft, top: destTop, transform: Ti.UI.createMatrix2D() })
+    })
+
+    view._originTop = destTop
+    view._originLeft = destLeft
+
+    return closest
+  }
+
+  animationView.reorder = (views, newOrder) => {
+    if (params.debug) { console.log('') }
+    logger('`reorder` method called on: ' + params.id)
+    const arr = Array.isArray(views) ? views : [views]
+    if (newOrder.length !== arr.length) { return }
+
+    arr.forEach(v => normalizePosition(v))
+
+    const positions = arr.map(v => ({
+      left: v._originLeft,
+      top: v._originTop
+    }))
+
+    arr.forEach((view, i) => {
+      const dest = positions[newOrder[i]]
+
+      view.animate({
+        ...args, left: dest.left, top: dest.top, transform: Ti.UI.createMatrix2D()
+      }, () => {
+        view.applyProperties({ left: dest.left, top: dest.top, transform: Ti.UI.createMatrix2D() })
+      })
+
+      view._originTop = dest.top
+      view._originLeft = dest.left
+    })
+  }
+
+  animationView.undraggable = (_views) => {
+    if (params.debug) { console.log('') }
+    logger('`undraggable` method called on: ' + params.id)
+    const arr = Array.isArray(_views) ? _views : [_views]
+
+    arr.forEach(view => {
+      if (view._dragListeners) {
+        view.removeEventListener('touchstart', view._dragListeners.onTouchStart)
+        view.removeEventListener('touchend', view._dragListeners.onTouchEnd)
+        view.removeEventListener('touchmove', view._dragListeners.onTouchMove)
+        Ti.Gesture.removeEventListener('orientationchange', view._dragListeners.onOrientationChange)
+        delete view._dragListeners
+      }
+
+      const idx = params.draggables.indexOf(view)
+      if (idx !== -1) { params.draggables.splice(idx, 1) }
+
+      const cIdx = params.collisionViews.indexOf(view)
+      if (cIdx !== -1) { params.collisionViews.splice(cIdx, 1) }
+
+      delete view._originTop
+      delete view._originLeft
+      delete view._visualTop
+      delete view._visualLeft
+      delete view._collisionEnabled
+      delete view._bouncingBack
+    })
+  }
+
   animationView.open = (_views, _cb) => {
     if (params.debug) { console.log('') }
     logger('`open` method called on: ' + params.id)
@@ -53,6 +301,54 @@ function Animation(args = {}) {
     mainPlayApplyFn(_views, _cb, 'play', 'close')
   }
 
+  // Mac Catalyst note: Parent containers of transitioned views should use fixed
+  // dimensions (not Ti.UI.FILL). Resizable containers trigger a UIKit re-layout
+  // that distorts views with rotated Matrix2D transforms.
+  animationView.transition = (views, layouts) => {
+    if (params.debug) { console.log('') }
+    logger('`transition` method called on: ' + params.id)
+
+    const arr = Array.isArray(views) ? views : [views]
+
+    arr.forEach((view, i) => {
+      const layout = layouts[i]
+
+      if (!layout) {
+        view.animate(Ti.UI.createAnimation({ ...args, zIndex: 0, opacity: 0 }), () => {
+          view.applyProperties({ zIndex: 0, opacity: 0, transform: Ti.UI.createMatrix2D(), translation: { x: 0, y: 0 }, rotate: 0, scale: 1 })
+        })
+        return
+      }
+
+      const tx = layout.translation?.x ?? 0
+      const ty = layout.translation?.y ?? 0
+      const rotate = layout.rotate ?? 0
+      const scale = layout.scale ?? 1
+
+      const transform = Ti.UI.createMatrix2D().translate(tx, ty).rotate(rotate).scale(scale)
+
+      const needsFadeIn = view.opacity === 0
+
+      if (layout.zIndex !== undefined) view.zIndex = layout.zIndex
+
+      const animation = Ti.UI.createAnimation({
+        ...args,
+        transform
+      })
+
+      if (needsFadeIn) animation.opacity = 1
+      if (layout.width !== undefined) animation.width = layout.width
+      if (layout.height !== undefined) animation.height = layout.height
+      if (layout.opacity !== undefined) animation.opacity = layout.opacity
+
+      view.animate(animation, () => {
+        const props = { transform, translation: { x: tx, y: ty }, rotate, scale, zIndex: layout.zIndex }
+        if (needsFadeIn) props.opacity = 1
+        view.applyProperties(props)
+      })
+    })
+  }
+
   function handleTransformations(args) {
     if ('anchorPoint' in args || 'rotate' in args || 'scale' in args) {
       logger('   -> Creating transform')
@@ -124,19 +420,113 @@ function Animation(args = {}) {
       let offsetX, offsetY
       setBounds(draggableView, args.bounds)
 
-      draggableView.addEventListener('touchstart', (event) => {
+      const onTouchStart = (event) => {
         offsetX = event.x
         offsetY = event.y
+        draggableView._wasDragged = false
+
+        // If a bounce-back animation is still running, complete it immediately
+        if (draggableView._bouncingBack) {
+          logger(`   -> completing pending bounce-back for ${draggableView.id}`)
+          draggableView.applyProperties({
+            top: draggableView._originTop,
+            left: draggableView._originLeft,
+            transform: Ti.UI.createMatrix2D()
+          })
+          draggableView._bouncingBack = false
+        }
 
         updateDraggableZIndex(event)
         checkDraggable(draggableView, 'drag')
-      })
 
-      draggableView.addEventListener('touchend', () => checkDraggable(draggableView, 'drop'))
+        if (draggableView._collisionEnabled) {
+          if (draggableView._originTop === undefined) {
+            draggableView._originTop = draggableView.top
+            draggableView._originLeft = draggableView.left
+            logger(`   -> touchStart origin capture (first): ${draggableView.id} top=${draggableView.top} left=${draggableView.left}`)
+          } else {
+            logger(`   -> touchStart origin kept: ${draggableView.id} origin=(${draggableView._originTop}, ${draggableView._originLeft}) vs top/left=(${draggableView.top}, ${draggableView.left})`)
+          }
+        }
+      }
 
-      draggableView.addEventListener('touchmove', (event) => handleTouchMove(event, draggableView, offsetX, offsetY))
+      const onTouchEnd = () => {
+        checkDraggable(draggableView, 'drop')
 
-      Ti.Gesture.addEventListener('orientationchange', () => checkBoundaries(draggableView))
+        // Android: consolidate transform after drag so transition reads correct state
+        if (!params.isIOS && draggableView.translation) {
+          const { translation, rotate, scale } = draggableView
+          draggableView.applyProperties({
+            translation, rotate, scale,
+            transform: Ti.UI.createMatrix2D().translate(translation.x, translation.y).rotate(rotate ?? 0).scale(scale ?? 1)
+          })
+        }
+
+        if (draggableView._collisionEnabled) {
+          const directTarget = checkCollision(draggableView)
+          const target = directTarget ?? params.lastKnownTarget
+          logger(`   -> collision check: ${draggableView.id} | direct: ${directTarget?.id ?? 'null'} | lastKnown: ${params.lastKnownTarget?.id ?? 'null'} | final: ${target?.id ?? 'null'}`)
+          if (target) {
+            // On Android, consolidate drag position before snap to avoid animation conflict
+            if (!params.isIOS) {
+              draggableView.applyProperties({
+                top: draggableView._visualTop ?? draggableView.top,
+                left: draggableView._visualLeft ?? draggableView.left
+              })
+            }
+            if (args.animationProperties?.snap?.center) {
+              logger(`   -> snap-center: ${draggableView.id} to ${target.id}`)
+              animationView.snapTo(draggableView, [target])
+            }
+            if (params.dropCB) {
+              logger(`   -> dropCB: ${draggableView.id} on ${target.id}`)
+              params.dropCB(draggableView, target)
+            }
+          } else if (!target && args.animationProperties?.snap?.back) {
+            logger(`   -> bounce-back: ${draggableView.id} to (${draggableView._originTop}, ${draggableView._originLeft})`)
+
+            // On Android, consolidate drag position before bounce-back to avoid animation conflict
+            if (!params.isIOS) {
+              draggableView.applyProperties({
+                top: draggableView._visualTop ?? draggableView.top,
+                left: draggableView._visualLeft ?? draggableView.left
+              })
+            }
+
+            draggableView._bouncingBack = true
+
+            draggableView.animate({
+              ...args,
+              top: draggableView._originTop,
+              left: draggableView._originLeft,
+              transform: Ti.UI.createMatrix2D()
+            }, () => {
+              draggableView._bouncingBack = false
+              draggableView.applyProperties({
+                top: draggableView._originTop,
+                left: draggableView._originLeft,
+                transform: Ti.UI.createMatrix2D()
+              })
+              logger(`   -> bounce-back complete: ${draggableView.id}`)
+            })
+          }
+          params.lastHoverTarget = null
+          params.lastKnownTarget = null
+          if (params.dragCB) {
+            params.dragCB(draggableView, null)
+          }
+        }
+      }
+
+      const onTouchMove = (event) => handleTouchMove(event, draggableView, offsetX, offsetY)
+      const onOrientationChange = () => checkBoundaries(draggableView)
+
+      draggableView._dragListeners = { onTouchStart, onTouchEnd, onTouchMove, onOrientationChange }
+
+      draggableView.addEventListener('touchend', onTouchEnd)
+      draggableView.addEventListener('touchmove', onTouchMove)
+      draggableView.addEventListener('touchstart', onTouchStart)
+      Ti.Gesture.addEventListener('orientationchange', onOrientationChange)
 
       params.draggables.push(draggableView)
     } else {
@@ -145,6 +535,7 @@ function Animation(args = {}) {
   }
 
   function handleTouchMove(event, draggableView, offsetX, offsetY) {
+    draggableView._wasDragged = true
     const convertedPoint = draggableView.convertPointToView({ x: event.x, y: event.y }, draggableView.parent)
     let top = Math.round(convertedPoint.y - offsetY)
     let left = Math.round(convertedPoint.x - offsetX)
@@ -166,11 +557,63 @@ function Animation(args = {}) {
       }
     }
 
+    draggableView._visualTop = top
+    draggableView._visualLeft = left
+
     if (params.isIOS) {
-      const { x, y } = calculateTranslation(draggableView, draggableView.parent.rect, left, top)
-      draggableView.applyProperties({ duration: 0, transform: Ti.UI.createMatrix2D().translate(x, y) })
+      const r = draggableView.rotate ?? 0
+      const s = draggableView.scale ?? 1
+
+      if (r !== 0 || s !== 1) {
+        // Delta-based drag for transformed views (preserves rotate/scale)
+        const translation = draggableView.translation ?? { x: 0, y: 0 }
+        const deltaX = Math.round((event.x - offsetX) * s)
+        const deltaY = Math.round((event.y - offsetY) * s)
+        translation.x += deltaX
+        translation.y += deltaY
+        draggableView.applyProperties({
+          translation, rotate: r, scale: s,
+          transform: Ti.UI.createMatrix2D().translate(translation.x, translation.y).rotate(r).scale(s)
+        })
+      } else {
+        // Standard drag for non-transformed views
+        const { x, y } = calculateTranslation(draggableView, draggableView.parent.rect, left, top)
+        draggableView.applyProperties({ duration: 0, transform: Ti.UI.createMatrix2D().translate(x, y) })
+      }
     } else {
-      draggableView.animate(Ti.UI.createAnimation({ top, left, duration: 0 }))
+      const r = draggableView.rotate ?? 0
+      const s = draggableView.scale ?? 1
+
+      if (r !== 0 || s !== 1) {
+        // Delta-based drag for transformed views on Android
+        const translation = draggableView.translation ?? { x: 0, y: 0 }
+        const deltaX = Math.round((event.x - offsetX) * s)
+        const deltaY = Math.round((event.y - offsetY) * s)
+        translation.x += deltaX
+        translation.y += deltaY
+        draggableView.animate(Ti.UI.createAnimation({
+          transform: Ti.UI.createMatrix2D().translate(translation.x, translation.y).rotate(r).scale(s),
+          duration: 0
+        }))
+        draggableView.translation = translation
+        draggableView.rotate = r
+        draggableView.scale = s
+      } else {
+        draggableView.animate(Ti.UI.createAnimation({ top, left, duration: 0 }))
+      }
+    }
+
+    if (draggableView._collisionEnabled && params.dragCB) {
+      try {
+        const target = checkCollision(draggableView)
+        if (target) { params.lastKnownTarget = target }
+        if (target !== params.lastHoverTarget) {
+          params.lastHoverTarget = target
+          params.dragCB(draggableView, target)
+        }
+      } catch (e) {
+        logger(`   !! collision error in touchmove: ${e.message}`)
+      }
     }
   }
 
@@ -178,15 +621,15 @@ function Animation(args = {}) {
     let x = left - parentViewRect.width / 2 + draggableView.rect.width / 2
     let y = top - parentViewRect.height / 2 + draggableView.rect.height / 2
 
-    if (draggableView.left) {
+    if (draggableView.left != null) {
       x = left - draggableView.left
-    } else if (draggableView.right) {
+    } else if (draggableView.right != null) {
       x = left - (parentViewRect.width - draggableView.right - draggableView.rect.width)
     }
 
-    if (draggableView.top) {
+    if (draggableView.top != null) {
       y = top - draggableView.top
-    } else if (draggableView.bottom) {
+    } else if (draggableView.bottom != null) {
       y = top - (parentViewRect.height - draggableView.bottom - draggableView.rect.height)
     }
 
@@ -206,8 +649,14 @@ function Animation(args = {}) {
   }
 
   function updateDraggableZIndex(event) {
-    params.draggables.push(params.draggables.splice(realSourceView(event.source).zIndex, 1)[0])
-    params.draggables.forEach((draggable, key) => { draggable.zIndex = key })
+    if (args.animationProperties?.keepZIndex) return
+
+    const source = realSourceView(event.source)
+    const idx = params.draggables.indexOf(source)
+    if (idx !== -1) {
+      params.draggables.push(params.draggables.splice(idx, 1)[0])
+      params.draggables.forEach((draggable, key) => { draggable.zIndex = key })
+    }
   }
 
   function realSourceView(_source) {
@@ -269,6 +718,26 @@ function Animation(args = {}) {
     })
   }
 
+  function checkCollision(draggableView) {
+    const top = draggableView._visualTop
+    const left = draggableView._visualLeft
+    if (left === null || left === undefined || top === null || top === undefined) {
+      return null
+    }
+
+    const cy = top + draggableView.rect.height / 2
+    const cx = left + draggableView.rect.width / 2
+
+    for (const other of params.collisionViews) {
+      if (other === draggableView) { continue }
+      const r = other.rect
+      if (cx > r.x && cx < r.x + r.width && cy > r.y && cy < r.y + r.height) {
+        return other
+      }
+    }
+    return null
+  }
+
   function checkDraggable(_view, _action) {
     logger('Check Draggable')
     logger('   -> `' + _action + '`')

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "purgetss",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "main": "src/index.js",
   "bin": {
     "purgetss": "bin/purgetss"
@@ -87,7 +87,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
-    "@fortawesome/fontawesome-free": "^7.1.0",
+    "@fortawesome/fontawesome-free": "^7.2.0",
     "eslint": "^9.39.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-n": "^17.23.1",

package/src/core/builders/tailwind-builder.js

@@ -324,6 +324,7 @@ export function helperToBuildTailwindClasses(key, value) {
     case 'showUndoRedoActions':
     case 'showVerticalScrollIndicator':
     case 'size':
+    case 'snap':
     case 'softKeyboardOnFocus':
     case 'sound':
     case 'splitActionBar':

package/src/core/builders/tailwind-helpers.js

@@ -103,17 +103,27 @@ export function combineAllValues(base, defaultTheme) {
   const allValues = {}
 
   // ! Custom Window, View and ImageView
-  allValues.Window = (configFile.theme.Window && configFile.theme.Window.apply)
-    ? _.merge({ apply: configFile.theme.Window.apply }, configFile.theme.Window)
-    : _.merge({ default: { backgroundColor: '#FFFFFF' } }, configFile.theme.Window)
+  // Merge extend values into theme (same as colors, spacing, etc.)
+  _.each(['Window', 'View', 'ImageView'], comp => {
+    if (configFile.theme.extend[comp]) {
+      configFile.theme[comp] = _.merge({}, configFile.theme[comp], configFile.theme.extend[comp])
+      delete configFile.theme.extend[comp]
+    }
+    // Normalize shorthand: { apply: '...' } → { default: { apply: '...' } }
+    if (configFile.theme[comp] && configFile.theme[comp].apply && !configFile.theme[comp].default) {
+      configFile.theme[comp] = { default: configFile.theme[comp] }
+    }
+  })
 
-  allValues.ImageView = (configFile.theme.ImageView && configFile.theme.ImageView.apply)
-    ? _.merge({ apply: configFile.theme.ImageView.apply }, { ios: { hires: true } }, configFile.theme.ImageView)
-    : _.merge({ ios: { hires: true } }, configFile.theme.ImageView)
+  // Merge user config WITH defaults, then write back to configFile.theme
+  // so that downstream functions pick up the full merged object
+  configFile.theme.Window = _.merge({ default: { backgroundColor: '#FFFFFF' } }, configFile.theme.Window)
+  configFile.theme.ImageView = _.merge({ ios: { hires: true } }, configFile.theme.ImageView)
+  configFile.theme.View = _.merge({ default: { width: 'Ti.UI.SIZE', height: 'Ti.UI.SIZE' } }, configFile.theme.View)
 
-  allValues.View = (configFile.theme.View && configFile.theme.View.apply)
-    ? _.merge({ apply: configFile.theme.View.apply }, configFile.theme.View)
-    : _.merge({ default: { width: 'Ti.UI.SIZE', height: 'Ti.UI.SIZE' } }, configFile.theme.View)
+  allValues.Window = configFile.theme.Window
+  allValues.ImageView = configFile.theme.ImageView
+  allValues.View = configFile.theme.View
 
   // ! Width, height and margin properties
   // INFO: sizingProperties: For glossary generator only... Do not move from this position.

package/src/shared/helpers/animation.js

@@ -243,6 +243,28 @@ export function toggle() {
   return convertedStyles
 }
 
+/**
+ * Snap properties for the Animation module
+ * @returns {string} Generated styles
+ */
+export function snap() {
+  let convertedStyles = processComments({
+    prop: 'snap - For the Animation module',
+    modules: 'Animation'
+  })
+
+  convertedStyles += '\'.snap-back\': { animationProperties: { snap: { back: true } } }\n'
+  convertedStyles += '\'.snap-back-false\': { animationProperties: { snap: { back: false } } }\n'
+  convertedStyles += '\'.snap-center\': { animationProperties: { snap: { center: true } } }\n'
+  convertedStyles += '\'.snap-center-false\': { animationProperties: { snap: { center: false } } }\n'
+  convertedStyles += '\'.snap-magnet\': { animationProperties: { snap: { magnet: true } } }\n'
+  convertedStyles += '\'.snap-magnet-false\': { animationProperties: { snap: { magnet: false } } }\n'
+  convertedStyles += '\'.keep-z-index\': { animationProperties: { keepZIndex: true } }\n'
+  convertedStyles += '\'.keep-z-index-false\': { animationProperties: { keepZIndex: false } }\n'
+
+  return convertedStyles
+}
+
 /**
  * Dragging type property
  * @returns {string} Generated styles