zui 0.0.1

data/Components/Builtins/Canvas.qml

@@ -0,0 +1,159 @@
+import QtQuick
+import "../../Theme"
+
+Item {
+  id: canvasRoot
+  required property var renderer
+
+  implicitWidth: Number(renderer.prop("width", 320))
+  implicitHeight: Number(renderer.prop("height", 200))
+
+  function styleValue(context, value) {
+    if (value === null || typeof value !== "object" || Array.isArray(value)) return value
+    var kind = String(value.type || "linear")
+    var gradient
+    if (kind === "radial") {
+      gradient = context.createRadialGradient(
+        Number(value.x0 || 0), Number(value.y0 || 0), Number(value.r0 || 0),
+        Number(value.x1 === undefined ? nativeCanvas.width : value.x1),
+        Number(value.y1 === undefined ? nativeCanvas.height : value.y1),
+        Number(value.r1 === undefined ? Math.max(nativeCanvas.width, nativeCanvas.height) : value.r1))
+    } else {
+      gradient = context.createLinearGradient(
+        Number(value.x0 || 0), Number(value.y0 || 0),
+        Number(value.x1 === undefined ? nativeCanvas.width : value.x1),
+        Number(value.y1 || 0))
+    }
+    var stops = Array.isArray(value.stops) ? value.stops : []
+    for (var index = 0; index < stops.length; index++) {
+      var stop = stops[index]
+      if (Array.isArray(stop)) gradient.addColorStop(Number(stop[0]), String(stop[1]))
+      else if (stop && typeof stop === "object") gradient.addColorStop(Number(stop.position), String(stop.color))
+    }
+    return gradient
+  }
+
+  function applyStyle(context, command) {
+    if (command.fill_style !== undefined) context.fillStyle = styleValue(context, command.fill_style)
+    if (command.stroke_style !== undefined) context.strokeStyle = styleValue(context, command.stroke_style)
+    if (command.line_width !== undefined) context.lineWidth = Number(command.line_width)
+    if (command.line_cap !== undefined) context.lineCap = String(command.line_cap)
+    if (command.line_join !== undefined) context.lineJoin = String(command.line_join)
+    if (command.miter_limit !== undefined) context.miterLimit = Number(command.miter_limit)
+    if (command.alpha !== undefined) context.globalAlpha = Number(command.alpha)
+    if (command.composite !== undefined) context.globalCompositeOperation = String(command.composite)
+    if (command.font !== undefined) context.font = String(command.font)
+    if (command.text_align !== undefined) context.textAlign = String(command.text_align)
+    if (command.text_baseline !== undefined) context.textBaseline = String(command.text_baseline)
+    if (command.shadow_color !== undefined) context.shadowColor = String(command.shadow_color)
+    if (command.shadow_blur !== undefined) context.shadowBlur = Number(command.shadow_blur)
+    if (command.shadow_offset_x !== undefined) context.shadowOffsetX = Number(command.shadow_offset_x)
+    if (command.shadow_offset_y !== undefined) context.shadowOffsetY = Number(command.shadow_offset_y)
+  }
+
+  function roundedRect(context, command) {
+    var x = Number(command.x || 0)
+    var y = Number(command.y || 0)
+    var width = Number(command.width || 0)
+    var height = Number(command.height || 0)
+    var radius = Math.max(0, Math.min(Number(command.radius || 0), Math.min(Math.abs(width), Math.abs(height)) / 2))
+    context.moveTo(x + radius, y)
+    context.lineTo(x + width - radius, y)
+    context.quadraticCurveTo(x + width, y, x + width, y + radius)
+    context.lineTo(x + width, y + height - radius)
+    context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height)
+    context.lineTo(x + radius, y + height)
+    context.quadraticCurveTo(x, y + height, x, y + height - radius)
+    context.lineTo(x, y + radius)
+    context.quadraticCurveTo(x, y, x + radius, y)
+  }
+
+  function draw(context, command) {
+    if (!command || typeof command !== "object") return
+    applyStyle(context, command)
+    var operation = String(command.op || command.type || "")
+    if (operation === "save") context.save()
+    else if (operation === "restore") context.restore()
+    else if (operation === "begin_path") context.beginPath()
+    else if (operation === "close_path") context.closePath()
+    else if (operation === "move_to") context.moveTo(Number(command.x || 0), Number(command.y || 0))
+    else if (operation === "line_to") context.lineTo(Number(command.x || 0), Number(command.y || 0))
+    else if (operation === "bezier_curve_to") context.bezierCurveTo(Number(command.cp1x || 0), Number(command.cp1y || 0), Number(command.cp2x || 0), Number(command.cp2y || 0), Number(command.x || 0), Number(command.y || 0))
+    else if (operation === "quadratic_curve_to") context.quadraticCurveTo(Number(command.cpx || 0), Number(command.cpy || 0), Number(command.x || 0), Number(command.y || 0))
+    else if (operation === "arc") context.arc(Number(command.x || 0), Number(command.y || 0), Number(command.radius || 0), Number(command.start_angle || 0), Number(command.end_angle === undefined ? Math.PI * 2 : command.end_angle), command.counterclockwise === true)
+    else if (operation === "arc_to") context.arcTo(Number(command.x1 || 0), Number(command.y1 || 0), Number(command.x2 || 0), Number(command.y2 || 0), Number(command.radius || 0))
+    else if (operation === "rect") context.rect(Number(command.x || 0), Number(command.y || 0), Number(command.width || 0), Number(command.height || 0))
+    else if (operation === "rounded_rect") roundedRect(context, command)
+    else if (operation === "fill") context.fill(String(command.fill_rule || "nonzero"))
+    else if (operation === "stroke") context.stroke()
+    else if (operation === "clip") context.clip()
+    else if (operation === "clear_rect") context.clearRect(Number(command.x || 0), Number(command.y || 0), Number(command.width === undefined ? nativeCanvas.width : command.width), Number(command.height === undefined ? nativeCanvas.height : command.height))
+    else if (operation === "fill_rect") context.fillRect(Number(command.x || 0), Number(command.y || 0), Number(command.width || 0), Number(command.height || 0))
+    else if (operation === "stroke_rect") context.strokeRect(Number(command.x || 0), Number(command.y || 0), Number(command.width || 0), Number(command.height || 0))
+    else if (operation === "fill_text") context.fillText(String(command.text || ""), Number(command.x || 0), Number(command.y || 0), command.max_width === undefined ? 1e9 : Number(command.max_width))
+    else if (operation === "stroke_text") context.strokeText(String(command.text || ""), Number(command.x || 0), Number(command.y || 0), command.max_width === undefined ? 1e9 : Number(command.max_width))
+    else if (operation === "translate") context.translate(Number(command.x || 0), Number(command.y || 0))
+    else if (operation === "rotate") context.rotate(Number(command.angle || 0))
+    else if (operation === "scale") context.scale(Number(command.x === undefined ? 1 : command.x), Number(command.y === undefined ? 1 : command.y))
+    else if (operation === "transform") context.transform(Number(command.a === undefined ? 1 : command.a), Number(command.b || 0), Number(command.c || 0), Number(command.d === undefined ? 1 : command.d), Number(command.e || 0), Number(command.f || 0))
+    else if (operation === "set_transform") context.setTransform(Number(command.a === undefined ? 1 : command.a), Number(command.b || 0), Number(command.c || 0), Number(command.d === undefined ? 1 : command.d), Number(command.e || 0), Number(command.f || 0))
+  }
+
+  Rectangle {
+    anchors.fill: parent
+    color: renderer.prop("background", "transparent")
+  }
+
+  Canvas {
+    id: nativeCanvas
+    anchors.fill: parent
+    antialiasing: renderer.prop("antialiasing", true) !== false
+    smooth: renderer.prop("smooth", true) !== false
+    canvasSize: Qt.size(Number(renderer.prop("canvas_width", width)), Number(renderer.prop("canvas_height", height)))
+    tileSize: Qt.size(Number(renderer.prop("tile_width", 0)), Number(renderer.prop("tile_height", 0)))
+    renderTarget: String(renderer.prop("render_target", "image")) === "framebuffer" ? Canvas.FramebufferObject : Canvas.Image
+    renderStrategy: {
+      var strategy = String(renderer.prop("render_strategy", "immediate"))
+      if (strategy === "threaded") return Canvas.Threaded
+      if (strategy === "cooperative") return Canvas.Cooperative
+      return Canvas.Immediate
+    }
+    onPaint: {
+      var context = getContext("2d")
+      try {
+        context.reset()
+        context.clearRect(0, 0, width, height)
+        var commands = renderer.prop("commands", [])
+        if (Array.isArray(commands)) {
+          for (var index = 0; index < commands.length; index++) canvasRoot.draw(context, commands[index])
+        }
+        if (renderer.subscribed("paint")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "paint", { commands: Array.isArray(commands) ? commands.length : 0 })
+      } catch (error) {
+        if (renderer.subscribed("error")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "error", { message: String(error) })
+      }
+    }
+  }
+
+  Connections {
+    target: renderer
+    function onNodeChanged() { nativeCanvas.requestPaint() }
+  }
+
+  Timer {
+    interval: Math.max(1, Math.round(1000 / Math.max(1, Number(renderer.prop("fps", 60)))))
+    repeat: true
+    running: renderer.prop("continuous", false) === true
+    onTriggered: nativeCanvas.requestPaint()
+  }
+
+  MouseArea {
+    anchors.fill: parent
+    hoverEnabled: renderer.subscribed("hover")
+    function payload(mouse) { return { x: mouse.x, y: mouse.y, button: mouse.button } }
+    onClicked: function(mouse) { if (renderer.subscribed("click")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", payload(mouse)) }
+    onDoubleClicked: function(mouse) { if (renderer.subscribed("double_click")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "double_click", payload(mouse)) }
+    onPressed: function(mouse) { if (renderer.subscribed("press")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "press", payload(mouse)) }
+    onReleased: function(mouse) { if (renderer.subscribed("release")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "release", payload(mouse)) }
+    onPositionChanged: function(mouse) { if (renderer.subscribed("hover")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", payload(mouse)) }
+  }
+}

data/Components/Builtins/CaptureSession.qml

@@ -0,0 +1,19 @@
+import QtQuick
+import QtMultimedia
+
+Item {
+  id:sessionRoot;property var renderer:null;property alias captureSession:nativeSession;property alias camera:nativeCamera;property alias imageCapture:nativeImageCapture;property alias mediaRecorder:nativeRecorder;property alias audioInput:nativeAudioInput;property alias audioOutput:nativeAudioOutput
+  function deviceValid(list,requested,kind){var value=String(requested||"");if(value==="")return true;for(var index=0;index<list.length;index++)if(String(list[index].id)===value||list[index].description===value)return true;if(renderer)renderer.componentError(kind+"_device_not_found","The declared "+kind.replace("_"," ")+" device does not exist",{device:value});return false}
+  function device(list,requested,defaultDevice){var value=String(requested||"");if(value==="")return defaultDevice;for(var index=0;index<list.length;index++)if(String(list[index].id)===value||list[index].description===value)return list[index];return null}
+  implicitWidth:Number(renderer?renderer.prop("width",640):640);implicitHeight:Number(renderer?renderer.prop("height",360):360)
+  Camera{id:nativeCamera;active:renderer&&renderer.prop("camera_active",false)===true}
+  MediaDevices{id:nativeDevices}
+  AudioInput{id:nativeAudioInput;device:sessionRoot.device(nativeDevices.audioInputs,renderer?renderer.prop("audio_input_device",""):"",nativeDevices.defaultAudioInput);muted:!sessionRoot.deviceValid(nativeDevices.audioInputs,renderer?renderer.prop("audio_input_device",""):"","audio_input")}
+  AudioOutput{id:nativeAudioOutput;device:sessionRoot.device(nativeDevices.audioOutputs,renderer?renderer.prop("audio_output_device",""):"",nativeDevices.defaultAudioOutput);muted:!sessionRoot.deviceValid(nativeDevices.audioOutputs,renderer?renderer.prop("audio_output_device",""):"","audio_output")}
+  ImageCapture{id:nativeImageCapture}
+  MediaRecorder{id:nativeRecorder}
+  CaptureSession{id:nativeSession;camera:nativeCamera;audioInput:sessionRoot.deviceValid(nativeDevices.audioInputs,renderer?renderer.prop("audio_input_device",""):"","audio_input")?nativeAudioInput:null;audioOutput:sessionRoot.deviceValid(nativeDevices.audioOutputs,renderer?renderer.prop("audio_output_device",""):"","audio_output")?nativeAudioOutput:null;imageCapture:nativeImageCapture;recorder:nativeRecorder;videoOutput:renderer&&renderer.prop("video_output_enabled",true)!==false?nativeVideoOutput:null}
+  VideoOutput{id:nativeVideoOutput;anchors.fill:parent;visible:renderer&&renderer.prop("video_output_enabled",true)!==false}
+  Item{anchors.fill:parent;Repeater{model:renderer?(renderer.node.children||[]):[];delegate:renderer.childDelegateComponent}}
+  Component.onCompleted:if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"ready",{})
+}

data/Components/Builtins/Card.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
+
+ZuiControls.BorderSurface {
+  required property var renderer
+      readonly property int pad: Number(renderer.prop("padding", Style.space(16)))
+      implicitWidth: cardContent.implicitWidth + pad * 2
+      implicitHeight: cardContent.implicitHeight + pad * 2
+      color: renderer.prop("color", Color.popups.background)
+      radius: Number(renderer.prop("radius", Style.cornerRadius))
+      borderSpec: Border.controlSpec("normal", renderer.prop("border_color", renderer.foreground), renderer.prop("accent", Color.accent))
+      Column {
+        id: cardContent
+        anchors.centerIn: parent
+        spacing: Number(renderer.prop("spacing", Style.spacing.panelGap))
+        Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+      }
+    }

data/Components/Builtins/Carousel.qml

@@ -0,0 +1,72 @@
+import QtQuick
+import "../../Theme"
+
+Rectangle {
+  id: carouselRoot
+  property var renderer: null
+  readonly property var items: renderer ? renderer.prop("items", []) : []
+  implicitWidth: Number(renderer ? renderer.prop("width", 640) : 640)
+  implicitHeight: Number(renderer ? renderer.prop("height", 320) : 320)
+  color: renderer ? renderer.prop("background", "transparent") : "transparent"
+
+  function field(item, propertyName, fallback) {
+    if (item !== null && typeof item === "object" && !Array.isArray(item)) {
+      var key = String(renderer.prop(propertyName, fallback)); return item[key]
+    }
+    return item
+  }
+  PathView {
+    id: pathControl
+    anchors.fill: parent
+    model: carouselRoot.items
+    currentIndex: Number(renderer.prop("current_index", 0))
+    interactive: renderer.prop("interactive", true) !== false
+    preferredHighlightBegin: { var value=renderer.prop("highlight_range",0.5);return Array.isArray(value)?Number(value[0]):Number(value) }
+    preferredHighlightEnd: { var value=renderer.prop("highlight_range",0.5);return Array.isArray(value)?Number(value[value.length-1]):Number(value) }
+    highlightRangeMode: { var mode=String(renderer.prop("snap_mode","strict"));if(mode==="none")return PathView.NoHighlightRange;if(mode==="apply")return PathView.ApplyRange;return PathView.StrictlyEnforceRange }
+    pathItemCount: Math.min(carouselRoot.items.length, 7)
+    path: Path {
+      startX: 0; startY: carouselRoot.height / 2
+      PathCubic {
+        x: carouselRoot.width
+        y: carouselRoot.height / 2
+        control1X: carouselRoot.width * 0.25
+        control1Y: carouselRoot.height / 2 - Number(renderer.prop("path_radius", 72))
+        control2X: carouselRoot.width * 0.75
+        control2Y: carouselRoot.height / 2 - Number(renderer.prop("path_radius", 72))
+      }
+    }
+    delegate: Rectangle {
+      required property int index; required property var modelData
+      width: Number(renderer.prop("item_width", 220)); height: Number(renderer.prop("item_height", 240))
+      scale: PathView.isCurrentItem ? 1.0 : 0.72; opacity: PathView.isCurrentItem ? 1.0 : 0.45
+      color: Color.popups.background; radius: Style.cornerRadius; border.color: index === pathControl.currentIndex ? renderer.prop("accent", Color.accent) : "transparent"
+      Column {
+        anchors.fill: parent; anchors.margins: 12; spacing: 8
+        Image {
+          width: parent.width
+          height: parent.height - 76
+          fillMode: Image.PreserveAspectCrop
+          source: renderer.assetUrl(carouselRoot.field(modelData, "image_field", "image") || "")
+          visible: source !== ""
+          onStatusChanged: {
+            if (status === Image.Error)
+              renderer.componentError("carousel_image_failed",
+                "Unable to load the declared carousel image",
+                { index: index, source: String(source) })
+          }
+        }
+        Text { width: parent.width; text: String(carouselRoot.field(modelData, "label_field", "label") || modelData); color: renderer.prop("foreground", renderer.foreground); font.family: renderer.prop("font_family", renderer.fontFamily); font.pixelSize: Number(renderer.prop("font_size", Style.font.body)); horizontalAlignment: Text.AlignHCenter; elide: Text.ElideRight }
+        Text { width: parent.width; text: String(carouselRoot.field(modelData,"description_field","description")||"");color:renderer.prop("muted",renderer.foreground);font.family:renderer.prop("font_family",renderer.fontFamily);font.pixelSize:Math.max(9,Number(renderer.prop("font_size",Style.font.body))-2);horizontalAlignment:Text.AlignHCenter;elide:Text.ElideRight }
+      }
+      TapHandler { onTapped: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "activate", { index: index, item: modelData, value: carouselRoot.field(modelData, "key_field", "id") }) }
+    }
+    onCurrentIndexChanged: {
+      var payload = { value: currentIndex, item: currentIndex >= 0 && currentIndex < carouselRoot.items.length ? carouselRoot.items[currentIndex] : null }
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", payload)
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", payload)
+    }
+    onMovementStarted: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "movement_start", {})
+    onMovementEnded: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "movement_end", { value: currentIndex })
+  }
+}

