zui 0.0.1

data/Components/Builtins/PauseAnimation.qml

@@ -0,0 +1,3 @@
+import QtQuick
+import "Support" as Support
+Support.AnimationDriver { renderer: null; animationType: "pause" }

data/Components/Builtins/PieChart.qml

@@ -0,0 +1,3 @@
+import QtQuick
+import "Support" as Support
+Support.ChartCanvas { renderer: null; chartType: "pie" }

data/Components/Builtins/PinchArea.qml

@@ -0,0 +1,23 @@
+import QtQuick
+
+Item {
+  id: pinchRoot
+  property var renderer: null
+  implicitWidth: Number(renderer ? renderer.prop("width", contentHost.childrenRect.width) : 200)
+  implicitHeight: Number(renderer ? renderer.prop("height", contentHost.childrenRect.height) : 160)
+  Item { id: contentHost; anchors.fill: parent; Repeater { model: renderer ? (renderer.node.children || []) : []; delegate: renderer.childDelegateComponent } }
+  PinchHandler {
+    id: nativePinch
+    enabled: renderer && renderer.prop("enabled", true) !== false
+    target: { var id = renderer ? String(renderer.prop("target", "")) : ""; return id === "" ? contentHost : renderer.findRenderedItem(id) }
+    minimumScale: Number(renderer ? renderer.prop("minimum_scale", 0.1) : 0.1); maximumScale: Number(renderer ? renderer.prop("maximum_scale", 10) : 10)
+    minimumRotation: Number(renderer ? renderer.prop("minimum_rotation", -Infinity) : -Infinity); maximumRotation: Number(renderer ? renderer.prop("maximum_rotation", Infinity) : Infinity)
+    xAxis.minimum: Number(renderer ? renderer.prop("minimum_x", -Infinity) : -Infinity); xAxis.maximum: Number(renderer ? renderer.prop("maximum_x", Infinity) : Infinity)
+    yAxis.minimum: Number(renderer ? renderer.prop("minimum_y", -Infinity) : -Infinity); yAxis.maximum: Number(renderer ? renderer.prop("maximum_y", Infinity) : Infinity)
+    function payload() { return { scale: activeScale, rotation: activeRotation, translation_x: activeTranslation.x, translation_y: activeTranslation.y, centroid_x: centroid.position.x, centroid_y: centroid.position.y } }
+    onActiveChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, active ? "pinch_start" : "pinch_end", payload())
+    onActiveScaleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "pinch", payload())
+    onActiveRotationChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "pinch", payload())
+    onCanceled: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "cancel", {})
+  }
+}

data/Components/Builtins/Popup.qml

