zui 0.0.1

data/Components/Builtins/FontPicker.qml

@@ -0,0 +1,91 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Dialogs
+import "../../Theme"
+
+QQC.Button {
+  id: picker
+
+  required property var renderer
+  readonly property font chosenFont: buildFont()
+
+  function buildFont() {
+    var specification = {
+      family: String(renderer.prop("family", renderer.fontFamily)),
+      weight: Number(renderer.prop("weight", Font.Normal)),
+      italic: renderer.prop("italic", false) === true,
+      underline: renderer.prop("underline", false) === true,
+      strikeout: renderer.prop("strikeout", false) === true
+    }
+    var pointSize = Number(renderer.prop("point_size", -1))
+    var pixelSize = Number(renderer.prop("pixel_size", -1))
+    if (pointSize > 0) specification.pointSize = pointSize
+    else if (pixelSize > 0) specification.pixelSize = pixelSize
+    return Qt.font(specification)
+  }
+
+  function fontPayload(value) {
+    return {
+      value: value.family,
+      family: value.family,
+      point_size: value.pointSize,
+      pixel_size: value.pixelSize,
+      weight: value.weight,
+      italic: value.italic,
+      underline: value.underline,
+      strikeout: value.strikeout
+    }
+  }
+
+  implicitWidth: Number(renderer.prop("width", 240))
+  implicitHeight: Number(renderer.prop("height", 44))
+  enabled: renderer.prop("enabled", true) !== false
+  onClicked: fontDialog.open()
+
+  background: Rectangle {
+    color: renderer.prop("background", Color.popups.background)
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: Style.normalBorderWidth
+    border.color: picker.activeFocus
+      ? renderer.prop("accent", Color.accent)
+      : renderer.prop("border_color", renderer.foreground)
+    opacity: picker.down ? 0.72 : 1
+  }
+
+  contentItem: Column {
+    spacing: 2
+    Text {
+      text: String(renderer.prop("label", ""))
+      visible: text.length > 0
+      color: renderer.prop("muted", Color.muted)
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.caption))
+    }
+    Text {
+      width: parent.width
+      text: String(renderer.prop("family", renderer.prop("placeholder", "Choose a font")))
+      elide: Text.ElideRight
+      color: renderer.prop("foreground", renderer.foreground)
+      font: picker.chosenFont
+    }
+  }
+
+  FontDialog {
+    id: fontDialog
+    title: String(renderer.prop("title", "Choose a font"))
+    selectedFont: picker.chosenFont
+    visible: renderer.prop("opened", false) === true
+    options: renderer.prop("native_dialog", true) === false ? FontDialog.DontUseNativeDialog : 0
+
+    onSelectedFontChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      "input", picker.fontPayload(selectedFont))
+    onAccepted: {
+      var payload = picker.fontPayload(selectedFont)
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", payload)
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "accept", payload)
+    }
+    onRejected: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reject", {})
+    onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      visible ? "open" : "close", {})
+  }
+}

data/Components/Builtins/Frame.qml