data/Components/Builtins/Center.qml

@@ -0,0 +1,20 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Item {
+  required property var renderer
+      readonly property int pad: Number(renderer.prop("padding", 0))
+      implicitWidth: centeredContent.implicitWidth + pad * 2
+      implicitHeight: centeredContent.implicitHeight + pad * 2
+      Column {
+        id: centeredContent
+        anchors.centerIn: parent
+        spacing: Number(renderer.prop("spacing", Style.spacing.panelGap))
+        Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+      }
+    }

data/Components/Builtins/CheckDelegate.qml

@@ -0,0 +1,132 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import "../../Theme"
+
+QQC.CheckDelegate {
+  id: checkRoot
+
+  required property var renderer
+  readonly property bool selected: renderer.prop("selected", false) === true
+  readonly property real indicatorSize: Number(renderer.prop("indicator_size", 22))
+
+  function checkStateValue(value) {
+    if (value === Qt.Checked || String(value) === "checked" || value === true) return Qt.Checked
+    if (value === Qt.PartiallyChecked || String(value) === "partial"
+        || String(value) === "partially_checked") return Qt.PartiallyChecked
+    return Qt.Unchecked
+  }
+
+  function checkStateName() {
+    if (checkState === Qt.Checked) return "checked"
+    if (checkState === Qt.PartiallyChecked) return "partial"
+    return "unchecked"
+  }
+
+  function eventPayload() {
+    return {
+      text: text,
+      value: renderer.prop("value", text),
+      checked: checkState === Qt.Checked,
+      check_state: checkStateName(),
+      selected: selected
+    }
+  }
+
+  text: String(renderer.prop("text", ""))
+  tristate: renderer.prop("tristate", false) === true
+  checkState: checkStateValue(renderer.prop("check_state",
+    renderer.prop("checked", false) === true ? "checked" : "unchecked"))
+  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: checkRoot.highlighted
+      ? renderer.prop("highlighted_background", renderer.prop("selected_background", Color.popups.background))
+      : (checkRoot.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: checkRoot.text
+      textFormat: Text.PlainText
+      color: checkRoot.selected
+        ? renderer.prop("selected_foreground", renderer.prop("foreground", renderer.foreground))
+        : renderer.prop("foreground", renderer.foreground)
+      font: checkRoot.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: checkRoot.width - checkRoot.rightPadding + Number(renderer.prop("spacing", Style.spacing.md))
+    y: (checkRoot.height - height) / 2
+    width: checkRoot.indicatorSize
+    height: checkRoot.indicatorSize
+    radius: Number(renderer.prop("radius", 4))
+    color: checkRoot.checkState === Qt.Unchecked
+      ? renderer.prop("indicator_background", "transparent")
+      : renderer.prop("accent", Color.accent)
+    border.width: Style.normalBorderWidth
+    border.color: renderer.prop("indicator_border",
+      checkRoot.checkState === Qt.Unchecked ? renderer.foreground : renderer.prop("accent", Color.accent))
+
+    Text {
+      anchors.centerIn: parent
+      visible: checkRoot.checkState !== Qt.Unchecked
+      text: checkRoot.checkState === Qt.PartiallyChecked ? "−" : renderer.iconGlyph("check")
+      color: renderer.prop("check_color", Color.background)
+      font.family: renderer.fontFamily
+      font.pixelSize: Math.max(10, parent.height * 0.62)
+      font.bold: true
+    }
+  }
+
+  onClicked: {
+    var payload = eventPayload()
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", payload)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "activate", payload)
+  }
+  onCheckStateChanged: {
+    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/Checkbox.qml

@@ -0,0 +1,62 @@
+import QtMultimedia
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+QQC.CheckBox {
+    id: checkControl
+
+    required property var renderer
+
+    text: renderer.escapeAutoText(renderer.prop("label", ""))
+    checked: renderer.prop("checked", false) === true
+    hoverEnabled: true
+    spacing: Number(renderer.prop("spacing", Style.spacing.controlGap))
+    leftPadding: 0
+    rightPadding: 0
+    onToggled: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", {
+        "value": checked
+    })
+    onHoveredChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", {
+        "value": hovered
+    })
+
+    HoverHandler {
+        cursorShape: renderer.cursorShape(renderer.prop("cursor", "pointing_hand"))
+    }
+
+    indicator: Rectangle {
+        implicitWidth: Number(renderer.prop("indicator_size", Style.space(20)))
+        implicitHeight: implicitWidth
+        x: checkControl.leftPadding
+        y: checkControl.topPadding + (checkControl.availableHeight - height) / 2
+        radius: Math.min(Style.cornerRadius, width / 4)
+        color: checkControl.checked ? renderer.prop("accent", Color.accent) : renderer.prop("background", "transparent")
+        border.width: Style.normalBorderWidth
+        border.color: checkControl.checked ? renderer.prop("accent", Color.accent) : renderer.prop("foreground", renderer.foreground)
+
+        Text {
+            anchors.centerIn: parent
+            text: checkControl.checked ? renderer.iconGlyph("check") : ""
+            textFormat: Text.PlainText
+            color: Color.background
+            font.family: String(renderer.prop("font_family", renderer.fontFamily))
+            font.pixelSize: parent.width * 0.7
+        }
+
+    }
+
+    contentItem: Text {
+        leftPadding: checkControl.indicator.width + checkControl.spacing
+        text: checkControl.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
+    }
+
+}