@@ -0,0 +1,130 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.Popup {
+  id: popupRoot
+
+  required property var renderer
+  readonly property bool requestedOpen: renderer.prop("opened", false) === true
+    && renderer.prop("visible", true) !== false
+  readonly property string contentLayout: String(renderer.prop("layout", "column"))
+
+  function closePolicyValue(value) {
+    var names = Array.isArray(value) ? value : [value || "escape_and_outside"]
+    var result = 0
+    for (var index = 0; index < names.length; index++) {
+      var name = String(names[index])
+      if (name === "escape" || name === "escape_and_outside") result |= QQC.Popup.CloseOnEscape
+      if (name === "outside" || name === "escape_and_outside") result |= QQC.Popup.CloseOnPressOutside
+      if (name === "outside_parent") result |= QQC.Popup.CloseOnPressOutsideParent
+      if (name === "release_outside") result |= QQC.Popup.CloseOnReleaseOutside
+      if (name === "release_outside_parent") result |= QQC.Popup.CloseOnReleaseOutsideParent
+    }
+    return result
+  }
+
+  function syncOpenState() {
+    if (requestedOpen === opened) return
+    if (requestedOpen) open()
+    else close()
+  }
+
+  x: Number(renderer.prop("x", 0))
+  y: Number(renderer.prop("y", 0))
+  width: Number(renderer.prop("width", 360))
+  height: Number(renderer.prop("height", 240))
+  modal: renderer.prop("modal", false) === true
+  dim: renderer.prop("dim", modal) !== false
+  focus: renderer.prop("focus", true) !== false
+  closePolicy: closePolicyValue(renderer.prop("close_policy", "escape_and_outside"))
+  enabled: renderer.prop("enabled", true) !== false
+  padding: Number(renderer.prop("padding", Style.spacing.lg))
+
+  background: Rectangle {
+    color: renderer.prop("background", Color.background)
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: String(renderer.prop("border_color", "")).length > 0 ? Style.normalBorderWidth : 0
+    border.color: renderer.prop("border_color", "transparent")
+  }
+
+  contentItem: Loader {
+    sourceComponent: popupRoot.contentLayout === "row" ? rowContent
+      : (popupRoot.contentLayout === "stack" ? stackContent : columnContent)
+  }
+
+  Component {
+    id: columnContent
+    Column {
+      spacing: Number(renderer.prop("spacing", Style.spacing.md))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  Component {
+    id: rowContent
+    Row {
+      spacing: Number(renderer.prop("spacing", Style.spacing.md))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  Component {
+    id: stackContent
+    Item {
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  enter: Transition {
+    ParallelAnimation {
+      NumberAnimation {
+        property: "opacity"; from: 0; to: 1
+        duration: renderer.prop("animated", true) !== false
+          ? Number(renderer.prop("duration", 160)) : 0
+        easing.type: renderer.easingType(renderer.prop("easing", "out_cubic"))
+      }
+      NumberAnimation {
+        property: "scale"; from: 0.96; to: 1
+        duration: renderer.prop("animated", true) !== false
+          ? Number(renderer.prop("duration", 160)) : 0
+        easing.type: renderer.easingType(renderer.prop("easing", "out_cubic"))
+      }
+    }
+  }
+  exit: Transition {
+    ParallelAnimation {
+      NumberAnimation {
+        property: "opacity"; from: 1; to: 0
+        duration: renderer.prop("animated", true) !== false
+          ? Number(renderer.prop("duration", 120)) : 0
+        easing.type: renderer.easingType(renderer.prop("easing", "in_cubic"))
+      }
+      NumberAnimation {
+        property: "scale"; from: 1; to: 0.96
+        duration: renderer.prop("animated", true) !== false
+          ? Number(renderer.prop("duration", 120)) : 0
+        easing.type: renderer.easingType(renderer.prop("easing", "in_cubic"))
+      }
+    }
+  }
+
+  Component.onCompleted: syncOpenState()
+  onRequestedOpenChanged: syncOpenState()
+  onOpened: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "open", {})
+  onClosed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "close", {})
+  onAboutToShow: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "about_to_show", {})
+  onAboutToHide: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "about_to_hide", {})
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+  onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    activeFocus ? "focus" : "blur", {})
+  onXChanged: {
+    if (renderer.subscribed("position_change"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "position_change", { x: x, y: y })
+  }
+  onYChanged: {
+    if (renderer.subscribed("position_change"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "position_change", { x: x, y: y })
+  }
+}

data/Components/Builtins/Progress.qml

@@ -0,0 +1,15 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Rectangle {
+  required property var renderer
+      property real minimum: Number(renderer.prop("minimum", 0)); property real maximum: Number(renderer.prop("maximum", 1))
+      implicitWidth: Number(renderer.prop("width", 200)); implicitHeight: Number(renderer.prop("height", 6)); radius: height / 2
+      color: Qt.rgba(renderer.foreground.r, renderer.foreground.g, renderer.foreground.b, 0.18)
+      Rectangle { width: parent.width * Math.max(0, Math.min(1, (Number(renderer.prop("value", 0)) - parent.minimum) / Math.max(0.000001, parent.maximum - parent.minimum))); height: parent.height; radius: parent.radius; color: renderer.prop("color", renderer.foreground) }
+    }

data/Components/Builtins/ProgressRing.qml

@@ -0,0 +1,120 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.Control {
+  id: ringRoot
+
+  required property var renderer
+  readonly property real minimumValue: Number(renderer.prop("minimum", 0))
+  readonly property real maximumValue: Number(renderer.prop("maximum", 1))
+  readonly property real currentValue: Number(renderer.prop("value", minimumValue))
+  readonly property bool indeterminate: renderer.prop("indeterminate", false) === true
+  readonly property real normalizedValue: Math.max(0, Math.min(1,
+    (currentValue - minimumValue) / Math.max(0.000001, maximumValue - minimumValue)))
+  readonly property color ringColor: renderer.prop("color", Color.accent)
+  readonly property color trackColor: renderer.prop("track_color",
+    Qt.rgba(ringColor.r, ringColor.g, ringColor.b, 0.2))
+  readonly property real ringThickness: Math.max(1, Number(renderer.prop("thickness", 5)))
+  readonly property real startAngle: Number(renderer.prop("start_angle", -90))
+  readonly property bool clockwise: renderer.prop("clockwise", true) !== false
+  property real displayedProgress: indeterminate ? 0.25 : normalizedValue
+
+  function labelText() {
+    var explicitLabel = String(renderer.prop("label", ""))
+    if (explicitLabel.length > 0) return explicitLabel
+    var format = String(renderer.prop("label_format", "{percent}%"))
+    return format
+      .replace(/\{percent\}/g, String(Math.round(normalizedValue * 100)))
+      .replace(/\{value\}/g, String(currentValue))
+      .replace(/\{minimum\}/g, String(minimumValue))
+      .replace(/\{maximum\}/g, String(maximumValue))
+  }
+
+  implicitWidth: Number(renderer.prop("width", renderer.prop("size", 64)))
+  implicitHeight: Number(renderer.prop("height", renderer.prop("size", 64)))
+  enabled: renderer.prop("enabled", true) !== false
+  opacity: Number(renderer.prop("opacity", enabled ? 1 : 0.5))
+  Accessible.name: String(renderer.prop("accessible_name", "Progress"))
+  Accessible.description: labelText()
+  Accessible.role: Accessible.ProgressBar
+
+  contentItem: Item {
+    Canvas {
+      id: ringCanvas
+      anchors.fill: parent
+      anchors.margins: ringRoot.ringThickness / 2
+
+      onPaint: {
+        var context = getContext("2d")
+        context.clearRect(0, 0, width, height)
+        var centerX = width / 2
+        var centerY = height / 2
+        var radius = Math.max(0, Math.min(width, height) / 2)
+        var start = ringRoot.startAngle * Math.PI / 180
+        var direction = ringRoot.clockwise ? 1 : -1
+        var end = start + direction * Math.PI * 2 * ringRoot.displayedProgress
+
+        context.lineWidth = ringRoot.ringThickness
+        context.lineCap = "round"
+        context.strokeStyle = ringRoot.trackColor
+        context.beginPath()
+        context.arc(centerX, centerY, radius, 0, Math.PI * 2, false)
+        context.stroke()
+
+        context.strokeStyle = ringRoot.ringColor
+        context.beginPath()
+        context.arc(centerX, centerY, radius, start, end, !ringRoot.clockwise)
+        context.stroke()
+      }
+    }
+
+    Text {
+      anchors.centerIn: parent
+      visible: renderer.prop("show_label", false) === true && !ringRoot.indeterminate
+      text: ringRoot.labelText()
+      color: renderer.prop("foreground", renderer.foreground)
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.caption))
+      horizontalAlignment: Text.AlignHCenter
+      verticalAlignment: Text.AlignVCenter
+    }
+  }
+
+  RotationAnimator {
+    target: ringCanvas
+    from: 0
+    to: ringRoot.clockwise ? 360 : -360
+    duration: Number(renderer.prop("duration", 900))
+    loops: Animation.Infinite
+    running: ringRoot.indeterminate && ringRoot.visible && ringRoot.enabled
+  }
+
+  Behavior on displayedProgress {
+    enabled: !ringRoot.indeterminate && renderer.prop("animated", true) !== false
+    NumberAnimation {
+      duration: Number(renderer.prop("duration", 240))
+      easing.type: renderer.easingType(renderer.prop("easing", "out_cubic"))
+    }
+  }
+
+  onNormalizedValueChanged: {
+    if (!indeterminate) displayedProgress = normalizedValue
+    ringCanvas.requestPaint()
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "value_change", {
+      value: currentValue, normalized: normalizedValue
+    })
+  }
+  onIndeterminateChanged: {
+    displayedProgress = indeterminate ? 0.25 : normalizedValue
+    ringCanvas.requestPaint()
+  }
+  onDisplayedProgressChanged: ringCanvas.requestPaint()
+  onRingColorChanged: ringCanvas.requestPaint()
+  onTrackColorChanged: ringCanvas.requestPaint()
+  onRingThicknessChanged: ringCanvas.requestPaint()
+  onStartAngleChanged: ringCanvas.requestPaint()
+  onClockwiseChanged: ringCanvas.requestPaint()
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+}

