### Implement User Actions with Tuya Button Component

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

Demonstrates various styles, sizes, and states of the Tuya Button component for user interactions. Includes examples for primary, default, warn, plain, loading, mini, and special-purpose buttons like share and get user info.

```xml
<view class="button-group">
  <button type="primary" bindtap="handleSubmit">Submit</button>
  <button type="default" bindtap="handleCancel">Cancel</button>
  <button type="warn" bindtap="handleDelete">Delete</button>
  <button plain="{{true}}" bindtap="handleSecondary">Secondary</button>
  <button loading="{{isLoading}}" disabled="{{isLoading}}">
    {{isLoading ? 'Processing...' : 'Process'}}
  </button>
  <button size="mini" bindtap="handleMiniAction">Mini Button</button>
  <button open-type="share">Share</button>
  <button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">
    Get User Info
  </button>
</view>
```

--------------------------------

### Capture Single-Line Text with Tuya Input Component

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

Provides examples of the Tuya Input component for single-line text entry. Covers different input types (text, password, digit), placeholders, character limits, and event handling for input and confirmation.

```xml
<view class="form">
  <view class="form-item">
    <text>Device Name:</text>
    <input
      value="{{deviceName}}"
      placeholder="Enter device name"
      maxlength="20"
      bindinput="onDeviceNameInput"
      bindconfirm="onConfirm"/>
  </view>
  <view class="form-item">
    <text>Password:</text>
    <input
      type="password"
      value="{{password}}"
      placeholder="Enter password"
      password="{{true}}"
      bindinput="onPasswordInput"/>
  </view>
  <view class="form-item">
    <text>Temperature:</text>
    <input
      type="digit"
      value="{{temperature}}"
      placeholder="0"
      bindinput="onTemperatureInput"/>
  </view>
  <view class="form-item">
    <text>Email:</text>
    <input
      type="text"
      value="{{email}}"
      placeholder="user@example.com"
      confirm-type="done"
      bindinput="onEmailInput"
      bindblur="validateEmail"/>
  </view>
</view>
```

--------------------------------

### Embedded Web Page - JavaScript for Communication

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

This snippet illustrates a JavaScript example for a web page embedded within a miniapp using the WebView component. It shows how to send messages to the miniapp, navigate back, and navigate to other miniapp pages using the `wx.miniProgram` API.

```javascript
// Send message to miniapp
wx.miniProgram.postMessage({
  data: {
    action: 'control',
    data: { deviceId: '123', command: 'turnOn' }
  }
})

// Navigate back
wx.miniProgram.navigateBack()

// Navigate to miniapp page
wx.miniProgram.navigateTo({
  url: '/pages/device/detail?id=123'
})
```

--------------------------------

### Camera Component for Photo and Video Capture

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

The system camera component allows for capturing photos and recording videos. It offers control over flash mode, camera facing direction, and provides event callbacks for initialization, stopping, errors, and scan codes. Includes example JavaScript for controlling camera actions.

```xml
<camera
  device-position="{{cameraPosition}}"
  flash="{{flashMode}}"
  frame-size="medium"
  bindstop="onCameraStop"
  binderror="onCameraError"
  bindinitialized="onCameraInit"
  bindscancode="onScanCode"
  style="width: 100%; height: 500px;">
</camera>

<view class="camera-controls">
  <button bindtap="takePhoto">Take Photo</button>
  <button bindtap="startRecord">Start Recording</button>
  <button bindtap="stopRecord">Stop Recording</button>
  <button bindtap="switchCamera">Switch Camera</button>
  <button bindtap="toggleFlash">Toggle Flash</button>
</view>

<!-- In page.js -->
Page({
  data: {
    cameraPosition: 'back',
    flashMode: 'off'
  },
  onReady() {
    this.cameraContext = wx.createCameraContext()
  },
  takePhoto() {
    this.cameraContext.takePhoto({
      quality: 'high',
      success: (res) => {
        console.log('Photo path:', res.tempImagePath)
        this.setData({ photoPath: res.tempImagePath })
      },
      fail: (err) => {
        console.error('Take photo failed:', err)
      }
    })
  },
  startRecord() {
    this.cameraContext.startRecord({
      success: () => {
        console.log('Recording started')
      }
    })
  },
  stopRecord() {
    this.cameraContext.stopRecord({
      success: (res) => {
        console.log('Video path:', res.tempVideoPath)
        this.setData({ videoPath: res.tempVideoPath })
      }
    })
  },
  switchCamera() {
    this.setData({
      cameraPosition: this.data.cameraPosition === 'back' ? 'front' : 'back'
    })
  }
})
```

