zui 0.0.1

data/Components/Builtins/AspectRatio.qml

@@ -0,0 +1,30 @@
+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 real aspect: Math.max(0.000001, Number(renderer.prop("ratio", 1)))
+      readonly property var requestedWidth: renderer.prop("width", null)
+      readonly property var requestedHeight: renderer.prop("height", null)
+      readonly property real naturalWidth: aspectContent.implicitWidth
+      readonly property real naturalHeight: aspectContent.implicitHeight
+      implicitWidth: requestedWidth !== null
+        ? Number(requestedWidth)
+        : (requestedHeight !== null ? Number(requestedHeight) * aspect : Math.max(naturalWidth, naturalHeight * aspect))
+      implicitHeight: requestedHeight !== null
+        ? Number(requestedHeight)
+        : (requestedWidth !== null ? Number(requestedWidth) / aspect : implicitWidth / aspect)
+      clip: renderer.prop("clip", false) === true
+      Item {
+        id: aspectContent
+        anchors.centerIn: parent
+        implicitWidth: childrenRect.width
+        implicitHeight: childrenRect.height
+        Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+      }
+    }

data/Components/Builtins/Audio.qml

@@ -0,0 +1,85 @@
+import QtQuick
+import QtMultimedia
+
+Item {
+  id: audioRoot
+
+  required property var renderer
+  property real appliedSeekRevision: -1
+  property real lastReportedPosition: -1000
+
+  implicitWidth: 0
+  implicitHeight: 0
+
+  function send(name, payload) {
+    if (renderer.subscribed(name))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, name, payload || {})
+  }
+
+  function applySeek(force) {
+    var revision = Number(renderer.prop("seek_revision", 0))
+    if (!force && revision === appliedSeekRevision) return
+    appliedSeekRevision = revision
+    audioPlayer.setPosition(Math.max(0, Number(renderer.prop("position", 0))))
+  }
+
+  function syncPlayback() {
+    applySeek(false)
+    var requested = String(renderer.prop("playback", ""))
+    if (requested === "play") audioPlayer.play()
+    else if (requested === "pause") audioPlayer.pause()
+    else if (requested === "stop") audioPlayer.stop()
+  }
+
+  MediaPlayer {
+    id: audioPlayer
+    source: renderer.assetUrl(renderer.prop("source", ""))
+    autoPlay: renderer.prop("auto_play", false) === true
+    loops: Number(renderer.prop("loops", 1))
+    playbackRate: Number(renderer.prop("playback_rate", 1))
+
+    audioOutput: AudioOutput {
+      volume: Math.max(0, Math.min(1, Number(renderer.prop("volume", 1))))
+      muted: renderer.prop("muted", false) === true
+    }
+
+    onSourceChanged: Qt.callLater(audioRoot.syncPlayback)
+
+    onPlaybackStateChanged: function(playbackState) {
+      var eventName = playbackState === MediaPlayer.PlayingState ? "play"
+        : (playbackState === MediaPlayer.PausedState ? "pause" : "stop")
+      audioRoot.send(eventName, { position: audioPlayer.position, duration: audioPlayer.duration })
+    }
+
+    onMediaStatusChanged: function(mediaStatus) {
+      audioRoot.send("status", { value: mediaStatus, position: audioPlayer.position, duration: audioPlayer.duration })
+      if (mediaStatus === MediaPlayer.LoadedMedia) {
+        audioRoot.applySeek(true)
+        audioRoot.syncPlayback()
+        audioRoot.send("loaded", { duration: audioPlayer.duration, source: audioPlayer.source })
+      } else if (mediaStatus === MediaPlayer.EndOfMedia) {
+        audioRoot.send("end", { position: audioPlayer.position, duration: audioPlayer.duration })
+      }
+    }
+
+    onErrorOccurred: function(error, message) {
+      renderer.componentError("audio_playback_failed", message, { native_code: error, source: String(audioPlayer.source) })
+    }
+
+    onPositionChanged: {
+      if (Math.abs(audioPlayer.position - audioRoot.lastReportedPosition) < 180
+          && audioPlayer.position !== audioPlayer.duration) return
+      audioRoot.lastReportedPosition = audioPlayer.position
+      audioRoot.send("position", { value: audioPlayer.position, duration: audioPlayer.duration })
+    }
+
+    onDurationChanged: audioRoot.send("duration", { value: audioPlayer.duration })
+  }
+
+  Component.onCompleted: syncPlayback()
+
+  Connections {
+    target: renderer
+    function onNodeChanged() { audioRoot.syncPlayback() }
+  }
+}