data/Components/Builtins/PropertyAction.qml

@@ -0,0 +1,11 @@
+import QtQuick
+
+Item {
+  id: actionRoot
+  property var renderer: null
+  property int handledRevision: -1
+  readonly property var targetItem: renderer ? renderer.findRenderedItem(renderer.prop("target", "")) : null
+  function run() { if (!renderer || !targetItem) return; var revision=Number(renderer.prop("revision",0));if(revision===handledRevision)return;handledRevision=revision;nativeAction.start() }
+  PropertyAction { id: nativeAction; target: actionRoot.targetItem; property: String(renderer ? renderer.prop("property", "") : ""); value: renderer ? renderer.prop("value", null) : null; onFinished: { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "apply", { property: property, value: value }); renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "finish", {}) } }
+  Component.onCompleted: run(); Connections { target: renderer; function onNodeChanged(){actionRoot.run()} }
+}

data/Components/Builtins/PropertyAnimation.qml

@@ -0,0 +1,3 @@
+import QtQuick
+import "Support" as Support
+Support.AnimationDriver { renderer: null; animationType: "property" }

data/Components/Builtins/PropertyChanges.qml

@@ -0,0 +1,10 @@
+import QtQuick
+
+Item {
+  id: changesRoot
+  property var renderer: null
+  property int handledRevision: -1
+  function apply(){if(!renderer)return;var revision=Number(renderer.prop("revision",0));if(revision===handledRevision)return;var target=renderer.findRenderedItem(renderer.prop("target",""));if(!target)return;handledRevision=revision;var values=renderer.prop("properties",{});for(var key in values)if(target.hasOwnProperty(key))target[key]=values[key];renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"apply",{properties:values,revision:revision})}
+  Connections{target:renderer;function onNodeChanged(){changesRoot.apply()}}
+  Component.onCompleted:apply()
+}

