@hanzogui/kitchen-sink 3.0.5

package/.detoxrc.js

@@ -0,0 +1,130 @@
+// force single worker - multiple workers cause ECOMPROMISED lock file errors
+// see: https://github.com/wix/Detox/issues/4210
+const maxWorkers = 1
+
+/** @type {Detox.DetoxConfig} */
+module.exports = {
+  testRunner: {
+    args: {
+      $0: 'jest',
+      config: 'e2e/jest.config.js',
+      maxWorkers,
+    },
+    jest: {
+      setupTimeout: 180000, // 3 minutes for CI environments
+      retries: 2, // Retry flaky tests up to 2 times
+    },
+  },
+  artifacts: {
+    rootDir: './e2e/artifacts',
+    plugins: {
+      screenshot: 'failing',
+      uiHierarchy: 'enabled',
+    },
+  },
+  behavior: {
+    init: {
+      exposeGlobals: true,
+    },
+  },
+  apps: {
+    'ios.debug': {
+      type: 'ios.app',
+      // CI uses 'build/' (set via env var), local uses global DerivedData
+      // note: -derivedDataPath is ignored when Xcode has IDEBuildLocationStyle=Custom
+      // so we use BUILT_PRODUCTS_DIR to force the output location
+      binaryPath:
+        process.env.DETOX_IOS_APP_PATH ||
+        'ios/build/Build/Products/Debug-iphonesimulator/guikitchensink.app',
+      build:
+        'xcodebuild -workspace ios/guikitchensink.xcworkspace -scheme guikitchensink -configuration Debug -sdk iphonesimulator SYMROOT="$(pwd)/ios/build/Build/Products" OBJROOT="$(pwd)/ios/build/Build/Intermediates.noindex"',
+      // tell RCTBundleURLProvider where metro is (auto-detection fails with dev-client)
+      launchArgs: {
+        RCT_jsLocation: 'localhost',
+      },
+    },
+    'ios.release': {
+      type: 'ios.app',
+      binaryPath:
+        process.env.DETOX_IOS_APP_PATH ||
+        'ios/build/Build/Products/Release-iphonesimulator/guikitchensink.app',
+      build:
+        'xcodebuild -workspace ios/guikitchensink.xcworkspace -scheme guikitchensink -configuration Release -sdk iphonesimulator SYMROOT="$(pwd)/ios/build/Build/Products" OBJROOT="$(pwd)/ios/build/Build/Intermediates.noindex"',
+    },
+    'android.debug': {
+      type: 'android.apk',
+      binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk',
+      testBinaryPath:
+        'android/app/build/outputs/apk/androidTest/debug/app-debug-androidTest.apk',
+      build:
+        'cd android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug --init-script init.gradle',
+      // Port 8081 for Metro, port 8099 for Detox server (fixed in native-ci scripts)
+      reversePorts: [8081, 8099],
+    },
+    'android.release': {
+      type: 'android.apk',
+      binaryPath: 'android/app/build/outputs/apk/release/app-release.apk',
+      build:
+        'cd android && ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release',
+    },
+  },
+  devices: {
+    simulator: {
+      type: 'ios.simulator',
+      device: {
+        type: process.env.DETOX_DEVICE || 'iPhone 16',
+      },
+    },
+    attached: {
+      type: 'android.attached',
+      device: {
+        adbName: '.*',
+      },
+    },
+    emulator: {
+      type: 'android.emulator',
+      device: {
+        // Local development - use your own AVD name (default matches what native-ci expects)
+        avdName: process.env.DETOX_AVD_NAME || 'Pixel_6_API_33_8GB',
+      },
+    },
+    // CI emulator - created by reactivecircus/android-emulator-runner
+    'emulator.ci': {
+      type: 'android.emulator',
+      device: {
+        avdName: 'test',
+      },
+    },
+  },
+  configurations: {
+    'ios.sim.debug': {
+      device: 'simulator',
+      app: 'ios.debug',
+    },
+    'ios.sim.release': {
+      device: 'simulator',
+      app: 'ios.release',
+    },
+    'android.att.debug': {
+      device: 'attached',
+      app: 'android.debug',
+    },
+    'android.att.release': {
+      device: 'attached',
+      app: 'android.release',
+    },
+    'android.emu.debug': {
+      device: 'emulator',
+      app: 'android.debug',
+    },
+    'android.emu.release': {
+      device: 'emulator',
+      app: 'android.release',
+    },
+    // CI configurations
+    'android.emu.ci.debug': {
+      device: 'emulator.ci',
+      app: 'android.debug',
+    },
+  },
+}