data/Components/Builtins/AudioInput.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import QtMultimedia
+
+Item {
+  id:inputRoot;property var renderer:null;property alias audioInput:nativeInput
+  function deviceValid(){var requested=String(renderer?renderer.prop("device",""):"");if(requested==="")return true;var list=nativeDevices.audioInputs;for(var index=0;index<list.length;index++)if(String(list[index].id)===requested||list[index].description===requested)return true;if(renderer)renderer.componentError("audio_input_device_not_found","The declared audio input device does not exist",{device:requested});return false}
+  function device(){var requested=String(renderer?renderer.prop("device",""):"");var list=nativeDevices.audioInputs;if(requested==="")return nativeDevices.defaultAudioInput;for(var index=0;index<list.length;index++)if(String(list[index].id)===requested||list[index].description===requested)return list[index];return null}
+  MediaDevices{id:nativeDevices}
+  AudioInput{id:nativeInput;device:inputRoot.device();muted:!inputRoot.deviceValid()||(renderer&&renderer.prop("muted",false)===true);volume:inputRoot.deviceValid()?Math.max(0,Math.min(1,Number(renderer?renderer.prop("volume",1):1))):0;onMutedChanged:if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"muted_change",{value:muted});onVolumeChanged:if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"volume_change",{value:volume});onDeviceChanged:if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"device_change",{description:device.description,id:String(device.id)})}
+}

data/Components/Builtins/AudioOutput.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import QtMultimedia
+
+Item {
+  id:outputRoot;property var renderer:null;property alias audioOutput:nativeOutput
+  function deviceValid(){var requested=String(renderer?renderer.prop("device",""):"");if(requested==="")return true;var list=nativeDevices.audioOutputs;for(var index=0;index<list.length;index++)if(String(list[index].id)===requested||list[index].description===requested)return true;if(renderer)renderer.componentError("audio_output_device_not_found","The declared audio output device does not exist",{device:requested});return false}
+  function device(){var requested=String(renderer?renderer.prop("device",""):"");var list=nativeDevices.audioOutputs;if(requested==="")return nativeDevices.defaultAudioOutput;for(var index=0;index<list.length;index++)if(String(list[index].id)===requested||list[index].description===requested)return list[index];return null}
+  MediaDevices{id:nativeDevices}
+  AudioOutput{id:nativeOutput;device:outputRoot.device();muted:!outputRoot.deviceValid()||(renderer&&renderer.prop("muted",false)===true);volume:outputRoot.deviceValid()?Math.max(0,Math.min(1,Number(renderer?renderer.prop("volume",1):1))):0;onMutedChanged:if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"muted_change",{value:muted});onVolumeChanged:if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"volume_change",{value:volume});onDeviceChanged:if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"device_change",{description:device.description,id:String(device.id)})}
+}