--------------------------------

### CoverView for Overlays on Native Components - Tuya XML

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

The CoverView component is designed for overlaying content on native components like video, map, and camera. It allows for custom controls and text positioned directly above these native elements, as shown in this video control example.

```xml
<video id="myVideo" src="{{videoUrl}}" style="width: 100%; height: 300px;">
  <cover-view class="video-controls">
    <cover-view class="control-btn" bindtap="togglePlay">
      <text>{{playing ? 'Pause' : 'Play'}}</text>
    </cover-view>
    <cover-view class="video-title">
      <text>Device Installation Guide</text>
    </cover-view>
  </cover-view>
</video>
```

--------------------------------

### IPC Player Component for Smart Camera Feeds

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

This component is designed for streaming and controlling IP camera feeds. It supports features like PTZ control, different stream types (HD/SD), and provides event handlers for playback and specific camera actions like snapshots. Includes example JavaScript for basic control.

```xml
<ipc-player
  device-id="{{ipcDeviceId}}"
  stream-type="{{streamType}}"
  controls="{{true}}"
  autoplay="{{true}}"
  muted="{{false}}"
  show-fullscreen-btn="{{true}}"
  enable-ptz="{{true}}"
  bindplay="onIpcPlay"
  bindpause="onIpcPause"
  binderror="onIpcError"
  bindptzcontrol="onPtzControl"
  style="width: 100%; height: 400px;">
</ipc-player>

<view class="ipc-controls">
  <button bindtap="switchHD">HD Stream</button>
  <button bindtap="switchSD">SD Stream</button>
  <button bindtap="snapshot">Take Snapshot</button>
  <button bindtap="enableTwoWay">Two-Way Audio</button>
</view>

<!-- In page.js -->
Page({
  data: {
    ipcDeviceId: 'device_123456',
    streamType: 'hd'
  },
  onIpcPlay() {
    console.log('IPC playback started')
  },
  switchHD() {
    this.setData({ streamType: 'hd' })
  },
  switchSD() {
    this.setData({ streamType: 'sd' })
  }
})
```

--------------------------------

### Display System Icons with Tuya Icon Component

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

Demonstrates how to display standard system icons using the Tuya Icon component. It shows various icon types and how to set their size and color.

```xml
<view class="icon-group">
  <icon type="success" size="32" color="#52c41a"/>
  <icon type="info" size="32" color="#1890ff"/>
  <icon type="warn" size="32" color="#faad14"/>
  <icon type="cancel" size="32" color="#f5222d"/>
  <icon type="download" size="32" color="#722ed1"/>
  <icon type="search" size="32" color="#13c2c2"/>
</view>
```

--------------------------------

### WebView Component - XML and JavaScript for Miniapp

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

This snippet shows the XML structure for the WebView component and the corresponding JavaScript logic in a miniapp's page.js file. It demonstrates how to initialize the web URL, handle messages received from the embedded web page, and manage load and error events.

```xml
<web-view
  src="{{webUrl}}"
  bindmessage="onWebMessage"
  binderror="onWebError"
  bindload="onWebLoad">
</web-view>
```

```javascript
Page({
  data: {
    webUrl: 'https://example.com/device-dashboard'
  },
  onLoad(options) {
    if (options.url) {
      this.setData({
        webUrl: decodeURIComponent(options.url)
      })
    }
  },
  onWebMessage(e) {
    console.log('Message from web:', e.detail.data)
    // Handle messages from web page
    const messages = e.detail.data
    messages.forEach(msg => {
      if (msg.action === 'control') {
        this.handleDeviceControl(msg.data)
      }
    })
  },
  onWebLoad(e) {
    console.log('Web page loaded')
  },
  onWebError(e) {
    console.error('Web page error:', e.detail)
  }
})
```

