zui 0.0.1

data/Components/Builtins/LineChart.qml

@@ -0,0 +1,87 @@
+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: lineCanvas
+        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 pad = Math.max(8, Number(renderer.prop("point_size", 5)) + 3)
+          var chartWidth = Math.max(1, width - pad * 2)
+          var chartHeight = Math.max(1, height - pad * 2)
+          var low = renderer.prop("minimum", null)
+          var high = renderer.prop("maximum", null)
+          if (low === null) low = Math.min.apply(Math, values)
+          if (high === null) high = Math.max.apply(Math, values)
+          low = Number(low); high = Number(high)
+          if (high === low) { high += 1; low -= 1 }
+
+          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 points = []
+          for (var index = 0; index < values.length; index++) {
+            var x = pad + (values.length === 1 ? chartWidth / 2 : chartWidth * index / (values.length - 1))
+            var y = pad + chartHeight * (1 - (values[index] - low) / (high - low))
+            points.push({ x: x, y: y })
+          }
+          var fill = String(renderer.prop("fill_color", ""))
+          if (fill.length > 0 && points.length > 1) {
+            ctx.beginPath(); ctx.moveTo(points[0].x, height - pad)
+            for (var fillIndex = 0; fillIndex < points.length; fillIndex++) ctx.lineTo(points[fillIndex].x, points[fillIndex].y)
+            ctx.lineTo(points[points.length - 1].x, height - pad); ctx.closePath()
+            ctx.fillStyle = fill; ctx.fill()
+          }
+          ctx.beginPath(); ctx.moveTo(points[0].x, points[0].y)
+          for (var lineIndex = 1; lineIndex < points.length; lineIndex++) ctx.lineTo(points[lineIndex].x, points[lineIndex].y)
+          ctx.strokeStyle = renderer.prop("color", Color.accent)
+          ctx.lineWidth = Number(renderer.prop("line_width", 2)); ctx.stroke()
+          if (renderer.prop("show_points", true) !== false) {
+            ctx.fillStyle = renderer.prop("color", Color.accent)
+            var pointSize = Number(renderer.prop("point_size", 5))
+            for (var pointIndex = 0; pointIndex < points.length; pointIndex++) {
+              ctx.beginPath(); ctx.arc(points[pointIndex].x, points[pointIndex].y, pointSize, 0, Math.PI * 2); ctx.fill()
+            }
+          }
+        }
+      }
+
+      Connections {
+        target: root
+        function onNodeChanged() { lineCanvas.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.round(mouse.x / Math.max(1, width) * (values.length - 1))))
+          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/ListModel.qml

@@ -0,0 +1,8 @@
+import QtQuick
+
+Item {
+  id:modelRoot;property var renderer:null;property alias model:nativeModel
+  function rebuild(){nativeModel.clear();var items=renderer?renderer.prop("items",[]):[];for(var i=0;i<items.length;i++){var item=items[i];nativeModel.append(item!==null&&typeof item==="object"&&!Array.isArray(item)?item:{value:item})}if(renderer){renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"count_change",{value:nativeModel.count});renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"change",{count:nativeModel.count})}}
+  ListModel{id:nativeModel}
+  Component.onCompleted:rebuild();Connections{target:renderer;function onNodeChanged(){modelRoot.rebuild()}}
+}