data/Components/Builtins/Chip.qml

@@ -0,0 +1,65 @@
+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
+      id: chipRoot
+      readonly property bool selected: renderer.prop("selected", false) === true
+      readonly property bool deletable: renderer.prop("deletable", false) === true
+      readonly property bool interactive: renderer.prop("enabled", true) !== false
+      implicitWidth: chipRow.implicitWidth + Number(renderer.prop("horizontal_padding", 12)) * 2
+      implicitHeight: Number(renderer.prop("height", 30))
+      radius: Number(renderer.prop("radius", height / 2))
+      color: selected ? renderer.prop("selected_background", Color.accent) : renderer.prop("background", Color.popups.background)
+      border.width: Style.normalBorderWidth
+      border.color: selected ? renderer.prop("accent", Color.accent) : renderer.foreground
+      opacity: interactive ? 1 : 0.5
+      Row {
+        id: chipRow
+        anchors.centerIn: parent
+        spacing: Number(renderer.prop("spacing", 7))
+        Text {
+          visible: String(renderer.prop("icon", "")).length > 0
+          text: renderer.iconGlyph(renderer.prop("icon", ""))
+          textFormat: Text.PlainText
+          color: chipRoot.selected ? renderer.prop("selected_foreground", Color.background) : renderer.prop("foreground", renderer.foreground)
+          font.family: renderer.fontFamily
+          font.pixelSize: Number(renderer.prop("icon_size", Style.font.icon))
+        }
+        Text {
+          text: String(renderer.prop("text", ""))
+          textFormat: Text.PlainText
+          color: chipRoot.selected ? renderer.prop("selected_foreground", Color.background) : renderer.prop("foreground", renderer.foreground)
+          font.family: renderer.fontFamily
+          font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+        }
+        Text {
+          visible: chipRoot.deletable
+          text: renderer.iconGlyph("xmark")
+          textFormat: Text.PlainText
+          color: chipRoot.selected ? renderer.prop("selected_foreground", Color.background) : renderer.prop("foreground", renderer.foreground)
+          font.family: renderer.fontFamily
+          font.pixelSize: Number(renderer.prop("icon_size", Style.font.icon))
+          MouseArea {
+            anchors.fill: parent
+            enabled: chipRoot.interactive
+            onClicked: function(mouse) {
+              mouse.accepted = true
+              renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "delete", {})
+            }
+          }
+        }
+      }
+      TapHandler {
+        enabled: chipRoot.interactive
+        onTapped: {
+          renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", {})
+          if (renderer.subscribed("change")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: !chipRoot.selected })
+        }
+      }
+    }

