zui 0.0.1

data/Components/Builtins/HorizontalHeader.qml

@@ -0,0 +1,23 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.HorizontalHeaderView {
+  id: headerRoot
+  property var renderer: null
+  implicitWidth: Number(renderer ? renderer.prop("width", 640) : 640)
+  implicitHeight: Number(renderer ? renderer.prop("height", 42) : 42)
+  model: renderer ? renderer.prop("sections", []) : []
+  interactive: renderer && renderer.prop("movable", false) === true
+  columnSpacing: Number(renderer ? renderer.prop("spacing", 1) : 1)
+  delegate: Rectangle {
+    required property int index
+    required property var modelData
+    implicitWidth: Number(renderer.prop("section_width", 160)); implicitHeight: headerRoot.height
+    readonly property bool selected: index === Number(renderer.prop("current_index", -1))
+    color: selected ? renderer.prop("selected_background", Color.popups.background) : renderer.prop("background", Color.background)
+    border.color: renderer.prop("border_color", Color.muted)
+    Text { anchors.fill: parent; anchors.margins: 8; text: String(modelData && modelData.label !== undefined ? modelData.label : modelData); color: parent.selected ? renderer.prop("selected_foreground", renderer.prop("foreground", renderer.foreground)) : renderer.prop("foreground", renderer.foreground); font.family: renderer.prop("font_family", renderer.fontFamily); font.pixelSize: Number(renderer.prop("font_size", Style.font.body)); verticalAlignment: Text.AlignVCenter; horizontalAlignment: Text.AlignHCenter }
+    TapHandler { enabled: renderer.prop("clickable", true) !== false; onTapped: { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", { index: index, value: modelData }); var current = Number(renderer.prop("sort_index", -1)); var order = current === index && String(renderer.prop("sort_order", "ascending")) === "ascending" ? "descending" : "ascending"; renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "sort", { index: index, order: order, value: modelData }) } }
+  }
+}

data/Components/Builtins/HorizontalHeaderDelegate.qml

@@ -0,0 +1,39 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.ItemDelegate {
+    id: headerDelegate
+
+    property var renderer: null
+
+    text: renderer ? String(renderer.prop("text", "")) : ""
+    enabled: !renderer || renderer.prop("enabled", true) !== false
+    implicitWidth: Number(renderer ? renderer.prop("width", 160) : 160)
+    implicitHeight: Number(renderer ? renderer.prop("height", 42) : 42)
+    highlighted: renderer && renderer.prop("selected", false) === true
+    onClicked: {
+        var payload = {
+            "index": renderer.prop("index", -1),
+            "value": renderer.prop("value", null)
+        };
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", payload);
+        payload.order = String(renderer.prop("sort_order", "")) === "ascending" ? "descending" : "ascending";
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "sort", payload);
+    }
+
+    background: Rectangle {
+        color: headerDelegate.highlighted ? renderer.prop("selected_background", Color.popups.background) : renderer.prop("background", Color.background)
+        border.color: renderer.prop("border_color", Color.muted)
+    }
+
+    contentItem: Text {
+        text: headerDelegate.text + (renderer.prop("sort_order", "") === "ascending" ? " ▲" : (renderer.prop("sort_order", "") === "descending" ? " ▼" : ""))
+        color: headerDelegate.highlighted ? renderer.prop("selected_foreground", renderer.foreground) : 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
+        verticalAlignment: Text.AlignVCenter
+    }
+
+}

data/Components/Builtins/HoverArea.qml

@@ -0,0 +1,19 @@
+import QtQuick
+
+Item {
+  id: hoverRoot
+  property var renderer: null
+  function cursorShape(name) { var value=String(name||"pointing_hand");if(value==="arrow")return Qt.ArrowCursor;if(value==="cross")return Qt.CrossCursor;if(value==="text")return Qt.IBeamCursor;if(value==="open_hand")return Qt.OpenHandCursor;if(value==="closed_hand")return Qt.ClosedHandCursor;return Qt.PointingHandCursor }
+  implicitWidth: Number(renderer ? renderer.prop("width", contentHost.childrenRect.width) : 120)
+  implicitHeight: Number(renderer ? renderer.prop("height", contentHost.childrenRect.height) : 80)
+  Item { id: contentHost; anchors.fill: parent; Repeater { model: renderer ? (renderer.node.children || []) : []; delegate: renderer.childDelegateComponent } }
+  HoverHandler {
+    id: nativeHover
+    enabled: renderer && renderer.prop("enabled", true) !== false
+    blocking: renderer && renderer.prop("blocking", false) === true
+    margin: Number(renderer ? renderer.prop("margin", 0) : 0)
+    cursorShape: hoverRoot.cursorShape(renderer ? renderer.prop("cursor", "pointing_hand") : "pointing_hand")
+    onHoveredChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, hovered ? "enter" : "exit", { x: point.position.x, y: point.position.y })
+    onPointChanged: if (hovered) { var payload = { x: point.position.x, y: point.position.y }; renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "move", payload); renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", payload) }
+  }
+}