data/Components/Builtins/ListView.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
+
+ListView {
+  required property var renderer
+      id: listControl
+      readonly property var sourceItems: renderer.prop("items", [])
+      readonly property string keyField: String(renderer.prop("key_field", "id"))
+      readonly property string labelField: String(renderer.prop("label_field", "label"))
+      readonly property string descriptionField: String(renderer.prop("description_field", "description"))
+      readonly property string iconField: String(renderer.prop("icon_field", "icon"))
+      implicitWidth: Number(renderer.prop("width", 280)); implicitHeight: Number(renderer.prop("height", 240))
+      orientation: String(renderer.prop("orientation", "vertical")) === "horizontal" ? ListView.Horizontal : ListView.Vertical
+      spacing: Number(renderer.prop("spacing", Style.spacing.labelGap)); clip: true; model: sourceItems
+      currentIndex: {
+        var selected = renderer.prop("selected", null)
+        for (var i = 0; i < sourceItems.length; i++) {
+          var item = sourceItems[i]
+          var key = typeof item === "object" ? item[keyField] : item
+          if (key === selected) return i
+        }
+        return -1
+      }
+      onContentXChanged: if (moving) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "scroll", { x: contentX, y: contentY })
+      onContentYChanged: if (moving) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "scroll", { x: contentX, y: contentY })
+
+      delegate: ZuiControls.CursorSurface {
+        required property var modelData
+        required property int index
+        readonly property var value: typeof modelData === "object" ? modelData[listControl.keyField] : modelData
+        width: listControl.orientation === ListView.Vertical ? listControl.width : implicitWidth
+        implicitWidth: rowContent.implicitWidth + Style.spacing.rowPaddingX * 2
+        implicitHeight: Math.max(Style.spacing.controlHeight, rowContent.implicitHeight + Style.spacing.controlPaddingY * 2)
+        current: index === listControl.currentIndex
+        foreground: renderer.foreground
+        Row {
+          id: rowContent
+          anchors.centerIn: parent
+          spacing: Style.spacing.controlGap
+          Text { visible: text !== ""; text: renderer.iconGlyph(typeof modelData === "object" ? modelData[listControl.iconField] : ""); textFormat: Text.PlainText; color: renderer.foreground; font.family: renderer.fontFamily }
+          Column {
+            Text { text: String(typeof modelData === "object" ? (modelData[listControl.labelField] ?? value) : modelData); textFormat: Text.PlainText; color: renderer.foreground; font.family: renderer.fontFamily }
+            Text { visible: text !== ""; text: String(typeof modelData === "object" ? (modelData[listControl.descriptionField] || "") : ""); textFormat: Text.PlainText; color: Qt.darker(renderer.foreground, 1.4); font.family: renderer.fontFamily; font.pixelSize: Style.font.caption }
+          }
+        }
+        MouseArea {
+          anchors.fill: parent
+          onClicked: {
+            listControl.currentIndex = index
+            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: parent.value, index: index, item: modelData })
+            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "activate", { value: parent.value, index: index, item: modelData })
+          }
+        }
+      }
+
+      Text {
+        anchors.centerIn: parent; visible: listControl.count === 0
+        text: String(renderer.prop("empty_text", "No items")); textFormat: Text.PlainText; color: Qt.darker(renderer.foreground, 1.4); font.family: renderer.fontFamily
+      }
+    }

data/Components/Builtins/Loader.qml

@@ -0,0 +1,33 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Loader {
+  required property var renderer
+      readonly property var childNode: renderer.node && Array.isArray(renderer.node.children) && renderer.node.children.length > 0
+        ? renderer.node.children[0] : null
+      active: renderer.prop("active", true) !== false && childNode !== null
+      asynchronous: renderer.prop("asynchronous", false) === true
+      source: active ? Qt.resolvedUrl("../../ControlNode.qml") : ""
+      width: Number(renderer.prop("width", item ? item.implicitWidth : 0))
+      height: Number(renderer.prop("height", item ? item.implicitHeight : 0))
+      onLoaded: {
+        item.bridge = renderer.bridge
+        item.surfaceName = renderer.surfaceName
+        item.controlId = String(childNode.id)
+        item.foreground = renderer.foreground
+        item.fontFamily = renderer.fontFamily
+        if (renderer.subscribed("loaded")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "loaded", {})
+      }
+      onStatusChanged: {
+        if (renderer.subscribed("status"))
+          renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "status", { value: status })
+        if (status === Loader.Error)
+          renderer.componentError("loader_child_failed",
+            "Unable to load the child of the declared loader component", {})
+      }
+    }