package/.env.production

@@ -0,0 +1,2 @@
+NODE_ENV=production
+__DEV__=false

package/.maestro/config.yaml

@@ -0,0 +1,4 @@
+flows:
+  - 'flows/*'
+excludeTags:
+  - util

package/.maestro/flows/shorthand-variables.yaml

@@ -0,0 +1,23 @@
+appId: com.gui.kitchen-sink
+---
+# Test that shorthand CSS properties with $variables render correctly on native
+- launchApp
+- tapOn:
+    text: 'All Test Cases'
+    optional: true
+- scrollUntilVisible:
+    element:
+      id: 'test-case-ShorthandVariables'
+    direction: DOWN
+- tapOn:
+    id: 'test-case-ShorthandVariables'
+- assertVisible:
+    id: 'boxshadow-var'
+- assertVisible:
+    id: 'boxshadow-multi'
+- assertVisible:
+    id: 'border-var'
+- assertVisible:
+    id: 'boxshadow-plain'
+# Note: boxShadow with $variable resolves to actual color on native (RN 0.77+)
+# border shorthand is web-only; native falls back to individual border props

package/.watchmanconfig

@@ -0,0 +1 @@
+{}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+  Copyright (c) 2020 Nate Wienert
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+NOTE:
+
+- yarn ios fails unless you add to package.json:
+
+```
+"installConfig": {
+    "hoistingLimits": "dependencies"
+  },
+```
+
+- but metro fails to build js unless you remove this (and make sure `config.resolver.nodeModulesPaths` is set to monorepo root in metro.config).

package/app.json

@@ -0,0 +1,43 @@
+{
+  "expo": {
+    "name": "gui-kitchen-sink",
+    "slug": "gui-kitchen-sink",
+    "scheme": "gui-kitchen-sink",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "automatic",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "updates": {
+      "fallbackToCacheTimeout": 0
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.gui.guikitchensink"
+    },
+    "android": {
+      "package": "com.gui.guikitchensink",
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#FFFFFF"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "extra": {
+      "eas": {
+        "projectId": "5c027280-f9c1-4bba-9c75-762ba6efcecc"
+      }
+    },
+    "plugins": ["expo-font", "./plugins/expo-modules-core-swift6"],
+    "experiments": {
+      "reactCanary": true
+    }
+  }
+}

package/babel.config.js

@@ -0,0 +1,25 @@
+module.exports = (api) => {
+  api.cache(true)
+  return {
+    presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }]],
+    plugins: [
+      [
+        '@hanzogui/babel-plugin',
+        {
+          components: ['@hanzo/gui', '@hanzogui/sandbox-ui'],
+          config: './src/gui.config.ts',
+        },
+      ],
+      'react-native-reanimated/plugin',
+      [
+        'module-resolver',
+        {
+          root: ['./'],
+          alias: {
+            'next/router': './next-router-shim',
+          },
+        },
+      ],
+    ],
+  }
+}

package/e2e/CompilerExtraction.test.ts