data/Components/Builtins/Avatar.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
+
+Rectangle {
+  required property var renderer
+      id: avatarRoot
+      implicitWidth: Number(renderer.prop("size", 48))
+      implicitHeight: implicitWidth
+      radius: Number(renderer.prop("radius", width / 2))
+      color: renderer.prop("background", Color.accent)
+      clip: true
+      readonly property string avatarSource: String(renderer.prop("source", ""))
+      readonly property string displayName: String(renderer.prop("name", ""))
+      Text {
+        anchors.centerIn: parent
+        visible: avatarRoot.avatarSource === ""
+        text: {
+          var words = avatarRoot.displayName.trim().split(/\s+/)
+          if (words.length === 0 || words[0].length === 0) return "?"
+          return (words[0].charAt(0) + (words.length > 1 ? words[words.length - 1].charAt(0) : "")).toUpperCase()
+        }
+        color: renderer.prop("foreground", Color.background)
+        font.family: renderer.fontFamily
+        font.bold: true
+        font.pixelSize: Number(renderer.prop("font_size", avatarRoot.width * 0.38))
+      }
+      Image {
+        id: avatarImage
+        anchors.fill: parent
+        source: renderer.assetUrl(avatarRoot.avatarSource)
+        fillMode: Image.PreserveAspectCrop
+        asynchronous: renderer.prop("asynchronous", true) !== false
+        cache: renderer.prop("cache", true) !== false
+        visible: avatarRoot.avatarSource !== ""
+        onStatusChanged: {
+          if (status === Image.Ready && renderer.subscribed("loaded")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "loaded", { width: sourceSize.width, height: sourceSize.height })
+          if (status === Image.Error) renderer.componentError("avatar_image_failed", "Unable to load the declared avatar image", { source: String(source) })
+        }
+      }
+      TapHandler { onTapped: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", {}) }
+    }

data/Components/Builtins/Badge.qml

@@ -0,0 +1,38 @@
+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: badgeRoot
+      readonly property bool dotMode: renderer.prop("dot", false) === true
+      readonly property real badgeSize: Number(renderer.prop("size", dotMode ? 8 : 20))
+      readonly property real horizontalPad: Number(renderer.prop("padding", 6))
+      readonly property var rawValue: renderer.prop("value", "")
+      readonly property real maximum: Number(renderer.prop("maximum", 99))
+      readonly property string displayValue: {
+        if (dotMode) return ""
+        var number = Number(rawValue)
+        return rawValue !== "" && !isNaN(number) && number > maximum ? String(maximum) + "+" : String(rawValue)
+      }
+      implicitWidth: dotMode ? badgeSize : Math.max(Number(renderer.prop("minimum_width", badgeSize)), badgeText.implicitWidth + horizontalPad * 2)
+      implicitHeight: badgeSize
+      radius: height / 2
+      color: renderer.prop("background", Color.accent)
+      Text {
+        id: badgeText
+        anchors.centerIn: parent
+        visible: !badgeRoot.dotMode
+        text: badgeRoot.displayValue
+        textFormat: Text.PlainText
+        color: renderer.prop("foreground", Color.background)
+        font.family: renderer.fontFamily
+        font.bold: true
+        font.pixelSize: Number(renderer.prop("font_size", Math.max(9, badgeRoot.height * 0.58)))
+      }
+      TapHandler { onTapped: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", { value: badgeRoot.rawValue }) }
+    }

data/Components/Builtins/Banner.qml

@@ -0,0 +1,133 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import "../../Theme"
+
+QQC.Pane {
+  id: bannerRoot
+
+  required property var renderer
+  readonly property string severity: String(renderer.prop("severity", "info"))
+  readonly property bool requestedVisible: renderer.prop("visible", true) !== false
+  property bool locallyDismissed: false
+
+  function severityIcon() {
+    var explicitIcon = String(renderer.prop("icon", ""))
+    if (explicitIcon.length > 0) return explicitIcon
+    if (severity === "success") return "circle_check"
+    if (severity === "warning") return "warning"
+    if (severity === "error" || severity === "critical") return "circle_xmark"
+    return "circle_info"
+  }
+
+  function severityColor() {
+    if (severity === "success") return renderer.prop("success_color", renderer.prop("accent", Color.accent))
+    if (severity === "warning") return renderer.prop("warning_color", "#d8a657")
+    if (severity === "error" || severity === "critical") return renderer.prop("error_color", Color.urgent)
+    return renderer.prop("accent", Color.accent)
+  }
+
+  visible: requestedVisible && !locallyDismissed
+  implicitWidth: Number(renderer.prop("width", 640))
+  implicitHeight: renderer.prop("height", null) === null
+    ? contentRow.implicitHeight + topPadding + bottomPadding
+    : Number(renderer.prop("height", 88))
+  enabled: renderer.prop("enabled", true) !== false
+  padding: Number(renderer.prop("padding", Style.spacing.md))
+
+  background: Rectangle {
+    color: renderer.prop("background", Color.popups.background)
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: Style.normalBorderWidth
+    border.color: renderer.prop("border_color", bannerRoot.severityColor())
+  }
+
+  contentItem: RowLayout {
+    id: contentRow
+    spacing: Number(renderer.prop("spacing", Style.spacing.md))
+
+    Text {
+      Layout.alignment: Qt.AlignTop
+      text: renderer.iconGlyph(bannerRoot.severityIcon())
+      textFormat: Text.PlainText
+      color: bannerRoot.severityColor()
+      font.family: renderer.fontFamily
+      font.pixelSize: Number(renderer.prop("icon_size", 24))
+    }
+
+    ColumnLayout {
+      Layout.fillWidth: true
+      spacing: Style.spacing.xs
+
+      Text {
+        Layout.fillWidth: true
+        visible: text.length > 0
+        text: String(renderer.prop("title", ""))
+        textFormat: Text.PlainText
+        color: renderer.prop("foreground", renderer.foreground)
+        font.family: String(renderer.prop("font_family", renderer.fontFamily))
+        font.pixelSize: Number(renderer.prop("title_size", Style.font.heading))
+        font.bold: true
+        wrapMode: Text.Wrap
+      }
+
+      Text {
+        Layout.fillWidth: true
+        text: String(renderer.prop("message", ""))
+        textFormat: Text.PlainText
+        color: renderer.prop("muted", renderer.prop("foreground", renderer.foreground))
+        font.family: String(renderer.prop("font_family", renderer.fontFamily))
+        font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+        wrapMode: Text.Wrap
+      }
+    }
+
+    QQC.Button {
+      id: actionButton
+      Layout.alignment: Qt.AlignVCenter
+      visible: text.length > 0
+      text: String(renderer.prop("action_text", ""))
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+      contentItem: Text {
+        text: actionButton.text
+        color: renderer.prop("action_color", bannerRoot.severityColor())
+        font: actionButton.font
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+      }
+      background: Rectangle { color: "transparent" }
+      onClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "action", {})
+    }
+
+    QQC.ToolButton {
+      Layout.alignment: Qt.AlignTop
+      visible: renderer.prop("dismissible", true) !== false
+      text: renderer.iconGlyph("xmark")
+      font.family: renderer.fontFamily
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+      onClicked: {
+        bannerRoot.locallyDismissed = true
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "dismiss", {})
+      }
+    }
+  }
+
+  TapHandler {
+    enabled: renderer.subscribed("click")
+    onTapped: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", {})
+  }
+
+  HoverHandler {
+    onHoveredChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      "hover", { value: hovered })
+  }
+
+  onRequestedVisibleChanged: {
+    if (!requestedVisible) locallyDismissed = false
+  }
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+  onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    activeFocus ? "focus" : "blur", {})
+}