--------------------------------

### Visualize Task Progress with Tuya Progress Component

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

Illustrates the usage of the Tuya Progress component to visualize task completion and loading states. It supports dynamic updates of progress percentage and visual customization.

```xml
<view class="progress-container">
  <view class="progress-item">
    <text>Download Progress</text>
    <progress
      percent="{{downloadPercent}}"
      show-info="{{true}}"
      border-radius="5"
      font-size="14"
      stroke-width="6"
      activeColor="#1890ff"
      backgroundColor="#f0f0f0"/>
  </view>
  <view class="progress-item">
    <text>Upload Progress (Active)</text>
    <progress
      percent="{{uploadPercent}}"
      active="{{true}}"
      active-mode="forwards"
      show-info="{{true}}"/>
  </view>
</view>
```

--------------------------------

### Image Display with Options (XML & JS)

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

An image component for displaying images with various resize modes, lazy loading, and error handling. It includes attributes for controlling image display behavior, handling load/error events, and enabling context menus. Requires XML for image structure and JavaScript for event handling and data binding.

```xml
<view class="image-gallery">
  <image
    src="{{deviceImage}}"
    mode="aspectFill"
    lazy-load="{{true}}"
    show-menu-by-longpress="{{true}}"
    bindload="onImageLoad"
    binderror="onImageError"
    bindtap="onImageTap"
    class="device-image"/>
  <image
    src="{{qrCode}}"
    mode="widthFix"
    style="width: 200px;"
    class="qr-code"/>
  <image
    src="{{thumbnail}}"
    mode="aspectFit"
    webp="{{true}}"
    class="thumbnail"/>
</view>
```

```javascript
Page({
  data: {
    deviceImage: '/images/device.jpg',
    qrCode: 'https://example.com/qr.png',
    thumbnail: '/images/thumb.webp'
  },
  onImageLoad(e) {
    console.log('Image loaded:', e.detail)
  },
  onImageError(e) {
    console.error('Image error:', e.detail.errMsg)
    this.setData({ deviceImage: '/images/default.png' })
  }
})
```

--------------------------------

### Native Video Component for Optimized Playback

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

This component provides a native video player optimized for platform-specific performance, ensuring high-quality video playback. It supports standard video attributes and event bindings for playback control.

```xml
<native-video
  src="{{videoUrl}}"
  poster="{{posterUrl}}"
  controls="{{true}}"
  autoplay="{{false}}"
  loop="{{false}}"
  muted="{{false}}"
  show-center-play-btn="{{true}}"
  show-fullscreen-btn="{{true}}"
  enable-progress-gesture="{{true}}"
  bindplay="onPlay"
  bindpause="onPause"
  bindended="onEnded"
  binderror="onError"
  style="width: 100%; height: 400px;">
</native-video>
```

--------------------------------

### Render Formatted Content with Tuya RichText Component

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

Shows how to use the Tuya RichText component to render HTML content. This allows for displaying formatted text, including headings, paragraphs, lists, and inline styles.

```xml
<rich-text
  nodes="{{htmlContent}}"
  space="nbsp"
  bindtap="onRichTextTap">
</rich-text>

<!-- In page.js -->
Page({
  data: {
    htmlContent: "
      <div class=\"content\">
        <h2>Device Setup Instructions</h2>
        <p>Follow these steps to configure your device:</p>
        <ol>
          <li><strong>Power on</strong> the device</li>
          <li>Open the <em>Tuya Smart</em> app</li>
          <li>Tap <code>Add Device</code></li>
        </ol>
        <p style=\"color: #1890ff;\">Complete setup within 2 minutes</p>
      </div>
    "
  }
})
```

--------------------------------

### Switch for Binary States (XML)

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

A toggle switch component for managing binary on/off states. It allows for customization of colors and can be disabled based on other conditions. Ideal for controlling features like WiFi, Bluetooth, or automatic modes.