data/Components/Builtins/Circle.qml

@@ -0,0 +1,35 @@
+import QtQuick
+import QtQuick.Shapes
+
+Shape {
+  id: circleRoot
+  required property var renderer
+  readonly property real circleRadius: Number(renderer.prop("radius", 50))
+  implicitWidth: Number(renderer.prop("width", circleRadius * 2 + Number(renderer.prop("stroke_width", 1))))
+  implicitHeight: Number(renderer.prop("height", circleRadius * 2 + Number(renderer.prop("stroke_width", 1))))
+  antialiasing: renderer.prop("antialiasing", true) !== false
+  ShapePath {
+    strokeColor: renderer.prop("stroke", renderer.foreground)
+    fillColor: renderer.prop("fill", "transparent")
+    strokeWidth: Number(renderer.prop("stroke_width", 1))
+    capStyle: String(renderer.prop("cap", "round")) === "flat" ? ShapePath.FlatCap : (String(renderer.prop("cap", "round")) === "square" ? ShapePath.SquareCap : ShapePath.RoundCap)
+    strokeStyle: Array.isArray(renderer.prop("dash_pattern", [])) && renderer.prop("dash_pattern", []).length > 0 ? ShapePath.DashLine : ShapePath.SolidLine
+    dashPattern: renderer.prop("dash_pattern", [])
+    dashOffset: Number(renderer.prop("dash_offset", 0))
+    PathAngleArc {
+      centerX: Number(renderer.prop("center_x", circleRoot.width / 2))
+      centerY: Number(renderer.prop("center_y", circleRoot.height / 2))
+      radiusX: circleRoot.circleRadius
+      radiusY: circleRoot.circleRadius
+      startAngle: Number(renderer.prop("start_angle", 0))
+      sweepAngle: Number(renderer.prop("sweep_angle", 360))
+      moveToStart: true
+    }
+  }
+  MouseArea {
+    anchors.fill: parent
+    hoverEnabled: renderer.subscribed("hover")
+    onClicked: function(mouse) { if (renderer.subscribed("click")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", { x: mouse.x, y: mouse.y }) }
+    onPositionChanged: function(mouse) { if (renderer.subscribed("hover")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { x: mouse.x, y: mouse.y }) }
+  }
+}

data/Components/Builtins/Clipboard.qml

@@ -0,0 +1,29 @@
+import QtQuick
+
+Item {
+  required property var renderer
+  property int handledRevision: -1
+
+  function synchronize() {
+    var revision = Number(renderer.prop("revision", 0))
+    var requested = renderer.prop("text", null)
+    if (requested === null || revision === handledRevision) return
+    handledRevision = revision
+    zuiClipboard.text = String(requested)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "copied", {
+      value: String(requested), revision: revision
+    })
+  }
+
+  Component.onCompleted: synchronize()
+  Connections { target: renderer; function onNodeChanged() { synchronize() } }
+  Connections {
+    target: zuiClipboard
+    enabled: renderer.prop("watch", true) !== false
+    function onTextChanged() {
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", {
+        value: zuiClipboard.text
+      })
+    }
+  }
+}

data/Components/Builtins/ColorAnimation.qml

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