data/Components/Builtins/Icon.qml

@@ -0,0 +1,16 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Text {
+  required property var renderer
+      text: renderer.iconGlyph(renderer.prop("name", renderer.prop("text", "")))
+      textFormat: Text.PlainText
+      color: renderer.prop("color", renderer.foreground)
+      font.family: renderer.fontFamily
+      font.pixelSize: Number(renderer.prop("size", Style.font.icon))
+    }

data/Components/Builtins/Image.qml

@@ -0,0 +1,110 @@
+import QtMultimedia
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Image {
+    id: imageRoot
+
+    required property var renderer
+
+    function fillModeValue(value) {
+        var mode = String(value || "preserve_aspect_fit");
+        if (mode === "stretch")
+            return Image.Stretch;
+
+        if (mode === "preserve_aspect_crop" || mode === "crop")
+            return Image.PreserveAspectCrop;
+
+        if (mode === "tile")
+            return Image.Tile;
+
+        if (mode === "tile_vertically" || mode === "tile_vertical")
+            return Image.TileVertically;
+
+        if (mode === "tile_horizontally" || mode === "tile_horizontal")
+            return Image.TileHorizontally;
+
+        if (mode === "pad")
+            return Image.Pad;
+
+        return Image.PreserveAspectFit;
+    }
+
+    function horizontalAlignmentValue(value) {
+        var alignment = String(value || "center");
+        if (alignment === "left" || alignment === "start")
+            return Image.AlignLeft;
+
+        if (alignment === "right" || alignment === "end")
+            return Image.AlignRight;
+
+        return Image.AlignHCenter;
+    }
+
+    function verticalAlignmentValue(value) {
+        var alignment = String(value || "center");
+        if (alignment === "top" || alignment === "start")
+            return Image.AlignTop;
+
+        if (alignment === "bottom" || alignment === "end")
+            return Image.AlignBottom;
+
+        return Image.AlignVCenter;
+    }
+
+    function statusName(value) {
+        if (value === Image.Ready)
+            return "ready";
+
+        if (value === Image.Loading)
+            return "loading";
+
+        if (value === Image.Error)
+            return "error";
+
+        return "null";
+    }
+
+    function send(name, payload) {
+        if (renderer.subscribed(name))
+            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, name, payload || {
+        });
+
+    }
+
+    source: renderer.assetUrl(renderer.prop("source", ""))
+    width: Number(renderer.prop("width", 120))
+    height: Number(renderer.prop("height", 120))
+    sourceSize.width: Number(renderer.prop("source_width", -1))
+    sourceSize.height: Number(renderer.prop("source_height", -1))
+    asynchronous: renderer.prop("asynchronous", true) !== false
+    cache: renderer.prop("cache", true) !== false
+    smooth: renderer.prop("smooth", true) !== false
+    mipmap: renderer.prop("mipmap", false) === true
+    mirror: renderer.prop("mirror", false) === true
+    autoTransform: renderer.prop("auto_transform", false) === true
+    retainWhileLoading: renderer.prop("retain_while_loading", true) !== false
+    fillMode: fillModeValue(renderer.prop("fill_mode", "preserve_aspect_fit"))
+    horizontalAlignment: horizontalAlignmentValue(renderer.prop("horizontal_alignment", "center"))
+    verticalAlignment: verticalAlignmentValue(renderer.prop("vertical_alignment", "center"))
+    onProgressChanged: send("progress", {
+        "value": imageRoot.progress
+    })
+    onStatusChanged: {
+        var payload = {
+            "value": statusName(status),
+            "source": String(source),
+            "width": implicitWidth,
+            "height": implicitHeight
+        };
+        send("status", payload);
+        if (status === Image.Ready)
+            send("loaded", payload);
+        else if (status === Image.Error)
+            renderer.componentError("image_load_failed", "Unable to load the declared image", payload);
+    }
+}