data/Components/Builtins/RadarChart.qml

@@ -0,0 +1,3 @@
+import QtQuick
+import "Support" as Support
+Support.ChartCanvas { renderer: null; chartType: "radar" }

data/Components/Builtins/RadialGauge.qml

@@ -0,0 +1,3 @@
+import QtQuick
+import "Support" as Support
+Support.ChartCanvas { renderer: null; chartType: "radial_gauge" }

data/Components/Builtins/RadioButton.qml

@@ -0,0 +1,46 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+QQC.RadioButton {
+  required property var renderer
+      id: nativeRadioButton
+      text: String(renderer.prop("label", ""))
+      checked: renderer.prop("checked", false) === true
+      enabled: renderer.prop("enabled", true) !== false
+      spacing: Number(renderer.prop("spacing", 8))
+      indicator: Rectangle {
+        implicitWidth: Number(renderer.prop("indicator_size", 20))
+        implicitHeight: implicitWidth
+        x: nativeRadioButton.leftPadding
+        y: nativeRadioButton.topPadding + (nativeRadioButton.availableHeight - height) / 2
+        radius: width / 2
+        color: renderer.prop("background", "transparent")
+        border.width: Style.normalBorderWidth
+        border.color: nativeRadioButton.checked ? renderer.prop("accent", Color.accent) : renderer.prop("foreground", renderer.foreground)
+        Rectangle {
+          anchors.centerIn: parent
+          width: parent.width * 0.5
+          height: width
+          radius: width / 2
+          visible: nativeRadioButton.checked
+          color: renderer.prop("accent", Color.accent)
+        }
+      }
+      contentItem: Text {
+        leftPadding: nativeRadioButton.indicator.width + nativeRadioButton.spacing
+        text: nativeRadioButton.text
+        textFormat: Text.PlainText
+        color: renderer.prop("foreground", renderer.foreground)
+        font.family: String(renderer.prop("font_family", renderer.fontFamily))
+        font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+        verticalAlignment: Text.AlignVCenter
+      }
+      onClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", { value: renderer.prop("value", null) })
+      onToggled: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: checked, option: renderer.prop("value", null) })
+      onHoveredChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: hovered })
+    }

data/Components/Builtins/RadioDelegate.qml