```xml
<view class="switch-container">
  <view class="switch-item">
    <text>WiFi</text>
    <switch
      checked="{{wifiEnabled}}"
      color="#1890ff"
      bindchange="onWifiChange"/>
  </view>
  <view class="switch-item">
    <text>Bluetooth</text>
    <switch
      checked="{{bluetoothEnabled}}"
      color="#52c41a"
      bindchange="onBluetoothChange"/>
  </view>
  <view class="switch-item">
    <text>Auto Mode</text>
    <switch
      checked="{{autoMode}}"
      disabled="{{!wifiEnabled}}"
      color="#722ed1"
      bindchange="onAutoModeChange"/>
  </view>
</view>
```

--------------------------------

### Text Component for Displaying Text - Tuya XML

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

The Text component is used for rendering text content in Tuya miniapps. It supports features like selectable text, rich formatting, decode for HTML entities, and dynamic styling based on component state.

```xml
<view class="text-container">
  <text class="title">Smart Home Control</text>
  <text selectable="{{true}}" class="description">
    Control your devices from anywhere. Long press to select and copy this text.
  </text>
  <text decode="{{true}}" class="info">
    Temperature: 24&deg;C&nbsp;&nbsp;&nbsp;Humidity: 65%
  </text>
  <text class="status {{deviceOnline ? 'online' : 'offline'}}">
    {{deviceOnline ? '● Online' : '● Offline'}}
  </text>
</view>
```

--------------------------------

### Basic View Component for Layout - Tuya XML

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

The View component serves as a fundamental layout container for structuring content and organizing UI elements hierarchically in Tuya miniapps. It accepts class names for styling and can contain other components.

```xml
<view class="container">
  <view class="header">
    <text>Device Control Panel</text>
  </view>
  <view class="content">
    <view class="device-item">
      <text>Smart Light</text>
      <switch checked="{{lightOn}}" bindchange="toggleLight"/>
    </view>
  </view>
</view>
```

--------------------------------

### Map Component: Displaying Locations and Routes with Tuya Map

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

Renders an interactive map using the Tuya Map component. It supports displaying markers, polylines for routes, and circles for defined areas. The component is configurable with various properties like longitude, latitude, scale, and event handlers for user interactions such as marker taps and region changes. Dependencies include a valid Tuya environment and image assets for markers and controls.

```xml
<map
  id="deviceMap"
  longitude="{{longitude}}"
  latitude="{{latitude}}"
  scale="{{mapScale}}"
  markers="{{markers}}"
  polyline="{{polylines}}"
  circles="{{circles}}"
  controls="{{controls}}"
  show-location="{{true}}"
  enable-zoom="{{true}}"
  enable-scroll="{{true}}"
  enable-rotate="{{true}}"
  bindmarkertap="onMarkerTap"
  bindcontroltap="onControlTap"
  bindregionchange="onRegionChange"
  bindupdated="onMapUpdated"
  style="width: 100%; height: 500px;">
</map>
```

```javascript
Page({
  data: {
    longitude: 120.131441,
    latitude: 30.279383,
    mapScale: 16,
    markers: [
      {
        id: 1,
        longitude: 120.131441,
        latitude: 30.279383,
        iconPath: '/images/marker.png',
        width: 30,
        height: 30,
        title: 'Device Location',
        callout: {
          content: 'Smart Gateway\nOnline',
          fontSize: 14,
          borderRadius: 5,
          padding: 10,
          display: 'ALWAYS'
        }
      },
      {
        id: 2,
        longitude: 120.135,
        latitude: 30.280,
        iconPath: '/images/marker-offline.png',
        width: 30,
        height: 30
      }
    ],
    polylines: [
      {
        points: [
          { longitude: 120.131441, latitude: 30.279383 },
          { longitude: 120.135, latitude: 30.280 }
        ],
        color: '#1890ff',
        width: 4,
        dottedLine: false
      }
    ],
    circles: [
      {
        longitude: 120.131441,
        latitude: 30.279383,
        radius: 500,
        color: '#1890ff33',
        fillColor: '#1890ff11',
        strokeWidth: 2
      }
    ],
    controls: [
      {
        id: 1,
        position: { left: 10, top: 10, width: 50, height: 50 },
        iconPath: '/images/location.png',
        clickable: true
      }
    ]
  },
  onMarkerTap(e) {
    console.log('Marker tapped:', e.detail.markerId)
  },
  onControlTap(e) {
    console.log('Control tapped:', e.detail.controlId)
    if (e.detail.controlId === 1) {
      this.moveToMyLocation()
    }
  },
  moveToMyLocation() {
    this.mapContext = wx.createMapContext('deviceMap', this)
    this.mapContext.moveToLocation()
  }
})
```