data/Components/Builtins/BarChart.qml

@@ -0,0 +1,67 @@
+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
+      implicitWidth: Number(renderer.prop("width", 420))
+      implicitHeight: Number(renderer.prop("height", 220))
+      Canvas {
+        id: barCanvas
+        anchors.fill: parent
+        antialiasing: true
+        onPaint: {
+          var ctx = getContext("2d")
+          ctx.clearRect(0, 0, width, height)
+          var raw = renderer.prop("values", [])
+          if (!Array.isArray(raw) || raw.length === 0) return
+          var values = raw.map(function(value) { return Number(value) })
+          var low = renderer.prop("minimum", null)
+          var high = renderer.prop("maximum", null)
+          if (low === null) low = Math.min(0, Math.min.apply(Math, values))
+          if (high === null) high = Math.max(0, Math.max.apply(Math, values))
+          low = Number(low); high = Number(high)
+          if (high === low) high = low + 1
+          var pad = 10
+          var chartWidth = Math.max(1, width - pad * 2)
+          var chartHeight = Math.max(1, height - pad * 2)
+          if (renderer.prop("show_grid", true) !== false) {
+            ctx.strokeStyle = renderer.prop("grid_color", Color.muted); ctx.lineWidth = 1
+            for (var grid = 0; grid <= 4; grid++) {
+              var gy = pad + chartHeight * grid / 4
+              ctx.beginPath(); ctx.moveTo(pad, gy); ctx.lineTo(width - pad, gy); ctx.stroke()
+            }
+          }
+          var slot = chartWidth / values.length
+          var gap = Math.max(0, Number(renderer.prop("bar_spacing", 6)))
+          var colors = renderer.prop("colors", [Color.accent])
+          var zeroY = pad + chartHeight * (1 - (0 - low) / (high - low))
+          for (var index = 0; index < values.length; index++) {
+            var valueY = pad + chartHeight * (1 - (values[index] - low) / (high - low))
+            var left = pad + slot * index + gap / 2
+            var top = Math.min(zeroY, valueY)
+            var barHeight = Math.max(1, Math.abs(valueY - zeroY))
+            ctx.fillStyle = Array.isArray(colors) && colors.length > 0 ? colors[index % colors.length] : Color.accent
+            ctx.fillRect(left, top, Math.max(1, slot - gap), barHeight)
+          }
+        }
+      }
+      Connections { target: root; function onNodeChanged() { barCanvas.requestPaint() } }
+      MouseArea {
+        anchors.fill: parent
+        hoverEnabled: renderer.subscribed("hover")
+        function payload(mouse) {
+          var values = renderer.prop("values", [])
+          if (!Array.isArray(values) || values.length === 0) return ({ index: -1 })
+          var index = Math.max(0, Math.min(values.length - 1, Math.floor(mouse.x / Math.max(1, width) * values.length)))
+          var labels = renderer.prop("labels", [])
+          return { index: index, value: values[index], label: Array.isArray(labels) ? labels[index] : null }
+        }
+        onClicked: function(mouse) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "select", payload(mouse)) }
+        onPositionChanged: function(mouse) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", payload(mouse)) }
+      }
+    }