data/Components/Builtins/Markdown.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
+
+Text {
+  required property var renderer
+      text: String(renderer.prop("text", ""))
+      textFormat: Text.MarkdownText
+      baseUrl: String(renderer.prop("base_url", ""))
+      color: renderer.prop("color", renderer.foreground)
+      linkColor: renderer.prop("link_color", Color.accent)
+      font.family: renderer.fontFamily
+      font.pixelSize: Number(renderer.prop("size", Style.font.body))
+      width: Number(renderer.prop("width", implicitWidth))
+      wrapMode: renderer.prop("wrap", true) !== false ? Text.Wrap : Text.NoWrap
+      maximumLineCount: Number(renderer.prop("maximum_lines", 2147483647))
+      onLinkActivated: function(link) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "link", { value: link }) }
+      HoverHandler { cursorShape: parent.hoveredLink.length > 0 ? Qt.PointingHandCursor : Qt.ArrowCursor }
+    }

data/Components/Builtins/MediaDevices.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import QtMultimedia
+
+Item {
+  id:devicesRoot;property var renderer:null
+  function payload(list){var values=[];for(var i=0;i<list.length;i++)values.push({id:String(list[i].id),description:list[i].description,default:list[i].isDefault});return values}
+  function emitAll(){if(!renderer)return;var kind=String(renderer.prop("kind","all"));if(kind==="all"||kind==="video_inputs")renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"video_inputs",{values:payload(nativeDevices.videoInputs)});if(kind==="all"||kind==="audio_inputs")renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"audio_inputs",{values:payload(nativeDevices.audioInputs)});if(kind==="all"||kind==="audio_outputs")renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"audio_outputs",{values:payload(nativeDevices.audioOutputs)});renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"change",{kind:kind,revision:Number(renderer.prop("refresh_revision",0))})}
+  MediaDevices{id:nativeDevices;onVideoInputsChanged:devicesRoot.emitAll();onAudioInputsChanged:devicesRoot.emitAll();onAudioOutputsChanged:devicesRoot.emitAll()}
+  Component.onCompleted:emitAll();Connections{target:renderer;function onNodeChanged(){devicesRoot.emitAll()}}
+}

data/Components/Builtins/MediaPlayer.qml

@@ -0,0 +1,27 @@
+import QtQuick
+import QtMultimedia
+
+Item {
+  id: playerRoot
+  property var renderer: null
+  property alias mediaPlayer: nativePlayer
+  property alias audioOutput: nativeAudioOutput
+  property int handledCommandRevision: -1
+  function audioDeviceValid(){var requested=String(renderer?renderer.prop("audio_device",""):"");if(requested==="")return true;var devices=mediaDevices.audioOutputs;for(var index=0;index<devices.length;index++)if(String(devices[index].id)===requested||devices[index].description===requested)return true;if(renderer)renderer.componentError("audio_output_device_not_found","The declared media-player audio output does not exist",{device:requested});return false}
+  function audioDevice(){var requested=String(renderer?renderer.prop("audio_device",""):"");var devices=mediaDevices.audioOutputs;if(requested==="")return mediaDevices.defaultAudioOutput;for(var index=0;index<devices.length;index++)if(String(devices[index].id)===requested||devices[index].description===requested)return devices[index];return null}
+  function send(name,payload){if(renderer&&renderer.subscribed(name))renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,name,payload||{})}
+  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",renderer.prop("playback","")));if(value==="play")nativePlayer.play();else if(value==="pause")nativePlayer.pause();else if(value==="stop")nativePlayer.stop()}
+  MediaDevices{id:mediaDevices}
+  AudioOutput { id:nativeAudioOutput;device:playerRoot.audioDevice();volume:playerRoot.audioDeviceValid()?Math.max(0,Math.min(1,Number(renderer?renderer.prop("volume",1):1))):0;muted:!playerRoot.audioDeviceValid()||(renderer&&renderer.prop("muted",false)===true) }
+  MediaPlayer {
+    id:nativePlayer;source:renderer?renderer.assetUrl(renderer.prop("source","")):"";autoPlay:renderer&&renderer.prop("auto_play",false)===true;loops:Number(renderer?renderer.prop("loops",1):1);playbackRate:Number(renderer?renderer.prop("playback_rate",1):1);position:Number(renderer?renderer.prop("position",0):0);audioOutput:nativeAudioOutput
+    onPlaybackStateChanged:{var name=playbackState===MediaPlayer.PlayingState?"play":(playbackState===MediaPlayer.PausedState?"pause":"stop");playerRoot.send(name,{})}
+    onMediaStatusChanged:playerRoot.send("media_status",{value:mediaStatus})
+    onErrorOccurred:function(error,message){renderer.componentError("media_playback_failed",message,{native_code:error,source:String(source)})}
+    onPositionChanged:playerRoot.send("position",{value:position,duration:duration})
+    onDurationChanged:playerRoot.send("duration",{value:duration})
+    onBufferProgressChanged:playerRoot.send("buffer",{value:bufferProgress})
+    onTracksChanged:playerRoot.send("tracks",{audio:audioTracks.length,video:videoTracks.length,subtitles:subtitleTracks.length})
+  }
+  Component.onCompleted:command();Connections{target:renderer;function onNodeChanged(){playerRoot.command()}}
+}