--------------------------------

### Handle Multi-Line Text with Tuya Textarea Component

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

Showcases the Tuya Textarea component for multi-line text input. It supports character counting, auto-height adjustment, cursor spacing, and various input event handlers.

```xml
<view class="textarea-container">
  <textarea
    value="{{description}}"
    placeholder="Enter device description..."
    maxlength="500"
    show-confirm-bar="{{true}}"
    cursor-spacing="50"
    auto-height="{{true}}"
    bindinput="onDescriptionInput"
    bindfocus="onFocus"
    bindblur="onBlur"
    bindconfirm="onConfirm"
    bindlinechange="onLineChange"/>
  <view class="char-count">{{description.length}}/500</view>
</view>
```

--------------------------------

### PageContainer for Modals and Overlays - Tuya XML

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

The PageContainer component manages full-screen overlays and modal presentations with animation support. It controls visibility, position, and overlay behavior, triggering various lifecycle events during its presentation and dismissal.

```xml
<page-container
  show="{{showModal}}"
  duration="300"
  position="center"
  overlay="{{true}}"
  bindbeforeenter="onBeforeEnter"
  bindenter="onEnter"
  bindafterenter="onAfterEnter"
  bindbeforeleave="onBeforeLeave"
  bindleave="onLeave"
  bindafterleave="onAfterLeave"
  bindclickoverlay="closeModal">
  <view class="modal-content">
    <text>Modal Content</text>
    <button bindtap="closeModal">Close</button>
  </view>
</page-container>
```

--------------------------------

### Video Player Component with Custom Controls

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

A versatile video player component supporting custom controls, event handling for playback states, and playback management. It utilizes a standard video tag with various attributes for configuration and event binding.

```xml
<video
  id="deviceVideo"
  src="{{videoSrc}}"
  poster="{{videoPoster}}"
  controls="{{true}}"
  autoplay="{{false}}"
  loop="{{false}}"
  muted="{{false}}"
  initial-time="0"
  duration=""
  show-center-play-btn="{{true}}"
  show-play-btn="{{true}}"
  show-fullscreen-btn="{{true}}"
  enable-progress-gesture="{{true}}"
  object-fit="contain"
  bindplay="onVideoPlay"
  bindpause="onVideoPause"
  bindended="onVideoEnded"
  bindtimeupdate="onTimeUpdate"
  bindfullscreenchange="onFullscreenChange"
  binderror="onVideoError"
  style="width: 100%; height: 300px;">
</video>

<!-- In page.js -->
Page({
  data: {
    videoSrc: 'https://example.com/device-setup.mp4',
    videoPoster: '/images/video-poster.jpg'
  },
  onReady() {
    this.videoContext = wx.createVideoContext('deviceVideo', this)
  },
  controlVideo() {
    this.videoContext.play()
    setTimeout(() => {
      this.videoContext.pause()
      this.videoContext.seek(10)
    }, 3000)
  }
})
```

--------------------------------

### PickerView for Time Selection (XML & JS)

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

Implements an embedded scrollable picker for selecting time values (hours, minutes, seconds). It requires XML for the picker structure and JavaScript for data handling and change events. The component displays the selected time and allows for programmatic updates.

```xml
<picker-view
  indicator-style="height: 50px;"
  value="{{pickerValue}}"
  bindchange="onPickerChange"
  style="width: 100%; height: 300px;">
  <picker-view-column>
    <view wx:for="{{hours}}" wx:key="*this" class="picker-item">
      {{item}}时
    </view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{minutes}}" wx:key="*this" class="picker-item">
      {{item}}分
    </view>
  </picker-view-column>
  <picker-view-column>
    <view wx:for="{{seconds}}" wx:key="*this" class="picker-item">
      {{item}}秒
    </view>
  </picker-view-column>
</picker-view>
```