data/Components/Builtins/BarIconButton.qml

@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.BarIconButton {
+  required property var renderer
+      text: renderer.iconGlyph(renderer.prop("icon", ""))
+      tooltipText: renderer.escapeAutoText(renderer.prop("tooltip", ""))
+      active: renderer.prop("active", false) === true
+      foreground: renderer.prop("foreground", renderer.foreground)
+      activeColor: renderer.prop("active_color", Color.accent)
+      slotSize: Number(renderer.prop("slot_size", Style.bar.iconSlot))
+      opticalSize: Number(renderer.prop("optical_size", Style.bar.iconCanvas))
+      fontFamily: String(renderer.prop("font_family", renderer.fontFamily))
+      fontSize: Number(renderer.prop("font_size", Style.bar.iconFont))
+      textRotation: Number(renderer.prop("text_rotation", 0))
+      keepSpace: renderer.prop("keep_space", false) === true
+      dimmed: renderer.prop("dimmed", false) === true
+      concealed: renderer.prop("concealed", false) === true
+      interactive: renderer.prop("interactive", true) !== false
+      onPressed: function(button) {
+        var eventName = button === Qt.RightButton ? "right_click" : (button === Qt.MiddleButton ? "middle_click" : "click")
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, eventName, { button: button })
+      }
+      onWheelMoved: function(delta) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "wheel", { delta: delta }) }
+    }

data/Components/Builtins/BarIndicator.qml

@@ -0,0 +1,26 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.BarIndicator {
+  required property var renderer
+      active: renderer.prop("active", false) === true
+      activeText: renderer.iconGlyph(renderer.prop("active_icon", ""))
+      inactiveText: renderer.iconGlyph(renderer.prop("inactive_icon", renderer.prop("active_icon", "")))
+      activeTooltipText: renderer.escapeAutoText(renderer.prop("active_tooltip", ""))
+      inactiveTooltipText: renderer.escapeAutoText(renderer.prop("inactive_tooltip", renderer.prop("active_tooltip", "")))
+      indicatorBlock: String(renderer.prop("indicator_block", "single"))
+      foreground: renderer.prop("foreground", renderer.foreground)
+      activeColor: renderer.prop("active_color", Color.accent)
+      fontFamily: String(renderer.prop("font_family", renderer.fontFamily))
+      fontSize: Number(renderer.prop("font_size", Style.font.caption))
+      onPressed: function(button) {
+        var eventName = button === Qt.RightButton ? "right_click" : (button === Qt.MiddleButton ? "middle_click" : "click")
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, eventName, { button: button })
+      }
+      onWheelMoved: function(delta) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "wheel", { delta: delta }) }
+    }

data/Components/Builtins/Behavior.qml