data/Components/Builtins/ImageCapture.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import QtMultimedia
+
+Item {
+  id:captureRoot;property var renderer:null;property alias imageCapture:nativeCapture;property int handledCommandRevision:-1
+  function quality(){var value=String(renderer?renderer.prop("quality","normal"):"normal");if(value==="very_low")return ImageCapture.VeryLowQuality;if(value==="low")return ImageCapture.LowQuality;if(value==="high")return ImageCapture.HighQuality;if(value==="very_high")return ImageCapture.VeryHighQuality;return ImageCapture.NormalQuality}
+  function fileFormat(){var value=String(renderer?renderer.prop("format","unspecified"):"unspecified").toLowerCase();if(value==="jpeg"||value==="jpg")return ImageCapture.JPEG;if(value==="png")return ImageCapture.PNG;if(value==="webp")return ImageCapture.WebP;if(value==="tiff"||value==="tif")return ImageCapture.Tiff;return ImageCapture.UnspecifiedFormat}
+  readonly property var sessionItem:renderer?renderer.findRenderedItem(renderer.prop("session","")):null
+  function send(name,payload){if(renderer&&renderer.subscribed(name))renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,name,payload||{})}
+  function connectSession(){if(sessionItem&&sessionItem.captureSession!==undefined)sessionItem.captureSession.imageCapture=nativeCapture}
+  function command(){if(!renderer)return;var revision=Number(renderer.prop("command_revision",0));if(revision===handledCommandRevision)return;handledCommandRevision=revision;var value=String(renderer.prop("command",""));if(value==="capture")nativeCapture.capture();else if(value==="save")nativeCapture.captureToFile(renderer.assetUrl(renderer.prop("path","")))}
+  ImageCapture{id:nativeCapture;quality:captureRoot.quality();fileFormat:captureRoot.fileFormat();onImageCaptured:function(id,preview){captureRoot.send("captured",{id:id,preview:String(preview)})};onImageSaved:function(id,fileName){captureRoot.send("saved",{id:id,path:fileName})};onErrorOccurred:function(id,error,errorString){renderer.componentError("image_capture_failed",errorString,{capture_id:id,native_code:error})};onReadyForCaptureChanged:captureRoot.send("ready_change",{value:readyForCapture})}
+  Component.onCompleted:{connectSession();command()}onSessionItemChanged:connectSession();Connections{target:renderer;function onNodeChanged(){captureRoot.command()}}
+}

data/Components/Builtins/ItemDelegate.qml