```javascript
Page({
  data: {
    pickerValue: [0, 0, 0],
    hours: Array.from({length: 24}, (_, i) => i.toString().padStart(2, '0')),
    minutes: Array.from({length: 60}, (_, i) => i.toString().padStart(2, '0')),
    seconds: Array.from({length: 60}, (_, i) => i.toString().padStart(2, '0'))
  },
  onPickerChange(e) {
    const val = e.detail.value
    this.setData({ pickerValue: val })
    console.log(`Selected time: ${this.data.hours[val[0]]}:${this.data.minutes[val[1]]}:${this.data.seconds[val[2]]}`)
  }
})
```

--------------------------------

### Slider for Value Selection (XML)

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

Provides a slide selector component for choosing numeric values within a defined range. It supports customization of min/max values, step, color, and displays the selected value. Useful for adjusting settings like brightness or temperature.

```xml
<view class="slider-container">
  <view class="slider-section">
    <text>Brightness: {{brightness}}%</text>
    <slider
      value="{{brightness}}"
      min="0"
      max="100"
      step="1"
      show-value="{{true}}"
      activeColor="#1890ff"
      backgroundColor="#d9d9d9"
      block-size="28"
      bindchange="onBrightnessChange"
      bindchanging="onBrightnessChanging"/>
  </view>
  <view class="slider-section">
    <text>Temperature: {{temperature}}°C</text>
    <slider
      value="{{temperature}}"
      min="16"
      max="32"
      step="0.5"
      show-value="{{true}}"
      activeColor="#ff4d4f"
      bindchange="onTemperatureChange"/>
  </view>
</view>
```

--------------------------------

### Canvas Component: Drawing Charts Programmatically with Tuya Canvas

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

Utilizes the Tuya Canvas component to draw custom graphics, specifically a temperature chart. This involves obtaining the canvas node and context, scaling for pixel ratio, and then using canvas API calls to draw axes, data lines, and points. Event listeners for touch gestures can be attached for interactive elements. Dependencies include the Tuya environment and access to system information for pixel ratio.

```xml
<canvas
  canvas-id="deviceChart"
  id="deviceChart"
  type="2d"
  style="width: 100%; height: 400px;"
  bindtouchstart="onCanvasTouchStart"
  bindtouchmove="onCanvasTouchMove"
  bindtouchend="onCanvasTouchEnd">
</canvas>
```

```javascript
Page({
  onReady() {
    this.drawChart()
  },
  drawChart() {
    const query = wx.createSelectorQuery()
    query.select('#deviceChart')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)

        // Draw temperature chart
        const data = [22, 24, 23, 25, 26, 28, 27, 26, 24, 23]
        const width = res[0].width
        const height = res[0].height
        const padding = 40
        const chartWidth = width - 2 * padding
        const chartHeight = height - 2 * padding

        // Draw axes
        ctx.strokeStyle = '#333'
        ctx.lineWidth = 2
        ctx.beginPath()
        ctx.moveTo(padding, padding)
        ctx.lineTo(padding, height - padding)
        ctx.lineTo(width - padding, height - padding)
        ctx.stroke()

        // Draw data line
        ctx.strokeStyle = '#1890ff'
        ctx.lineWidth = 3
        ctx.beginPath()
        data.forEach((value, index) => {
          const x = padding + (chartWidth / (data.length - 1)) * index
          const y = height - padding - ((value - 20) / 10) * chartHeight
          if (index === 0) {
            ctx.moveTo(x, y)
          } else {
            ctx.lineTo(x, y)
          }
        })
        ctx.stroke()

        // Draw data points
        ctx.fillStyle = '#1890ff'
        data.forEach((value, index) => {
          const x = padding + (chartWidth / (data.length - 1)) * index
          const y = height - padding - ((value - 20) / 10) * chartHeight
          ctx.beginPath()
          ctx.arc(x, y, 4, 0, 2 * Math.PI)
          ctx.fill()
        })

        // Draw labels
        ctx.fillStyle = '#666'
        ctx.font = '12px sans-serif'
        ctx.textAlign = 'center'
        data.forEach((value, index) => {
          const x = padding + (chartWidth / (data.length - 1)) * index
          ctx.fillText(value + '°C', x, height - padding + 20)
        })
      })
  }
})
```