@@ -0,0 +1,115 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import "../../Theme"
+
+QQC.RadioDelegate {
+  id: radioRoot
+
+  required property var renderer
+  readonly property bool selected: renderer.prop("selected", false) === true
+  readonly property real indicatorSize: Number(renderer.prop("indicator_size", 22))
+
+  function eventPayload() {
+    return {
+      text: text,
+      value: renderer.prop("value", text),
+      checked: checked,
+      selected: selected
+    }
+  }
+
+  text: String(renderer.prop("text", ""))
+  checked: renderer.prop("checked", false) === true
+  autoExclusive: renderer.prop("auto_exclusive", true) !== false
+  highlighted: renderer.prop("highlighted", selected) === true
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  hoverEnabled: true
+  implicitWidth: Number(renderer.prop("width", 320))
+  implicitHeight: Number(renderer.prop("height", 56))
+  padding: Number(renderer.prop("padding", Style.spacing.md))
+  rightPadding: padding + indicatorSize + Number(renderer.prop("spacing", Style.spacing.md))
+  font.family: String(renderer.prop("font_family", renderer.fontFamily))
+  font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+  Accessible.name: String(renderer.prop("accessible_name", text))
+
+  background: Rectangle {
+    color: radioRoot.highlighted
+      ? renderer.prop("highlighted_background", renderer.prop("selected_background", Color.popups.background))
+      : (radioRoot.selected
+        ? renderer.prop("selected_background", Color.popups.background)
+        : renderer.prop("background", "transparent"))
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: Number(renderer.prop("border_width",
+      String(renderer.prop("border_color", "")).length > 0 ? Style.normalBorderWidth : 0))
+    border.color: renderer.prop("border_color", "transparent")
+  }
+
+  contentItem: ColumnLayout {
+    spacing: Style.spacing.xs
+
+    Text {
+      Layout.fillWidth: true
+      text: radioRoot.text
+      textFormat: Text.PlainText
+      color: radioRoot.selected
+        ? renderer.prop("selected_foreground", renderer.prop("foreground", renderer.foreground))
+        : renderer.prop("foreground", renderer.foreground)
+      font: radioRoot.font
+      elide: Text.ElideRight
+    }
+
+    Text {
+      Layout.fillWidth: true
+      visible: text.length > 0
+      text: String(renderer.prop("description", ""))
+      textFormat: Text.PlainText
+      color: renderer.prop("muted", Color.muted)
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("description_size", Style.font.caption))
+      elide: Text.ElideRight
+    }
+  }
+
+  indicator: Rectangle {
+    x: radioRoot.width - radioRoot.rightPadding + Number(renderer.prop("spacing", Style.spacing.md))
+    y: (radioRoot.height - height) / 2
+    width: radioRoot.indicatorSize
+    height: radioRoot.indicatorSize
+    radius: width / 2
+    color: renderer.prop("indicator_background", "transparent")
+    border.width: Style.normalBorderWidth
+    border.color: renderer.prop("indicator_border",
+      radioRoot.checked ? renderer.prop("accent", Color.accent) : renderer.foreground)
+
+    Rectangle {
+      anchors.centerIn: parent
+      width: Number(renderer.prop("dot_size", Math.max(8, parent.width * 0.48)))
+      height: width
+      radius: width / 2
+      visible: radioRoot.checked
+      color: renderer.prop("dot_color", renderer.prop("accent", Color.accent))
+    }
+  }
+
+  onClicked: {
+    var payload = eventPayload()
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", payload)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "activate", payload)
+    if (checked) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "select", payload)
+  }
+  onToggled: {
+    var payload = eventPayload()
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "toggle", payload)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", payload)
+  }
+  onPressed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "press", eventPayload())
+  onReleased: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "release", eventPayload())
+  onHoveredChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    "hover", { value: hovered })
+  onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    activeFocus ? "focus" : "blur", {})
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+}

data/Components/Builtins/RadioGroup.qml

@@ -0,0 +1,58 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Grid {
+  required property var renderer
+      id: nativeRadioGroup
+      readonly property bool horizontal: String(renderer.prop("orientation", "vertical")) === "horizontal"
+      columns: horizontal ? Math.max(1, radioOptions.count) : 1
+      rows: horizontal ? 1 : Math.max(1, radioOptions.count)
+      spacing: Number(renderer.prop("spacing", 10))
+      QQC.ButtonGroup { id: exclusiveRadioGroup }
+      Repeater {
+        id: radioOptions
+        model: renderer.prop("options", [])
+        delegate: QQC.RadioButton {
+          id: groupedRadioButton
+          required property var modelData
+          readonly property var optionValue: renderer.optionValue(modelData)
+          text: String(renderer.optionLabel(modelData))
+          checked: String(optionValue) === String(renderer.prop("value", ""))
+          enabled: renderer.prop("enabled", true) !== false
+          spacing: Number(renderer.prop("item_spacing", 8))
+          QQC.ButtonGroup.group: exclusiveRadioGroup
+          indicator: Rectangle {
+            implicitWidth: Number(renderer.prop("indicator_size", 20))
+            implicitHeight: implicitWidth
+            radius: width / 2
+            color: renderer.prop("background", "transparent")
+            border.width: Style.normalBorderWidth
+            border.color: groupedRadioButton.checked ? renderer.prop("accent", Color.accent) : renderer.prop("foreground", renderer.foreground)
+            Rectangle {
+              anchors.centerIn: parent
+              width: parent.width * 0.5
+              height: width
+              radius: width / 2
+              visible: groupedRadioButton.checked
+              color: renderer.prop("accent", Color.accent)
+            }
+          }
+          contentItem: Text {
+            leftPadding: groupedRadioButton.indicator.width + groupedRadioButton.spacing
+            text: groupedRadioButton.text
+            textFormat: Text.PlainText
+            color: renderer.prop("foreground", renderer.foreground)
+            font.family: String(renderer.prop("font_family", renderer.fontFamily))
+            font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+            verticalAlignment: Text.AlignVCenter
+          }
+          onClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: optionValue, index: index })
+          onHoveredChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: optionValue, index: index, hovered: hovered })
+        }
+      }
+    }