@@ -0,0 +1,152 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import "../../Theme"
+
+QQC.ItemDelegate {
+  id: delegateRoot
+
+  required property var renderer
+  readonly property bool selected: renderer.prop("selected", false) === true
+
+  function eventPayload() {
+    return {
+      text: text,
+      value: renderer.prop("value", text),
+      checked: checked,
+      selected: selected
+    }
+  }
+
+  text: String(renderer.prop("text", ""))
+  checkable: renderer.prop("checkable", false) === true
+  checked: renderer.prop("checked", false) === true
+  autoExclusive: renderer.prop("auto_exclusive", false) === true
+  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))
+  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))
+  Accessible.role: Accessible.ListItem
+
+  background: Rectangle {
+    color: delegateRoot.highlighted
+      ? renderer.prop("highlighted_background", renderer.prop("selected_background", Color.popups.background))
+      : (delegateRoot.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: RowLayout {
+    spacing: Number(renderer.prop("spacing", Style.spacing.md))
+
+    Image {
+      Layout.preferredWidth: Number(renderer.prop("icon_size", 22))
+      Layout.preferredHeight: Number(renderer.prop("icon_size", 22))
+      Layout.alignment: Qt.AlignVCenter
+      visible: source.toString().length > 0
+      source: String(renderer.prop("icon_source", ""))
+      sourceSize.width: width
+      sourceSize.height: height
+      fillMode: Image.PreserveAspectFit
+      onStatusChanged: {
+        if (status === Image.Error)
+          renderer.componentError("item_delegate_icon_failed",
+            "Unable to load the declared item delegate icon image", { source: String(source) })
+      }
+    }
+
+    Text {
+      Layout.preferredWidth: Number(renderer.prop("icon_size", 22))
+      Layout.alignment: Qt.AlignVCenter
+      visible: text.length > 0 && String(renderer.prop("icon_source", "")).length === 0
+      text: String(renderer.prop("icon", "")).length > 0
+        ? renderer.iconGlyph(renderer.prop("icon", "")) : ""
+      textFormat: Text.PlainText
+      color: renderer.prop("icon_color", delegateRoot.selected
+        ? renderer.prop("selected_foreground", renderer.prop("accent", Color.accent))
+        : renderer.prop("foreground", renderer.foreground))
+      font.family: renderer.fontFamily
+      font.pixelSize: Number(renderer.prop("icon_size", 22))
+      horizontalAlignment: Text.AlignHCenter
+    }
+
+    ColumnLayout {
+      Layout.fillWidth: true
+      spacing: Style.spacing.xs
+
+      Text {
+        Layout.fillWidth: true
+        text: delegateRoot.text
+        textFormat: Text.PlainText
+        color: delegateRoot.selected
+          ? renderer.prop("selected_foreground", renderer.prop("foreground", renderer.foreground))
+          : renderer.prop("foreground", renderer.foreground)
+        font: delegateRoot.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
+      }
+    }
+
+    Text {
+      Layout.alignment: Qt.AlignVCenter
+      visible: text.length > 0
+      text: String(renderer.prop("trailing_text", ""))
+      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))
+    }
+
+    Text {
+      Layout.alignment: Qt.AlignVCenter
+      visible: renderer.prop("show_indicator", false) === true
+        && String(renderer.prop("trailing_text", "")).length === 0
+      text: renderer.iconGlyph("chevron_right")
+      textFormat: Text.PlainText
+      color: renderer.prop("muted", Color.muted)
+      font.family: renderer.fontFamily
+      font.pixelSize: Number(renderer.prop("icon_size", 22))
+    }
+  }
+
+  onClicked: {
+    var payload = eventPayload()
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", payload)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "activate", payload)
+  }
+  onToggled: {
+    var payload = eventPayload()
+    if (renderer.subscribed("toggle"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "toggle", payload)
+    if (renderer.subscribed("change"))
+      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/KeyCatcher.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.PanelKeyCatcher {
+  required property var renderer
+      blocked: renderer.prop("blocked", false) === true
+      implicitWidth: keyContent.implicitWidth
+      implicitHeight: keyContent.implicitHeight
+      onMoveRequested: function(dx, dy) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "move", { dx: dx, dy: dy }) }
+      onActivateRequested: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "activate", {})
+      onReturnRequested: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "return", {})
+      onCloseRequested: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "close", {})
+      onDeleteRequested: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "delete", {})
+      onTabRequested: function(direction) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "tab", { direction: direction }) }
+      onTextKey: function(text) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "text", { text: text }) }
+      Column {
+        id: keyContent
+        Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+      }
+    }

data/Components/Builtins/Label.qml