@@ -0,0 +1,147 @@
+/**
+ * Tests compiler extraction with theme functionality and performance.
+ * Runs hanzo-gui build to generate .native.tsx before testing.
+ */
+
+import * as assert from 'assert'
+import { execSync } from 'child_process'
+import { unlinkSync, existsSync } from 'fs'
+import { by, device, element, expect, waitFor } from 'detox'
+import { navigateToTestCase } from './utils/navigation'
+import { getDominantColor, isBlueish, formatRGB } from './utils/colors'
+
+const SOURCE_FILE = 'src/usecases/CompilerExtraction.tsx'
+const NATIVE_FILE = 'src/usecases/CompilerExtraction.native.tsx'
+const EXPECTED_OPTIMIZATIONS = 18
+
+describe('CompilerExtraction', () => {
+  beforeAll(async () => {
+    // remove existing .native.tsx to force rebuild
+    if (existsSync(NATIVE_FILE)) {
+      unlinkSync(NATIVE_FILE)
+    }
+
+    // run hanzo-gui build to generate optimized .native.tsx
+    console.log('Running hanzo-gui build...')
+    execSync(
+      `npx hanzo-gui build ${SOURCE_FILE} --target native --output-around --expect-optimizations ${EXPECTED_OPTIMIZATIONS}`,
+      { stdio: 'inherit' }
+    )
+    console.log('Build complete, .native.tsx generated')
+
+    await device.launchApp({ newInstance: true })
+  })
+
+  it('should render and respond to theme changes', async () => {
+    await device.reloadReactNative()
+    await navigateToTestCase('CompilerExtraction', 'compiler-extraction-root')
+    await new Promise((r) => setTimeout(r, 300))
+
+    // verify components render
+    await expect(element(by.id('compiler-simple-box'))).toBeVisible()
+    await expect(element(by.id('compiler-advanced-box'))).toBeVisible()
+    await expect(element(by.id('compiler-subtheme-box'))).toBeVisible()
+
+    // verify initial light mode
+    await expect(element(by.id('compiler-mode-label'))).toHaveText('Mode: light')
+
+    // capture light mode color
+    const lightScreenshot = await element(by.id('compiler-advanced-box')).takeScreenshot(
+      'light'
+    )
+    const lightColor = getDominantColor(lightScreenshot)
+    console.log(`Light mode color: ${formatRGB(lightColor)}`)
+
+    // toggle to dark mode
+    await element(by.id('compiler-toggle-mode')).tap()
+    await waitFor(element(by.id('compiler-mode-label')))
+      .toHaveText('Mode: dark')
+      .withTimeout(3000)
+    await new Promise((r) => setTimeout(r, 200))
+
+    // capture dark mode color
+    const darkScreenshot = await element(by.id('compiler-advanced-box')).takeScreenshot(
+      'dark'
+    )
+    const darkColor = getDominantColor(darkScreenshot)
+    console.log(`Dark mode color: ${formatRGB(darkColor)}`)
+
+    // colors must differ (verifies theme fix works)
+    const colorsDiffer =
+      Math.abs(lightColor.r - darkColor.r) > 20 ||
+      Math.abs(lightColor.g - darkColor.g) > 20 ||
+      Math.abs(lightColor.b - darkColor.b) > 20
+    assert.ok(
+      colorsDiffer,
+      `Theme change failed: light=${formatRGB(lightColor)}, dark=${formatRGB(darkColor)}`
+    )
+
+    // test sub-theme: cycle to blue
+    await element(by.id('compiler-cycle-subtheme')).tap()
+    await new Promise((r) => setTimeout(r, 300))
+    const blueScreenshot = await element(by.id('compiler-subtheme-box')).takeScreenshot(
+      'blue'
+    )
+    const blueColor = getDominantColor(blueScreenshot)
+    console.log(`Blue sub-theme: ${formatRGB(blueColor)}`)
+    assert.ok(isBlueish(blueColor), `Expected blueish, got ${formatRGB(blueColor)}`)
+  })
+
+  it('should benchmark optimized vs non-optimized (best of 3)', async () => {
+    await device.reloadReactNative()
+    await navigateToTestCase('CompilerExtraction', 'compiler-extraction-root')
+    await new Promise((r) => setTimeout(r, 300))
+
+    // show benchmark
+    await element(by.id('compiler-toggle-bench')).tap()
+    await waitFor(element(by.id('bench-run-opt')))
+      .toBeVisible()
+      .withTimeout(3000)
+
+    // run optimized 3 times
+    for (let i = 0; i < 3; i++) {
+      await element(by.id('bench-run-opt')).tap()
+      await new Promise((r) => setTimeout(r, 300))
+    }
+
+    // run non-optimized 3 times
+    for (let i = 0; i < 3; i++) {
+      await element(by.id('bench-run-noopt')).tap()
+      await new Promise((r) => setTimeout(r, 300))
+    }
+
+    // get results via accessibility labels
+    const optResult = await element(by.id('bench-opt-result')).getAttributes()
+    const noOptResult = await element(by.id('bench-noopt-result')).getAttributes()
+    const pctResult = await element(by.id('bench-pct')).getAttributes()
+
+    // parse times from accessibility labels (format: "opt:1.2345" or "noopt:1.2345")
+    const optLabel = (optResult as any).label || ''
+    const noOptLabel = (noOptResult as any).label || ''
+    const pctLabel = (pctResult as any).label || ''
+
+    const optTime = parseFloat(optLabel.split(':')[1])
+    const noOptTime = parseFloat(noOptLabel.split(':')[1])
+    const pctDiff = parseFloat(pctLabel.split(':')[1])
+
+    console.log(`Benchmark results:`)
+    console.log(`  Optimized best: ${optTime.toFixed(2)}ms`)
+    console.log(`  Non-optimized best: ${noOptTime.toFixed(2)}ms`)
+    console.log(`  Difference: ${pctDiff.toFixed(1)}%`)
+
+    // assert optimized is faster (or at least not significantly slower)
+    assert.ok(
+      pctDiff > -10,
+      `Optimized should not be >10% slower than non-optimized. Got ${pctDiff.toFixed(1)}%`
+    )
+
+    // log the improvement
+    if (pctDiff > 0) {
+      console.log(`✓ Optimized is ${pctDiff.toFixed(1)}% faster`)
+    } else {
+      console.log(
+        `⚠ Optimized is ${Math.abs(pctDiff).toFixed(1)}% slower (within tolerance)`
+      )
+    }
+  })
+})