@@ -0,0 +1,13 @@
+import QtQuick
+
+Item {
+  id: behaviorRoot
+  property var renderer: null
+  property var lastValue: undefined
+  function option(name,fallback){var specification=renderer?renderer.prop("animation",{}):{};return specification&&specification[name]!==undefined?specification[name]:(renderer?renderer.prop(name,fallback):fallback)}
+  readonly property var targetItem: renderer ? renderer.findRenderedItem(renderer.prop("target", "")) : null
+  function synchronize(){if(!renderer||!targetItem||renderer.prop("enabled",true)===false)return;var property=String(renderer.prop("property","opacity"));var value=renderer.prop("value",targetItem[property]);if(lastValue===undefined){lastValue=targetItem[property]}nativeAnimation.target=targetItem;nativeAnimation.property=property;nativeAnimation.from=lastValue;nativeAnimation.to=value;lastValue=value;nativeAnimation.restart();renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"change",{property:property,value:value})}
+  PropertyAnimation{id:nativeAnimation;duration:Number(behaviorRoot.option("duration",250));easing.type:renderer?renderer.easingType(behaviorRoot.option("easing","in_out_quad")):Easing.InOutQuad;onFinished:renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"finish",{})}
+  Connections{target:renderer;function onNodeChanged(){behaviorRoot.synchronize()}}
+  Component.onCompleted:synchronize()
+}

data/Components/Builtins/Blur.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import QtQuick.Effects
+
+Item {
+  required property var renderer
+  implicitWidth: Number(renderer.prop("width", 240)); implicitHeight: Number(renderer.prop("height", 160))
+  Item { id: sourceHost; anchors.fill: parent; Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent } }
+  ShaderEffectSource { id: sourceTexture; anchors.fill: parent; sourceItem: sourceHost; hideSource: true; visible: false }
+  MultiEffect {
+    anchors.fill: parent; source: sourceTexture; blurEnabled: true
+    blur: Number(renderer.prop("amount", 0.5)); blurMax: Number(renderer.prop("maximum", 32)); blurMultiplier: Number(renderer.prop("multiplier", 1))
+    autoPaddingEnabled: renderer.prop("auto_padding", true) !== false
+  }
+}

data/Components/Builtins/BorderImage.qml

@@ -0,0 +1,38 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+BorderImage {
+  required property var renderer
+      id: nativeBorderImage
+      source: String(renderer.prop("source", ""))
+      width: Number(renderer.prop("width", sourceSize.width > 0 ? sourceSize.width : 160))
+      height: Number(renderer.prop("height", sourceSize.height > 0 ? sourceSize.height : 100))
+      border.left: Number(renderer.prop("border_left", 0))
+      border.top: Number(renderer.prop("border_top", 0))
+      border.right: Number(renderer.prop("border_right", 0))
+      border.bottom: Number(renderer.prop("border_bottom", 0))
+      horizontalTileMode: renderer.borderImageTileMode(renderer.prop("horizontal_tile", "stretch"))
+      verticalTileMode: renderer.borderImageTileMode(renderer.prop("vertical_tile", "stretch"))
+      asynchronous: renderer.prop("asynchronous", true) !== false
+      cache: renderer.prop("cache", true) !== false
+      mirror: renderer.prop("mirror", false) === true
+      smooth: renderer.prop("smooth", true) !== false
+      onStatusChanged: {
+        if (renderer.subscribed("status")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "status", { value: status })
+        if (status === BorderImage.Ready && renderer.subscribed("loaded")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "loaded", { width: sourceSize.width, height: sourceSize.height })
+        if (status === BorderImage.Error) renderer.componentError("border_image_load_failed", "Unable to load the declared border image", { source: String(source) })
+      }
+      Item {
+        anchors.fill: parent
+        anchors.leftMargin: nativeBorderImage.border.left
+        anchors.topMargin: nativeBorderImage.border.top
+        anchors.rightMargin: nativeBorderImage.border.right
+        anchors.bottomMargin: nativeBorderImage.border.bottom
+        Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+      }
+    }

data/Components/Builtins/BorderOverlay.qml

@@ -0,0 +1,25 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.BorderOverlay {
+  required property var renderer
+      width: Number(renderer.prop("width", 120))
+      height: Number(renderer.prop("height", 80))
+      radius: Number(renderer.prop("radius", Style.cornerRadius))
+      borderSpec: {
+        var colors = renderer.prop("gradient_colors", [])
+        if (Array.isArray(colors) && colors.length > 1) {
+          return {
+            color: colors[0],
+            widths: Border.flat(colors[0], renderer.prop("width_spec", Style.normalBorderWidth)).widths,
+            gradient: { colors: colors, angle: Number(renderer.prop("gradient_angle", 0)), enabled: true }
+          }
+        }
+        return Border.flat(renderer.prop("color", renderer.foreground), renderer.prop("width_spec", Style.normalBorderWidth))
+      }
+    }