@@ -0,0 +1,43 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+QQC.Label {
+  required property var renderer
+      text: String(renderer.prop("text", ""))
+      color: renderer.prop("color", renderer.foreground)
+      font.family: renderer.fontFamily
+      font.pixelSize: Number(renderer.prop("size", Style.font.body))
+      font.bold: renderer.prop("bold", false) === true
+      width: Number(renderer.prop("width", implicitWidth))
+      wrapMode: renderer.prop("wrap", false) === true ? Text.Wrap : Text.NoWrap
+      elide: {
+        var mode = String(renderer.prop("elide", "none"))
+        if (mode === "left") return Text.ElideLeft
+        if (mode === "middle") return Text.ElideMiddle
+        if (mode === "right") return Text.ElideRight
+        return Text.ElideNone
+      }
+      horizontalAlignment: {
+        var alignment = String(renderer.prop("horizontal_alignment", "left"))
+        if (alignment === "center") return Text.AlignHCenter
+        if (alignment === "right") return Text.AlignRight
+        if (alignment === "justify") return Text.AlignJustify
+        return Text.AlignLeft
+      }
+      verticalAlignment: String(renderer.prop("vertical_alignment", "center")) === "top" ? Text.AlignTop
+        : (String(renderer.prop("vertical_alignment", "center")) === "bottom" ? Text.AlignBottom : Text.AlignVCenter)
+      maximumLineCount: Number(renderer.prop("maximum_lines", 2147483647))
+      textFormat: {
+        var format = String(renderer.prop("format", "plain"))
+        if (format === "rich") return Text.RichText
+        if (format === "markdown") return Text.MarkdownText
+        if (format === "styled") return Text.StyledText
+        return Text.PlainText
+      }
+      onLinkActivated: function(link) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "link", { value: link }) }
+    }

data/Components/Builtins/LayoutItemProxy.qml