package/e2e/GroupPressNative.test.ts

@@ -0,0 +1,167 @@
+/**
+ * Native tests for $group-press styles
+ * Tests both unnamed and named groups, with and without transition
+ * Verifies actual pixel colors change correctly
+ */
+
+import { by, device, element, expect } from 'detox'
+import * as assert from 'assert'
+import { navigateToTestCase } from './utils/navigation'
+import { getDominantColor, isBlueish, formatRGB } from './utils/colors'
+
+async function navigateToGroupPressNative() {
+  await navigateToTestCase('GroupPressNative', 'group-press-native-root')
+}
+
+// TODO: These tests are flaky on iOS simulator - press events don't fire reliably
+// Need to investigate press event handling in simulator environment
+describe.skip('GroupPressNative', () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+
+  beforeEach(async () => {
+    await device.reloadReactNative()
+    await navigateToGroupPressNative()
+  })
+
+  it('should render the test case screen', async () => {
+    await expect(element(by.id('group-press-native-root'))).toExist()
+    await expect(element(by.id('group-child-no-transition'))).toExist()
+    await expect(element(by.id('group-child-with-transition'))).toExist()
+    await expect(element(by.id('named-group-child-no-transition'))).toExist()
+    await expect(element(by.id('named-group-child-with-transition'))).toExist()
+  })
+
+  describe('unnamed group without transition', () => {
+    it('should show blue at rest and return to blue after press', async () => {
+      // verify starts blue
+      const beforeScreenshot = await element(
+        by.id('group-child-no-transition')
+      ).takeScreenshot('group1-before')
+      const beforeColor = getDominantColor(beforeScreenshot)
+      assert.ok(
+        isBlueish(beforeColor),
+        `Expected blue before tap, got ${formatRGB(beforeColor)}`
+      )
+
+      // tap the group
+      await element(by.id('group-no-transition')).tap()
+      await new Promise((r) => setTimeout(r, 100))
+
+      // verify returns to blue after release
+      const afterScreenshot = await element(
+        by.id('group-child-no-transition')
+      ).takeScreenshot('group1-after')
+      const afterColor = getDominantColor(afterScreenshot)
+      assert.ok(
+        isBlueish(afterColor),
+        `Expected blue after tap, got ${formatRGB(afterColor)}`
+      )
+
+      // verify press events fired and not stuck
+      await expect(element(by.id('group1-press-in'))).toHaveText('In: 1')
+      await expect(element(by.id('group1-press-out'))).toHaveText('Out: 1')
+      await expect(element(by.id('group1-is-pressed'))).toHaveText('P: N')
+    })
+  })
+
+  describe('unnamed group with transition', () => {
+    it('should show blue at rest and return to blue after press', async () => {
+      // verify starts blue
+      const beforeScreenshot = await element(
+        by.id('group-child-with-transition')
+      ).takeScreenshot('group2-before')
+      const beforeColor = getDominantColor(beforeScreenshot)
+      assert.ok(
+        isBlueish(beforeColor),
+        `Expected blue before tap, got ${formatRGB(beforeColor)}`
+      )
+
+      // tap the group
+      await element(by.id('group-with-transition')).tap()
+      // wait a bit for animation to settle
+      await new Promise((r) => setTimeout(r, 200))
+
+      // verify returns to blue after release
+      const afterScreenshot = await element(
+        by.id('group-child-with-transition')
+      ).takeScreenshot('group2-after')
+      const afterColor = getDominantColor(afterScreenshot)
+      assert.ok(
+        isBlueish(afterColor),
+        `Expected blue after tap, got ${formatRGB(afterColor)}`
+      )
+
+      // verify press events fired and not stuck
+      await expect(element(by.id('group2-press-in'))).toHaveText('In: 1')
+      await expect(element(by.id('group2-press-out'))).toHaveText('Out: 1')
+      await expect(element(by.id('group2-is-pressed'))).toHaveText('P: N')
+    })
+  })
+
+  describe('named group without transition', () => {
+    it('should show blue at rest and return to blue after press', async () => {
+      // verify starts blue
+      const beforeScreenshot = await element(
+        by.id('named-group-child-no-transition')
+      ).takeScreenshot('group3-before')
+      const beforeColor = getDominantColor(beforeScreenshot)
+      assert.ok(
+        isBlueish(beforeColor),
+        `Expected blue before tap, got ${formatRGB(beforeColor)}`
+      )
+
+      // tap the group
+      await element(by.id('named-group-no-transition')).tap()
+      await new Promise((r) => setTimeout(r, 100))
+
+      // verify returns to blue after release
+      const afterScreenshot = await element(
+        by.id('named-group-child-no-transition')
+      ).takeScreenshot('group3-after')
+      const afterColor = getDominantColor(afterScreenshot)
+      assert.ok(
+        isBlueish(afterColor),
+        `Expected blue after tap, got ${formatRGB(afterColor)}`
+      )
+
+      // verify press events fired
+      await expect(element(by.id('group3-press-in'))).toHaveText('In: 1')
+      await expect(element(by.id('group3-press-out'))).toHaveText('Out: 1')
+    })
+  })
+
+  describe('named group with transition', () => {
+    it('should show blue at rest and return to blue after press', async () => {
+      // verify starts blue
+      const beforeScreenshot = await element(
+        by.id('named-group-child-with-transition')
+      ).takeScreenshot('group4-before')
+      const beforeColor = getDominantColor(beforeScreenshot)
+      assert.ok(
+        isBlueish(beforeColor),
+        `Expected blue before tap, got ${formatRGB(beforeColor)}`
+      )
+
+      // tap the group
+      await element(by.id('named-group-with-transition')).tap()
+      // wait a bit for animation to settle
+      await new Promise((r) => setTimeout(r, 200))
+
+      // verify returns to blue after release
+      const afterScreenshot = await element(
+        by.id('named-group-child-with-transition')
+      ).takeScreenshot('group4-after')
+      const afterColor = getDominantColor(afterScreenshot)
+      assert.ok(
+        isBlueish(afterColor),
+        `Expected blue after tap, got ${formatRGB(afterColor)}`
+      )
+
+      // verify press events fired
+      await expect(element(by.id('group4-press-in'))).toHaveText('In: 1')
+      await expect(element(by.id('group4-press-out'))).toHaveText('Out: 1')
+    })
+  })
+})