@@ -0,0 +1,71 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.Frame {
+  id: frameRoot
+
+  required property var renderer
+  readonly property string contentLayout: String(renderer.prop("layout", "column"))
+
+  implicitWidth: Number(renderer.prop("width", 420))
+  implicitHeight: Number(renderer.prop("height", 240))
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  clip: renderer.prop("clip", false) === true
+  padding: Number(renderer.prop("padding", Style.spacing.lg))
+  leftPadding: Number(renderer.prop("left_padding", padding))
+  rightPadding: Number(renderer.prop("right_padding", padding))
+  topPadding: Number(renderer.prop("top_padding", padding))
+  bottomPadding: Number(renderer.prop("bottom_padding", padding))
+
+  background: Rectangle {
+    color: renderer.prop("background", "transparent")
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: Number(renderer.prop("border_width", Style.normalBorderWidth))
+    border.color: renderer.prop("border_color", Color.border)
+  }
+
+  contentItem: Item {
+    LayoutMirroring.enabled: String(renderer.prop("layout_direction", "left_to_right")) === "right_to_left"
+    LayoutMirroring.childrenInherit: true
+
+    Loader {
+      anchors.fill: parent
+      sourceComponent: frameRoot.contentLayout === "row" ? rowContent
+        : (frameRoot.contentLayout === "stack" ? stackContent : columnContent)
+    }
+  }
+
+  Component {
+    id: columnContent
+    Column {
+      spacing: Number(renderer.prop("spacing", Style.spacing.md))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  Component {
+    id: rowContent
+    Row {
+      spacing: Number(renderer.prop("spacing", Style.spacing.md))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  Component {
+    id: stackContent
+    Item {
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  TapHandler {
+    enabled: renderer.subscribed("click")
+    onTapped: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", {})
+  }
+  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/FrameAnimation.qml

@@ -0,0 +1,13 @@
+import QtQuick
+
+Item {
+  id: frameRoot
+  property var renderer: null
+  FrameAnimation {
+    id: nativeFrame
+    running: renderer && renderer.prop("running", true) !== false
+    paused: renderer && renderer.prop("paused", false) === true
+    onTriggered: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "frame", { frame: currentFrame, frame_time: frameTime, smooth_frame_time: smoothFrameTime, elapsed_time: elapsedTime })
+    onRunningChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, running ? "start" : "stop", {})
+  }
+}

data/Components/Builtins/Gauge.qml

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

data/Components/Builtins/Glow.qml

@@ -0,0 +1,15 @@
+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; shadowEnabled: true
+    shadowBlur: Number(renderer.prop("blur", 1)); blurMax: Number(renderer.prop("maximum", 32)); blurMultiplier: Number(renderer.prop("multiplier", 1))
+    shadowHorizontalOffset: 0; shadowVerticalOffset: 0; shadowColor: renderer.prop("color", renderer.foreground)
+    shadowOpacity: Number(renderer.prop("opacity", 1)); shadowScale: Number(renderer.prop("scale", 1)); autoPaddingEnabled: renderer.prop("auto_padding", true) !== false
+  }
+}

data/Components/Builtins/Gradient.qml

@@ -0,0 +1,93 @@
+import QtQuick
+import QtQuick.Shapes
+
+Item {
+  id: gradientRoot
+  required property var renderer
+  property var createdStops: []
+  implicitWidth: Number(renderer.prop("width", 200))
+  implicitHeight: Number(renderer.prop("height", 120))
+
+  function stopPosition(index, count) {
+    var stops = renderer.prop("stops", [])
+    return Array.isArray(stops) && index < stops.length ? Number(stops[index]) : (count <= 1 ? 0 : index / (count - 1))
+  }
+
+  function rebuildStops() {
+    for (var oldIndex = 0; oldIndex < createdStops.length; oldIndex++) createdStops[oldIndex].destroy()
+    var colors = renderer.prop("colors", [])
+    var replacements = []
+    if (Array.isArray(colors)) {
+      for (var index = 0; index < colors.length; index++) {
+        replacements.push(stopFactory.createObject(gradientRoot, {
+          position: stopPosition(index, colors.length), color: String(colors[index])
+        }))
+      }
+    }
+    createdStops = replacements
+  }
+
+  Component { id: stopFactory; GradientStop {} }
+  Connections { target: renderer; function onNodeChanged() { gradientRoot.rebuildStops() } }
+  Component.onCompleted: rebuildStops()
+
+  Shape {
+    anchors.fill: parent
+    visible: String(renderer.prop("type", "linear")) === "linear"
+    antialiasing: renderer.prop("antialiasing", true) !== false
+    ShapePath {
+      strokeColor: renderer.prop("stroke", "transparent")
+      strokeWidth: Number(renderer.prop("stroke_width", 0))
+      fillGradient: LinearGradient {
+        id: linearGradient
+        x1: Number(renderer.prop("start_x", 0)); y1: Number(renderer.prop("start_y", 0))
+        x2: Number(renderer.prop("end_x", gradientRoot.width)); y2: Number(renderer.prop("end_y", 0))
+        stops: String(renderer.prop("type", "linear")) === "linear" ? gradientRoot.createdStops : []
+      }
+      PathRectangle { width: gradientRoot.width; height: gradientRoot.height; radius: Number(renderer.prop("radius", 0)) }
+    }
+  }
+
+  Shape {
+    anchors.fill: parent
+    visible: String(renderer.prop("type", "linear")) === "radial"
+    antialiasing: renderer.prop("antialiasing", true) !== false
+    ShapePath {
+      strokeColor: renderer.prop("stroke", "transparent")
+      strokeWidth: Number(renderer.prop("stroke_width", 0))
+      fillGradient: RadialGradient {
+        id: radialGradient
+        centerX: Number(renderer.prop("center_x", gradientRoot.width / 2)); centerY: Number(renderer.prop("center_y", gradientRoot.height / 2))
+        centerRadius: Number(renderer.prop("center_radius", Math.max(gradientRoot.width, gradientRoot.height) / 2))
+        focalX: Number(renderer.prop("focal_x", centerX)); focalY: Number(renderer.prop("focal_y", centerY))
+        focalRadius: Number(renderer.prop("focal_radius", 0))
+        stops: String(renderer.prop("type", "linear")) === "radial" ? gradientRoot.createdStops : []
+      }
+      PathRectangle { width: gradientRoot.width; height: gradientRoot.height; radius: Number(renderer.prop("radius", 0)) }
+    }
+  }
+
+  Shape {
+    anchors.fill: parent
+    visible: String(renderer.prop("type", "linear")) === "conical"
+    antialiasing: renderer.prop("antialiasing", true) !== false
+    ShapePath {
+      strokeColor: renderer.prop("stroke", "transparent")
+      strokeWidth: Number(renderer.prop("stroke_width", 0))
+      fillGradient: ConicalGradient {
+        id: conicalGradient
+        centerX: Number(renderer.prop("center_x", gradientRoot.width / 2)); centerY: Number(renderer.prop("center_y", gradientRoot.height / 2))
+        angle: Number(renderer.prop("angle", 0))
+        stops: String(renderer.prop("type", "linear")) === "conical" ? gradientRoot.createdStops : []
+      }
+      PathRectangle { width: gradientRoot.width; height: gradientRoot.height; radius: Number(renderer.prop("radius", 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 }) }
+  }
+}

data/Components/Builtins/Grid.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
+
+Grid {
+  required property var renderer
+      columns: Number(renderer.prop("columns", 2))
+      rows: Number(renderer.prop("rows", -1))
+      rowSpacing: Number(renderer.prop("row_spacing", renderer.prop("spacing", Style.spacing.controlGap)))
+      columnSpacing: Number(renderer.prop("column_spacing", renderer.prop("spacing", Style.spacing.controlGap)))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }

data/Components/Builtins/GridLayout.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
+
+GridLayout {
+  required property var renderer
+      columns: Number(renderer.prop("columns", 2))
+      rows: Number(renderer.prop("rows", -1))
+      rowSpacing: Number(renderer.prop("row_spacing", renderer.prop("spacing", Style.spacing.controlGap)))
+      columnSpacing: Number(renderer.prop("column_spacing", renderer.prop("spacing", Style.spacing.controlGap)))
+      Repeater { model: renderer.node.children || []; delegate: renderer.layoutChildDelegateComponent }
+    }

data/Components/Builtins/GridView.qml

@@ -0,0 +1,226 @@
+import QtQuick
+import "../../Theme"
+
+Rectangle {
+  id: gridRoot
+
+  required property var renderer
+  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"))
+  readonly property real gridSpacing: Number(renderer.prop("spacing", Style.spacing.md))
+  readonly property real gridPadding: Number(renderer.prop("padding", Style.spacing.md))
+
+  function itemValue(item) {
+    return item !== null && typeof item === "object" ? item[keyField] : item
+  }
+
+  function itemLabel(item) {
+    if (item !== null && typeof item === "object") {
+      var label = item[labelField]
+      return String(label === undefined || label === null ? itemValue(item) : label)
+    }
+    return String(item === undefined || item === null ? "" : item)
+  }
+
+  function itemDescription(item) {
+    if (item !== null && typeof item === "object") return String(item[descriptionField] || "")
+    return ""
+  }
+
+  function itemIcon(item) {
+    if (item !== null && typeof item === "object") return String(item[iconField] || "")
+    return ""
+  }
+
+  function selectedIndex() {
+    var explicitIndex = renderer.prop("current_index", null)
+    if (explicitIndex !== null) return Math.max(-1, Math.min(sourceItems.length - 1, Number(explicitIndex)))
+    var selectedValue = renderer.prop("selected", null)
+    if (selectedValue === null) return -1
+    for (var index = 0; index < sourceItems.length; index++) {
+      if (itemValue(sourceItems[index]) === selectedValue) return index
+    }
+    return -1
+  }
+
+  function snapModeValue(value) {
+    var name = String(value || "none")
+    if (name === "row" || name === "snap_to_row") return GridView.SnapToRow
+    if (name === "one_row" || name === "snap_one_row") return GridView.SnapOneRow
+    return GridView.NoSnap
+  }
+
+  function boundsBehaviorValue(value) {
+    var name = String(value || "drag_overshoot")
+    if (name === "stop") return Flickable.StopAtBounds
+    if (name === "drag") return Flickable.DragOverBounds
+    if (name === "overshoot") return Flickable.OvershootBounds
+    return Flickable.DragAndOvershootBounds
+  }
+
+  function itemPayload(index) {
+    if (index < 0 || index >= sourceItems.length) return { value: null, index: -1, item: null }
+    var item = sourceItems[index]
+    return { value: itemValue(item), index: index, item: item }
+  }
+
+  function activateIndex(index) {
+    if (index < 0 || index >= sourceItems.length) return
+    gridControl.currentIndex = index
+    var payload = itemPayload(index)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", payload)
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "activate", payload)
+  }
+
+  implicitWidth: Number(renderer.prop("width", 640))
+  implicitHeight: Number(renderer.prop("height", 420))
+  color: 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")
+  enabled: renderer.prop("enabled", true) !== false
+  Accessible.name: String(renderer.prop("accessible_name", "Grid"))
+  Accessible.role: Accessible.List
+
+  GridView {
+    id: gridControl
+    anchors.fill: parent
+    anchors.margins: gridRoot.gridPadding
+    model: gridRoot.sourceItems
+    cellWidth: Number(renderer.prop("cell_width", 160))
+    cellHeight: Number(renderer.prop("cell_height", 120))
+    flow: String(renderer.prop("flow", "left_to_right")) === "top_to_bottom"
+      ? GridView.FlowTopToBottom : GridView.FlowLeftToRight
+    layoutDirection: String(renderer.prop("layout_direction", "left_to_right")) === "right_to_left"
+      ? Qt.RightToLeft : Qt.LeftToRight
+    currentIndex: gridRoot.selectedIndex()
+    highlightMoveDuration: Number(renderer.prop("highlight_move_duration", 180))
+    snapMode: gridRoot.snapModeValue(renderer.prop("snap_mode", "none"))
+    boundsBehavior: gridRoot.boundsBehaviorValue(renderer.prop("bounds_behavior", "drag_overshoot"))
+    keyNavigationWraps: renderer.prop("key_navigation_wraps", false) === true
+    interactive: renderer.prop("interactive", true) !== false
+    clip: renderer.prop("clip", true) !== false
+    focus: true
+
+    delegate: Rectangle {
+      required property var modelData
+      required property int index
+      readonly property bool current: index === gridControl.currentIndex
+
+      width: Math.max(0, gridControl.cellWidth - gridRoot.gridSpacing)
+      height: Math.max(0, gridControl.cellHeight - gridRoot.gridSpacing)
+      radius: Number(renderer.prop("radius", Style.cornerRadius))
+      color: current
+        ? renderer.prop("selected_background", Color.popups.background)
+        : renderer.prop("cell_background", "transparent")
+      border.width: current ? Style.normalBorderWidth : 0
+      border.color: renderer.prop("accent", Color.accent)
+
+      Column {
+        anchors.fill: parent
+        anchors.margins: gridRoot.gridSpacing
+        spacing: Style.spacing.sm
+
+        Text {
+          anchors.horizontalCenter: parent.horizontalCenter
+          visible: text.length > 0
+          text: renderer.iconGlyph(gridRoot.itemIcon(modelData))
+          color: current
+            ? 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", 28))
+        }
+
+        Text {
+          width: parent.width
+          text: gridRoot.itemLabel(modelData)
+          color: current
+            ? renderer.prop("selected_foreground", renderer.prop("foreground", renderer.foreground))
+            : renderer.prop("foreground", renderer.foreground)
+          font.family: String(renderer.prop("font_family", renderer.fontFamily))
+          font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+          horizontalAlignment: Text.AlignHCenter
+          elide: Text.ElideRight
+        }
+
+        Text {
+          width: parent.width
+          visible: text.length > 0
+          text: gridRoot.itemDescription(modelData)
+          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))
+          horizontalAlignment: Text.AlignHCenter
+          elide: Text.ElideRight
+        }
+      }
+
+      MouseArea {
+        anchors.fill: parent
+        enabled: gridRoot.enabled
+        hoverEnabled: true
+        onClicked: gridRoot.activateIndex(index)
+      }
+    }
+
+    highlight: Rectangle {
+      width: Math.max(0, gridControl.cellWidth - gridRoot.gridSpacing)
+      height: Math.max(0, gridControl.cellHeight - gridRoot.gridSpacing)
+      radius: Number(renderer.prop("radius", Style.cornerRadius))
+      color: "transparent"
+      border.width: Style.normalBorderWidth
+      border.color: renderer.prop("accent", Color.accent)
+    }
+
+    Keys.onReturnPressed: function(event) {
+      gridRoot.activateIndex(currentIndex)
+      event.accepted = true
+    }
+    Keys.onEnterPressed: function(event) {
+      gridRoot.activateIndex(currentIndex)
+      event.accepted = true
+    }
+    Keys.onSpacePressed: function(event) {
+      gridRoot.activateIndex(currentIndex)
+      event.accepted = true
+    }
+
+    onCurrentIndexChanged: {
+      var payload = gridRoot.itemPayload(currentIndex)
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "current_change", payload)
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "highlight", payload)
+    }
+    onCountChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      "count_change", { value: count })
+    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 })
+    }
+    onMovementStarted: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      "movement_start", { x: contentX, y: contentY })
+    onMovementEnded: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      "movement_end", { x: contentX, y: contentY })
+    onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+      activeFocus ? "focus" : "blur", {})
+  }
+
+  Text {
+    anchors.centerIn: parent
+    visible: gridControl.count === 0
+    text: String(renderer.prop("empty_text", "No items"))
+    color: renderer.prop("muted", Color.muted)
+    font.family: String(renderer.prop("font_family", renderer.fontFamily))
+    font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+  }
+
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+}