--------------------------------

### MovableArea and MovableView for Draggable Elements - Tuya XML

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

The MovableArea and MovableView components create a system for draggable UI elements within specified boundaries. MovableView supports directional movement, inertia, and boundary constraints, with change events for tracking position.

```xml
<movable-area style="height: 400px; width: 400px; background: #f0f0f0;">
  <movable-view
    x="{{x}}"
    y="{{y}}"
    direction="all"
    inertia="{{true}}"
    out-of-bounds="{{false}}"
    bindchange="onMove"
    style="height: 80px; width: 80px; background: #1890ff;">
    <text>Drag Me</text>
  </movable-view>
</movable-area>
```

--------------------------------

### Form Component for Input and Submission (XML)

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

A form container component for grouping input elements and managing form submission with validation. It includes input fields, a picker for selection, a switch for boolean options, and buttons for submit and reset actions. This component is typically used with an associated JavaScript file to handle form data and events.

```xml
<form bindsubmit="onFormSubmit" bindreset="onFormReset">
  <view class="form-section">
    <view class="form-group">
      <view class="form-label">Device Name:</view>
      <input name="deviceName" value="{{formData.deviceName}}" placeholder="Enter name"/>
    </view>
    <view class="form-group">
      <view class="form-label">Device Type:</view>
      <picker name="deviceType" value="{{typeIndex}}" range="{{deviceTypes}}" bindchange="onTypeChange">
        <view class="picker">{{deviceTypes[typeIndex]}}</view>
      </picker>
    </view>
    <view class="form-group">
      <view class="form-label">Enable Notifications:</view>
      <switch name="notifications" checked="{{formData.notifications}}"/>
    </view>
  </view>
  <view class="form-actions">
    <button formType="submit" type="primary">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>
```

--------------------------------

### Picker Component for Various Selections (XML)

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

A versatile component that provides a bottom sheet scrollable selector. It supports multiple modes including 'selector' for single item selection from a list, 'multiSelector' for multi-column selections, 'time' for time input, and 'date' for date input. Each mode requires specific data bindings and event handlers.

```xml
<!-- Selector Picker -->
<picker
  mode="selector"
  range="{{devices}}"
  range-key="name"
  value="{{deviceIndex}}"
  bindchange="onDeviceChange">
  <view class="picker-display">
    Device: {{devices[deviceIndex].name}}
  </view>
</picker>

<!-- Multi-column Picker -->
<picker
  mode="multiSelector"
  range="{{multiArray}}"
  value="{{multiIndex}}"
  bindchange="onMultiChange"
  bindcolumnchange="onColumnChange">
  <view class="picker-display">
    {{multiArray[0][multiIndex[0]]}} - {{multiArray[1][multiIndex[1] ]}}
  </view>
</picker>

<!-- Time Picker -->
<picker
  mode="time"
  value="{{time}}"
  start="00:00"
  end="23:59"
  bindchange="onTimeChange">
  <view class="picker-display">
    Schedule Time: {{time}}
  </view>
</picker>

<!-- Date Picker -->
<picker
  mode="date"
  value="{{date}}"
  start="2024-01-01"
  end="2025-12-31"
  fields="day"
  bindchange="onDateChange">
  <view class="picker-display">
    Date: {{date}}
  </view>
</picker>
```

--------------------------------

### Checkbox Group for Multiple Selections (XML & JS)

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

Allows users to select one or more options from a list. The component renders a list of checkboxes, and an associated JavaScript function handles the selection changes and updates the application state. It utilizes data binding to display and manage the checked status of each item.

```xml
<checkbox-group bindchange="onCheckboxChange">
  <label class="checkbox-item" wx:for="{{features}}" wx:key="id">
    <checkbox value="{{item.id}}" checked="{{item.checked}}"/>
    <text>{{item.name}}</text>
  </label>
</checkbox-group>
```