@@ -0,0 +1,51 @@
+import QtQuick
+import QtQuick.Layouts
+
+LayoutItemProxy {
+  id: proxy
+
+  required property var renderer
+  readonly property string targetId: String(renderer.prop("target", ""))
+
+  width: renderer.prop("width", null) === null ? implicitWidth : Number(renderer.prop("width", implicitWidth))
+  height: renderer.prop("height", null) === null ? implicitHeight : Number(renderer.prop("height", implicitHeight))
+  Layout.fillWidth: renderer.prop("fill_width", false) === true
+  Layout.fillHeight: renderer.prop("fill_height", false) === true
+  Layout.preferredWidth: Number(renderer.prop("preferred_width", -1))
+  Layout.preferredHeight: Number(renderer.prop("preferred_height", -1))
+  Layout.minimumWidth: Number(renderer.prop("minimum_width", 0))
+  Layout.minimumHeight: Number(renderer.prop("minimum_height", 0))
+  Layout.maximumWidth: Number(renderer.prop("maximum_width", Infinity))
+  Layout.maximumHeight: Number(renderer.prop("maximum_height", Infinity))
+  Layout.alignment: renderer.layoutAlignment(renderer.prop("alignment", "center"), "center")
+  Layout.margins: Number(renderer.prop("margins", 0))
+  Layout.leftMargin: Number(renderer.prop("left_margin", Layout.margins))
+  Layout.topMargin: Number(renderer.prop("top_margin", Layout.margins))
+  Layout.rightMargin: Number(renderer.prop("right_margin", Layout.margins))
+  Layout.bottomMargin: Number(renderer.prop("bottom_margin", Layout.margins))
+
+  function resolveTarget() {
+    var resolved = renderer.findRenderedItem(targetId)
+    if (resolved && resolved !== proxy) target = resolved
+  }
+
+  onTargetIdChanged: {
+    target = null
+    Qt.callLater(resolveTarget)
+  }
+  onTargetChanged: {
+    if (renderer.subscribed("target_change"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "target_change", {
+        target: target ? targetId : null,
+        resolved: target !== null
+      })
+  }
+  Component.onCompleted: Qt.callLater(resolveTarget)
+
+  Timer {
+    interval: 16
+    repeat: true
+    running: proxy.targetId !== "" && proxy.target === null
+    onTriggered: proxy.resolveTarget()
+  }
+}

data/Components/Builtins/Legend.qml

@@ -0,0 +1,86 @@
+import QtQuick
+import "../../Theme"
+
+Rectangle {
+    id: legendRoot
+
+    property var renderer: null
+    readonly property var items: renderer ? renderer.prop("items", []) : []
+    readonly property bool horizontal: !renderer || String(renderer.prop("orientation", "horizontal")) === "horizontal"
+
+    implicitWidth: Number(renderer ? renderer.prop("width", horizontal ? legendFlow.implicitWidth : 180) : 180)
+    implicitHeight: Number(renderer ? renderer.prop("height", horizontal ? 36 : legendFlow.implicitHeight) : 36)
+    color: renderer ? renderer.prop("background", "transparent") : "transparent"
+
+    Flow {
+        id: legendFlow
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        height: implicitHeight
+        spacing: Number(renderer ? renderer.prop("spacing", 12) : 12)
+        flow: legendRoot.horizontal ? Flow.LeftToRight : Flow.TopToBottom
+
+        Repeater {
+            model: legendRoot.items
+
+            delegate: Row {
+                required property int index
+                required property var modelData
+                readonly property bool selected: {
+                    var value = renderer.prop("selected", null);
+                    return value === index || value === (modelData && modelData.value !== undefined ? modelData.value : modelData);
+                }
+
+                spacing: 6
+                height: Math.max(marker.height, label.implicitHeight)
+                opacity: renderer.prop("selected", null) === null || selected ? 1 : 0.55
+
+                Rectangle {
+                    id: marker
+
+                    anchors.verticalCenter: parent.verticalCenter
+                    width: Number(renderer.prop("marker_size", 12))
+                    height: width
+                    radius: width / 4
+                    color: String(modelData && modelData.color !== undefined ? modelData.color : Color.accent)
+                }
+
+                Text {
+                    id: label
+
+                    anchors.verticalCenter: parent.verticalCenter
+                    text: String(modelData && modelData.label !== undefined ? modelData.label : modelData)
+                    color: parent.selected ? renderer.prop("foreground", renderer.foreground) : renderer.prop("muted", renderer.prop("foreground", renderer.foreground))
+                    font.family: renderer.prop("font_family", renderer.fontFamily)
+                    font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+                }
+
+                TapHandler {
+                    enabled: renderer.prop("interactive", false) === true
+                    onTapped: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "select", {
+                        "index": index,
+                        "item": modelData
+                    })
+                }
+
+                HoverHandler {
+                    enabled: renderer.subscribed("hover")
+                    onHoveredChanged: {
+                        if (hovered) {
+                            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", {
+                            "index": index,
+                            "item": modelData
+                        });
+                        }
+                    }
+                }
+
+            }
+
+        }
+
+    }
+
+}

data/Components/Builtins/Line.qml

@@ -0,0 +1,28 @@
+import QtQuick
+import QtQuick.Shapes
+
+Shape {
+  id: lineRoot
+  required property var renderer
+  implicitWidth: Number(renderer.prop("width", Math.max(Number(renderer.prop("x1", 0)), Number(renderer.prop("x2", 100))) + Number(renderer.prop("stroke_width", 1))))
+  implicitHeight: Number(renderer.prop("height", Math.max(Number(renderer.prop("y1", 0)), Number(renderer.prop("y2", 0))) + Number(renderer.prop("stroke_width", 1))))
+  antialiasing: renderer.prop("antialiasing", true) !== false
+  ShapePath {
+    strokeColor: renderer.prop("stroke", renderer.foreground)
+    fillColor: "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))
+    startX: Number(renderer.prop("x1", 0))
+    startY: Number(renderer.prop("y1", 0))
+    PathLine { x: Number(renderer.prop("x2", 100)); y: Number(renderer.prop("y2", 0)) }
+  }
+  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 }) }
+  }
+}