data/Components/Builtins/MediaRecorder.qml

@@ -0,0 +1,16 @@
+import QtQuick
+import QtMultimedia
+
+Item {
+  id:recorderRoot;property var renderer:null;property alias mediaRecorder:nativeRecorder;property int handledCommandRevision:-1;readonly property var sessionItem:renderer?renderer.findRenderedItem(renderer.prop("session","")):null
+  function quality(){var value=String(renderer?renderer.prop("quality","normal"):"normal");if(value==="very_low")return MediaRecorder.VeryLowQuality;if(value==="low")return MediaRecorder.LowQuality;if(value==="high")return MediaRecorder.HighQuality;if(value==="very_high")return MediaRecorder.VeryHighQuality;return MediaRecorder.NormalQuality}
+  function resolution(){var value=renderer?renderer.prop("resolution",[]):[];if(Array.isArray(value))return Qt.size(Number(value[0]||0),Number(value[1]||0));if(value&&typeof value==="object")return Qt.size(Number(value.width||0),Number(value.height||0));return Qt.size(0,0)}
+  function fileFormat(){var value=String(renderer?renderer.prop("media_format","unspecified"):"unspecified").toLowerCase();var values={wmv:MediaFormat.WMV,avi:MediaFormat.AVI,matroska:MediaFormat.Matroska,mkv:MediaFormat.Matroska,mp4:MediaFormat.MPEG4,mpeg4:MediaFormat.MPEG4,ogg:MediaFormat.Ogg,quicktime:MediaFormat.QuickTime,webm:MediaFormat.WebM,aac:MediaFormat.AAC,mp3:MediaFormat.MP3,flac:MediaFormat.FLAC,wave:MediaFormat.Wave,wav:MediaFormat.Wave};return values[value]===undefined?MediaFormat.UnspecifiedFormat:values[value]}
+  function audioCodec(){var value=String(renderer?renderer.prop("audio_codec","unspecified"):"unspecified").toLowerCase();var values={mp3:MediaFormat.AudioCodec.MP3,aac:MediaFormat.AudioCodec.AAC,ac3:MediaFormat.AudioCodec.AC3,eac3:MediaFormat.AudioCodec.EAC3,flac:MediaFormat.AudioCodec.FLAC,opus:MediaFormat.AudioCodec.Opus,vorbis:MediaFormat.AudioCodec.Vorbis,wave:MediaFormat.AudioCodec.Wave,wma:MediaFormat.AudioCodec.WMA,alac:MediaFormat.AudioCodec.ALAC};return values[value]===undefined?MediaFormat.AudioCodec.Unspecified:values[value]}
+  function videoCodec(){var value=String(renderer?renderer.prop("video_codec","unspecified"):"unspecified").toLowerCase();var values={mpeg1:MediaFormat.VideoCodec.MPEG1,mpeg2:MediaFormat.VideoCodec.MPEG2,mpeg4:MediaFormat.VideoCodec.MPEG4,h264:MediaFormat.VideoCodec.H264,h265:MediaFormat.VideoCodec.H265,vp8:MediaFormat.VideoCodec.VP8,vp9:MediaFormat.VideoCodec.VP9,av1:MediaFormat.VideoCodec.AV1,theora:MediaFormat.VideoCodec.Theora,wmv:MediaFormat.VideoCodec.WMV,motion_jpeg:MediaFormat.VideoCodec.MotionJPEG};return values[value]===undefined?MediaFormat.VideoCodec.Unspecified:values[value]}
+  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.recorder=nativeRecorder}
+  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==="record")nativeRecorder.record();else if(value==="pause")nativeRecorder.pause();else if(value==="stop")nativeRecorder.stop()}
+  MediaRecorder{id:nativeRecorder;outputLocation:renderer?renderer.assetUrl(renderer.prop("output_location","")):"";quality:recorderRoot.quality();videoResolution:recorderRoot.resolution();mediaFormat.fileFormat:recorderRoot.fileFormat();mediaFormat.audioCodec:recorderRoot.audioCodec();mediaFormat.videoCodec:recorderRoot.videoCodec();videoFrameRate:Number(renderer?renderer.prop("frame_rate",0):0);audioBitRate:Number(renderer?renderer.prop("audio_bit_rate",0):0);videoBitRate:Number(renderer?renderer.prop("video_bit_rate",0):0);onRecorderStateChanged:{var name=recorderState===MediaRecorder.RecordingState?"record":(recorderState===MediaRecorder.PausedState?"pause":"stop");recorderRoot.send(name,{})} onDurationChanged:recorderRoot.send("duration",{value:duration});onErrorOccurred:function(error,errorString){renderer.componentError("media_recording_failed",errorString,{native_code:error})} onActualLocationChanged:recorderRoot.send("location",{value:String(actualLocation)})}
+  Component.onCompleted:{connectSession();command()}onSessionItemChanged:connectSession();Connections{target:renderer;function onNodeChanged(){recorderRoot.command()}}
+}