data/Components/Builtins/RangeSlider.qml

@@ -0,0 +1,39 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+QQC.RangeSlider {
+  required property var renderer
+      id: nativeRangeSlider
+      from: Number(renderer.prop("minimum", 0))
+      to: Number(renderer.prop("maximum", 1))
+      stepSize: Number(renderer.prop("step", 0))
+      first.value: Number(renderer.prop("lower", from))
+      second.value: Number(renderer.prop("upper", to))
+      orientation: String(renderer.prop("orientation", "horizontal")) === "vertical" ? Qt.Vertical : Qt.Horizontal
+      snapMode: {
+        var mode = String(renderer.prop("snap", "none"))
+        if (mode === "always") return QQC.RangeSlider.SnapAlways
+        if (mode === "release") return QQC.RangeSlider.SnapOnRelease
+        return QQC.RangeSlider.NoSnap
+      }
+      live: renderer.prop("live", true) !== false
+      implicitWidth: Number(renderer.prop("width", orientation === Qt.Horizontal ? 240 : 40))
+      implicitHeight: Number(renderer.prop("height", orientation === Qt.Horizontal ? 40 : 240))
+      palette.windowText: renderer.prop("foreground", renderer.foreground)
+      palette.button: renderer.prop("background", Color.popups.background)
+      palette.highlight: renderer.prop("accent", Color.accent)
+      function payload() { return { lower: first.value, upper: second.value } }
+      first.onMoved: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", payload())
+      second.onMoved: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", payload())
+      first.onPressedChanged: {
+        if (!first.pressed) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", payload())
+      }
+      second.onPressedChanged: {
+        if (!second.pressed) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", payload())
+      }
+    }

data/Components/Builtins/Rectangle.qml

@@ -0,0 +1,23 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Rectangle {
+  required property var renderer
+      readonly property int pad: Number(renderer.prop("padding", 0))
+      implicitWidth: Number(renderer.prop("width", contentColumn.implicitWidth + pad * 2))
+      implicitHeight: Number(renderer.prop("height", contentColumn.implicitHeight + pad * 2))
+      color: renderer.prop("color", "transparent")
+      radius: Number(renderer.prop("radius", 0))
+      border.color: renderer.prop("border_color", "transparent")
+      border.width: Number(renderer.prop("border_width", 0))
+      Column {
+        id: contentColumn
+        anchors.centerIn: parent
+        Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+      }
+    }

data/Components/Builtins/RectangularShadow.qml

@@ -0,0 +1,23 @@
+import QtQuick
+import QtQuick.Effects
+
+Item {
+  id: shadowRoot
+  required property var renderer
+  implicitWidth: Number(renderer.prop("width", 240))
+  implicitHeight: Number(renderer.prop("height", 160))
+  RectangularShadow {
+    anchors.fill: parent
+    blur: Number(renderer.prop("blur", 20))
+    spread: Number(renderer.prop("spread", 0))
+    radius: Number(renderer.prop("radius", 0))
+    offset: Qt.vector2d(Number(renderer.prop("offset_x", 0)), Number(renderer.prop("offset_y", 4)))
+    color: renderer.prop("color", "#80000000")
+    cached: renderer.prop("cached", true) !== false
+    antialiasing: renderer.prop("antialiasing", true) !== false
+  }
+  Item {
+    anchors.fill: parent
+    Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+  }
+}