data/Components/Builtins/GroupBox.qml

@@ -0,0 +1,95 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.GroupBox {
+  id: groupRoot
+
+  required property var renderer
+  readonly property string contentLayout: String(renderer.prop("layout", "column"))
+
+  title: String(renderer.prop("title", ""))
+  implicitWidth: Number(renderer.prop("width", 420))
+  implicitHeight: Number(renderer.prop("height", 260))
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  clip: renderer.prop("clip", false) === true
+  padding: Number(renderer.prop("padding", Style.spacing.lg))
+  leftPadding: Number(renderer.prop("left_padding", padding))
+  rightPadding: Number(renderer.prop("right_padding", padding))
+  topPadding: Number(renderer.prop("top_padding", padding + titleLabel.implicitHeight + Style.spacing.sm))
+  bottomPadding: Number(renderer.prop("bottom_padding", padding))
+
+  label: Text {
+    id: titleLabel
+    x: groupRoot.leftPadding
+    width: Math.max(0, groupRoot.width - groupRoot.leftPadding - groupRoot.rightPadding)
+    text: groupRoot.title
+    color: renderer.prop("foreground", renderer.foreground)
+    font.family: String(renderer.prop("font_family", renderer.fontFamily))
+    font.pixelSize: Number(renderer.prop("title_size",
+      renderer.prop("font_size", Style.font.body)))
+    font.bold: true
+    horizontalAlignment: {
+      var alignment = String(renderer.prop("title_alignment", "left"))
+      if (alignment === "center") return Text.AlignHCenter
+      if (alignment === "right" || alignment === "end") return Text.AlignRight
+      return Text.AlignLeft
+    }
+    elide: Text.ElideRight
+  }
+
+  background: Rectangle {
+    y: titleLabel.implicitHeight / 2
+    height: groupRoot.height - y
+    color: renderer.prop("background", "transparent")
+    radius: Number(renderer.prop("radius", Style.cornerRadius))
+    border.width: Number(renderer.prop("border_width", Style.normalBorderWidth))
+    border.color: renderer.prop("border_color", Color.border)
+  }
+
+  contentItem: Item {
+    LayoutMirroring.enabled: String(renderer.prop("layout_direction", "left_to_right")) === "right_to_left"
+    LayoutMirroring.childrenInherit: true
+
+    Loader {
+      anchors.fill: parent
+      sourceComponent: groupRoot.contentLayout === "row" ? rowContent
+        : (groupRoot.contentLayout === "stack" ? stackContent : columnContent)
+    }
+  }
+
+  Component {
+    id: columnContent
+    Column {
+      spacing: Number(renderer.prop("spacing", Style.spacing.md))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  Component {
+    id: rowContent
+    Row {
+      spacing: Number(renderer.prop("spacing", Style.spacing.md))
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  Component {
+    id: stackContent
+    Item {
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }
+  }
+
+  TapHandler {
+    enabled: renderer.subscribed("click")
+    onTapped: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", {})
+  }
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+  onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    activeFocus ? "focus" : "blur", {})
+  onTitleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    "title_change", { value: title })
+}

data/Components/Builtins/Heatmap.qml

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

data/Components/Builtins/Histogram.qml

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