data/Components/Builtins/Menu.qml

@@ -0,0 +1,119 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import Qt.labs.qmlmodels
+import "../../Theme"
+
+QQC.Menu {
+  id: menuRoot
+
+  required property var renderer
+  readonly property var menuEntries: renderer.prop("items", [])
+  readonly property bool requestedOpen: renderer.prop("opened", false) === true
+    && renderer.prop("visible", true) !== false
+
+  function entryValue(entry, name, fallback) {
+    return entry !== null && typeof entry === "object" && entry[name] !== undefined
+      ? entry[name] : fallback
+  }
+
+  function entryLabel(entry) {
+    return entry !== null && typeof entry === "object"
+      ? String(entry.label === undefined ? (entry.text === undefined ? "" : entry.text) : entry.label)
+      : String(entry === null ? "" : entry)
+  }
+
+  function entryPayload(index, entry, item) {
+    var label = entryLabel(entry)
+    return {
+      index: index,
+      label: label,
+      value: entryValue(entry, "value", label),
+      checked: item ? item.checked : false
+    }
+  }
+
+  function closePolicyValue(value) {
+    var names = Array.isArray(value) ? value : [value || "escape_and_outside"]
+    var result = 0
+    for (var index = 0; index < names.length; index++) {
+      var name = String(names[index])
+      if (name === "escape" || name === "escape_and_outside") result |= QQC.Popup.CloseOnEscape
+      if (name === "outside" || name === "escape_and_outside") result |= QQC.Popup.CloseOnPressOutside
+      if (name === "outside_parent") result |= QQC.Popup.CloseOnPressOutsideParent
+      if (name === "release_outside") result |= QQC.Popup.CloseOnReleaseOutside
+      if (name === "release_outside_parent") result |= QQC.Popup.CloseOnReleaseOutsideParent
+    }
+    return result
+  }
+
+  function syncOpenState() {
+    if (requestedOpen === opened) return
+    if (requestedOpen) open()
+    else close()
+  }
+
+  title: String(renderer.prop("title", ""))
+  x: Number(renderer.prop("x", 0))
+  y: Number(renderer.prop("y", 0))
+  width: Number(renderer.prop("width", 240))
+  modal: renderer.prop("modal", false) === true
+  closePolicy: closePolicyValue(renderer.prop("close_policy", "escape_and_outside"))
+  enabled: renderer.prop("enabled", true) !== false
+
+  background: Rectangle {
+    color: renderer.prop("background", Color.background)
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: String(renderer.prop("border_color", "")).length > 0 ? Style.normalBorderWidth : 0
+    border.color: renderer.prop("border_color", "transparent")
+  }
+
+  Instantiator {
+    model: Array.isArray(menuRoot.menuEntries) ? menuRoot.menuEntries : []
+    delegate: DelegateChooser {
+      role: "separator"
+
+      DelegateChoice {
+        roleValue: true
+        QQC.MenuSeparator {}
+      }
+
+      DelegateChoice {
+        QQC.MenuItem {
+          required property int index
+          required property var modelData
+          text: menuRoot.entryLabel(modelData)
+          enabled: menuRoot.enabled && menuRoot.entryValue(modelData, "enabled", true) !== false
+          checkable: menuRoot.entryValue(modelData, "checkable", false) === true
+          checked: menuRoot.entryValue(modelData, "checked", false) === true
+          font.family: String(renderer.prop("font_family", renderer.fontFamily))
+          font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+          icon.name: String(menuRoot.entryValue(modelData, "icon", ""))
+          icon.source: String(menuRoot.entryValue(modelData, "icon_source", ""))
+          icon.color: checked ? renderer.prop("accent", Color.accent)
+            : renderer.prop("foreground", renderer.foreground)
+          onClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+            "trigger", menuRoot.entryPayload(index, modelData, this))
+          onToggled: {
+            if (renderer.subscribed("toggle"))
+              renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+                "toggle", menuRoot.entryPayload(index, modelData, this))
+          }
+          onHighlightedChanged: {
+            if (highlighted && renderer.subscribed("highlight"))
+              renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+                "highlight", menuRoot.entryPayload(index, modelData, this))
+          }
+        }
+      }
+    }
+    onObjectAdded: function(index, object) { menuRoot.insertItem(index, object) }
+    onObjectRemoved: function(index, object) { menuRoot.removeItem(object) }
+  }
+
+  Component.onCompleted: syncOpenState()
+  onRequestedOpenChanged: syncOpenState()
+  onOpened: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "open", {})
+  onClosed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "close", {})
+  onAboutToShow: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "about_to_show", {})
+  onAboutToHide: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "about_to_hide", {})
+}