```javascript
Page({
  data: {
    features: [
      { id: 'wifi', name: 'WiFi Control', checked: true },
      { id: 'bluetooth', name: 'Bluetooth', checked: false },
      { id: 'voice', name: 'Voice Control', checked: true },
      { id: 'schedule', name: 'Schedule', checked: false }
    ]
  },
  onCheckboxChange(e) {
    const values = e.detail.value
    console.log('Selected features:', values)
    // Update feature states based on selection
    this.setData({
      features: this.data.features.map(item => ({
        ...item,
        checked: values.includes(item.id)
      }))
    })
  }
})
```

--------------------------------

### Swiper Component for Carousels - Tuya XML

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

The Swiper component facilitates the creation of image carousels and galleries with options for automatic or manual navigation. It supports indicators, autoplay, interval timing, duration, and circular mode.

```xml
<swiper
  indicator-dots="{{true}}"
  autoplay="{{true}}"
  interval="3000"
  duration="500"
  circular="{{true}}"
  bindchange="onSwiperChange">
  <swiper-item>
    <image src="/images/device1.png" mode="aspectFill"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/device2.png" mode="aspectFill"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/device3.png" mode="aspectFill"/>
  </swiper-item>
</swiper>
```

--------------------------------

### Label for Form Usability (XML)

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

A label wrapper component designed to enhance the usability of form elements by extending their clickable areas. It can be associated with checkboxes, switches, or input fields, improving user interaction, especially on touch devices.

```xml
<view class="settings-list">
  <label class="setting-item">
    <checkbox value="notifications"/>
    <view class="setting-content">
      <text class="setting-title">Push Notifications</text>
      <text class="setting-desc">Receive alerts when device status changes</text>
    </view>
  </label>
  <label class="setting-item">
    <switch checked="{{autoUpdate}}"/>
    <view class="setting-content">
      <text class="setting-title">Auto Update</text>
      <text class="setting-desc">Automatically update firmware when available</text>
    </view>
  </label>
  <label class="setting-item" for="deviceName">
    <text class="setting-title">Device Name:</text>
    <input id="deviceName" value="{{deviceName}}" placeholder="Enter name"/>
  </label>
</view>
```

--------------------------------

### Radio Group for Single Selection (XML & JS)

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

Enables users to select exactly one option from a list of choices. This component displays radio buttons, and its associated JavaScript handler captures the selected value and updates the UI or application logic accordingly. Data binding is used to manage the selected state.

```xml
<radio-group bindchange="onRadioChange">
  <label class="radio-item" wx:for="{{modes}}" wx:key="id">
    <radio value="{{item.id}}" checked="{{item.id === selectedMode}}"/>
    <view class="radio-content">
      <text class="radio-title">{{item.name}}</text>
      <text class="radio-desc">{{item.description}}</text>
    </view>
  </label>
</radio-group>
```

```javascript
Page({
  data: {
    selectedMode: 'auto',
    modes: [
      { id: 'auto', name: 'Auto Mode', description: 'Automatically adjust based on conditions' },
      { id: 'manual', name: 'Manual Mode', description: 'Full manual control' },
      { id: 'eco', name: 'Eco Mode', description: 'Energy saving mode' },
      { id: 'sleep', name: 'Sleep Mode', description: 'Quiet operation for night time' }
    ]
  },
  onRadioChange(e) {
    const modeId = e.detail.value
    this.setData({ selectedMode: modeId })
    console.log('Selected mode:', modeId)
    this.applyMode(modeId)
  }
})
```

--------------------------------

### ScrollView Component for Scrolling Content - Tuya XML

Source: https://context7.com/context7/v0-tuya-component-documentation_vercel_app/llms.txt

The ScrollView component enables vertical or horizontal scrolling for content that exceeds the viewport dimensions. It supports custom heights, scroll events, and thresholds for detecting scroll start/end.

```xml
<scroll-view
  scroll-y="true"
  style="height: 500px;"
  bindscrolltoupper="onScrollToUpper"
  bindscrolltolower="onScrollToLower"
  upper-threshold="50"
  lower-threshold="50">
  <view wx:for="{{deviceList}}" wx:key="id" class="device-card">
    <text>{{item.name}}</text>
    <text>Status: {{item.status}}</text>
  </view>
</scroll-view>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.