package/e2e/MediaQueryGtMd.test.ts

@@ -0,0 +1,71 @@
+/**
+ * Detox E2E Test for Media Query Regression (Issue starting in v1.132.17)
+ *
+ * Tests that $md and $gtMd media queries correctly apply based on screen size.
+ *
+ * Bug: On small screens (iPhone ~390px), $gtMd styles were incorrectly applying
+ * when they should not. Only $md should apply on mobile devices.
+ *
+ * Breakpoints:
+ * - md: maxWidth 1020 (matches when width <= 1020)
+ * - gtMd: minWidth 1021 (matches when width > 1020)
+ *
+ * Note: Detox doesn't have built-in style inspection, so this test:
+ * 1. Verifies elements render correctly
+ * 2. Takes screenshots for visual verification
+ * 3. Future: Could use pixel sampling to verify actual colors
+ */
+
+import { by, device, element, expect } from 'detox'
+import { navigateToTestCase } from './utils/navigation'
+
+describe('MediaQueryGtMd', () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+
+  beforeEach(async () => {
+    await device.reloadReactNative()
+    await navigateToTestCase('MediaQueryGtMd', 'media-test-both')
+  })
+
+  it('should render all media query test elements', async () => {
+    // Verify all test elements are visible
+    await expect(element(by.id('media-test-both'))).toBeVisible()
+    await expect(element(by.id('media-test-gtmd-only'))).toBeVisible()
+    await expect(element(by.id('media-test-md-only'))).toBeVisible()
+    await expect(element(by.id('media-test-all'))).toBeVisible()
+  })
+
+  it('should have correct media query state - tests both TRUE and FALSE cases', async () => {
+    // On iPhone (~390px width), we verify the useMedia() hook returns correct values.
+    // This tests BOTH truthy and falsy breakpoints on the same device:
+    //
+    // TRUE cases (breakpoint matches):
+    // - sm: true (maxWidth 800, 390 <= 800) ✓
+    // - md: true (maxWidth 1020, 390 <= 1020) ✓
+    //
+    // FALSE cases (breakpoint does NOT match):
+    // - gtMd: false (minWidth 1021, 390 >= 1021 is false) ✓
+
+    // Test TRUE case: md should be true on mobile
+    await expect(element(by.id('media-state-md'))).toHaveText('md: true')
+
+    // Test FALSE case: gtMd should be false on mobile
+    // THIS IS THE KEY REGRESSION TEST - bug was gtMd incorrectly returning true
+    await expect(element(by.id('media-state-gtMd'))).toHaveText('gtMd: false')
+
+    // Test another TRUE case: sm should be true
+    await expect(element(by.id('media-state-sm'))).toHaveText('sm: true')
+  })
+
+  it('should take screenshot for visual verification', async () => {
+    // Take a screenshot for visual regression testing
+    // On iPhone:
+    // - media-test-both: should be YELLOW (not green) - $md applies, not $gtMd
+    // - media-test-gtmd-only: should be RED - $gtMd doesn't match
+    // - media-test-md-only: should be YELLOW - $md applies
+    // - media-test-all: should be YELLOW - $md has priority over $sm
+    await device.takeScreenshot('media-query-mobile')
+  })
+})