data/Components/Builtins/MenuBar.qml

@@ -0,0 +1,128 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import Qt.labs.qmlmodels
+import "../../Theme"
+
+QQC.MenuBar {
+  id: menuBarRoot
+
+  required property var renderer
+  readonly property var menuDefinitions: renderer.prop("menus", [])
+
+  function valueOf(object, name, fallback) {
+    return object !== null && typeof object === "object" && object[name] !== undefined
+      ? object[name] : fallback
+  }
+
+  function labelOf(object) {
+    return object !== null && typeof object === "object"
+      ? String(object.label === undefined ? (object.text === undefined ? "" : object.text) : object.label)
+      : String(object === null ? "" : object)
+  }
+
+  function itemPayload(menuIndex, itemIndex, definition, item) {
+    var label = labelOf(definition)
+    return {
+      menu_index: menuIndex,
+      item_index: itemIndex,
+      label: label,
+      value: valueOf(definition, "value", label),
+      checked: item ? item.checked : false
+    }
+  }
+
+  implicitWidth: Number(renderer.prop("width", 640))
+  implicitHeight: Number(renderer.prop("height", 42))
+  spacing: Number(renderer.prop("spacing", 0))
+  padding: Number(renderer.prop("padding", Style.spacing.xs))
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+
+  background: Rectangle {
+    color: renderer.prop("background", Color.background)
+    radius: Number(renderer.prop("radius", 0))
+    border.width: String(renderer.prop("border_color", "")).length > 0 ? Style.normalBorderWidth : 0
+    border.color: renderer.prop("border_color", "transparent")
+  }
+
+  Instantiator {
+    model: Array.isArray(menuBarRoot.menuDefinitions) ? menuBarRoot.menuDefinitions : []
+    delegate: QQC.Menu {
+      id: nativeMenu
+      required property int index
+      required property var modelData
+      readonly property int menuIndex: index
+      readonly property var menuData: modelData
+      title: String(menuBarRoot.valueOf(menuData, "title", menuBarRoot.labelOf(menuData)))
+      enabled: menuBarRoot.enabled && menuBarRoot.valueOf(menuData, "enabled", true) !== false
+
+      background: Rectangle {
+        color: renderer.prop("background", Color.background)
+        radius: Number(renderer.prop("radius", Style.cornerRadius))
+        border.width: String(renderer.prop("border_color", "")).length > 0 ? Style.normalBorderWidth : 0
+        border.color: renderer.prop("border_color", "transparent")
+      }
+
+      Instantiator {
+        model: Array.isArray(nativeMenu.menuData.items) ? nativeMenu.menuData.items : []
+        delegate: DelegateChooser {
+          role: "separator"
+
+          DelegateChoice {
+            roleValue: true
+            QQC.MenuSeparator {}
+          }
+
+          DelegateChoice {
+            QQC.MenuItem {
+              required property int index
+              required property var modelData
+              text: menuBarRoot.labelOf(modelData)
+              enabled: nativeMenu.enabled && menuBarRoot.valueOf(modelData, "enabled", true) !== false
+              checkable: menuBarRoot.valueOf(modelData, "checkable", false) === true
+              checked: menuBarRoot.valueOf(modelData, "checked", false) === true
+              font.family: String(renderer.prop("font_family", renderer.fontFamily))
+              font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+              icon.name: String(menuBarRoot.valueOf(modelData, "icon", ""))
+              icon.source: String(menuBarRoot.valueOf(modelData, "icon_source", ""))
+              icon.color: checked ? renderer.prop("accent", Color.accent)
+                : renderer.prop("foreground", renderer.foreground)
+              onClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+                "trigger", menuBarRoot.itemPayload(nativeMenu.menuIndex, index, modelData, this))
+              onToggled: {
+                if (renderer.subscribed("toggle"))
+                  renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+                    "toggle", menuBarRoot.itemPayload(nativeMenu.menuIndex, index, modelData, this))
+              }
+              onHighlightedChanged: {
+                if (highlighted && renderer.subscribed("highlight"))
+                  renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+                    "highlight", menuBarRoot.itemPayload(nativeMenu.menuIndex, index, modelData, this))
+              }
+            }
+          }
+        }
+        onObjectAdded: function(index, object) { nativeMenu.insertItem(index, object) }
+        onObjectRemoved: function(index, object) { nativeMenu.removeItem(object) }
+      }
+
+      onOpened: {
+        if (renderer.subscribed("menu_open"))
+          renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "menu_open",
+            { index: menuIndex, title: title })
+      }
+      onClosed: {
+        if (renderer.subscribed("menu_close"))
+          renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "menu_close",
+            { index: menuIndex, title: title })
+      }
+    }
+    onObjectAdded: function(index, object) { menuBarRoot.insertMenu(index, object) }
+    onObjectRemoved: function(index, object) { menuBarRoot.removeMenu(object) }
+  }
+
+  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/MenuItem.qml

@@ -0,0 +1,77 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.MenuItem {
+  id: itemRoot
+
+  required property var renderer
+
+  function payload(shortcutActivation) {
+    return {
+      label: text,
+      value: renderer.prop("value", text),
+      checked: checked,
+      shortcut: shortcutActivation === true
+    }
+  }
+
+  text: String(renderer.prop("text", ""))
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  checkable: renderer.prop("checkable", false) === true
+  checked: renderer.prop("checked", false) === true
+  highlighted: renderer.prop("highlighted", false) === true
+  hoverEnabled: renderer.subscribed("hover") || renderer.subscribed("highlight")
+  implicitWidth: Number(renderer.prop("width", 240))
+  implicitHeight: Number(renderer.prop("height", 42))
+  icon.name: String(renderer.prop("icon", ""))
+  icon.source: String(renderer.prop("icon_source", ""))
+  icon.color: renderer.prop("icon_color", highlighted
+    ? renderer.prop("highlighted_foreground", renderer.prop("accent", Color.accent))
+    : renderer.prop("foreground", renderer.foreground))
+  font.family: String(renderer.prop("font_family", renderer.fontFamily))
+  font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+  palette.buttonText: highlighted
+    ? renderer.prop("highlighted_foreground", renderer.prop("accent", Color.accent))
+    : (enabled ? renderer.prop("foreground", renderer.foreground)
+      : renderer.prop("muted", Color.muted))
+
+  background: Rectangle {
+    color: itemRoot.highlighted
+      ? renderer.prop("highlighted_background", renderer.prop("background", "transparent"))
+      : renderer.prop("background", "transparent")
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: String(renderer.prop("border_color", "")).length > 0 ? Style.normalBorderWidth : 0
+    border.color: renderer.prop("border_color", "transparent")
+  }
+
+  Shortcut {
+    sequence: String(renderer.prop("shortcut", ""))
+    enabled: itemRoot.enabled && sequence.toString().length > 0
+    onActivated: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      "trigger", itemRoot.payload(true))
+  }
+
+  onClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    "trigger", payload(false))
+  onToggled: {
+    var current = payload(false)
+    if (renderer.subscribed("toggle"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "toggle", current)
+    if (renderer.subscribed("change"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", current)
+  }
+  onPressed: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "press", payload(false))
+  onReleased: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "release", payload(false))
+  onHoveredChanged: {
+    if (renderer.subscribed("hover"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: hovered })
+  }
+  onHighlightedChanged: {
+    if (renderer.subscribed("highlight"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "highlight", { value: highlighted })
+  }
+  onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    activeFocus ? "focus" : "blur", {})
+}

data/Components/Builtins/MenuSeparator.qml

@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Controls as QQC
+
+QQC.MenuSeparator {
+  id: separatorRoot
+
+  required property var renderer
+
+  implicitWidth: Number(renderer.prop("width", 220))
+  implicitHeight: Number(renderer.prop("height",
+    Number(renderer.prop("thickness", 1)) + Number(renderer.prop("padding", 8)) * 2))
+  padding: Number(renderer.prop("padding", 8))
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  opacity: Number(renderer.prop("opacity", 0.25))
+
+  contentItem: Item {}
+  background: Rectangle {
+    anchors.left: parent.left
+    anchors.right: parent.right
+    anchors.verticalCenter: parent.verticalCenter
+    anchors.leftMargin: separatorRoot.padding
+    anchors.rightMargin: separatorRoot.padding
+    height: Number(renderer.prop("thickness", 1))
+    color: renderer.prop("color", renderer.foreground)
+  }
+
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+}