zui 0.0.1

data/Components/Builtins/OpacityMask.qml

@@ -0,0 +1,21 @@
+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
+    maskEnabled: true
+    maskSource: renderer.findRenderedItem(renderer.prop("mask_source", ""))
+    maskThresholdMin: Number(renderer.prop("threshold_min", 0))
+    maskSpreadAtMin: Number(renderer.prop("spread_min", 0))
+    maskThresholdMax: Number(renderer.prop("threshold_max", 1))
+    maskSpreadAtMax: Number(renderer.prop("spread_max", 0))
+    maskInverted: renderer.prop("inverted", false) === true
+  }
+}

data/Components/Builtins/OpticalGlyph.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
+
+ZuiControls.OpticalGlyph {
+  required property var renderer
+  text: renderer.iconGlyph(renderer.prop("text", ""))
+  fontSize: Number(renderer.prop("size", Style.font.body))
+  color: renderer.prop("color", renderer.foreground)
+  debugBounds: renderer.prop("debug_bounds", false) === true
+  fontFamily: renderer.fontFamily
+}

data/Components/Builtins/Page.qml

@@ -0,0 +1,111 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.Page {
+  id: pageRoot
+
+  required property var renderer
+  readonly property string contentLayout: String(renderer.prop("layout", "column"))
+
+  title: String(renderer.prop("title", ""))
+  implicitWidth: Number(renderer.prop("width", 640))
+  implicitHeight: Number(renderer.prop("height", 480))
+  enabled: renderer.prop("enabled", true) !== false
+  padding: Number(renderer.prop("padding", Style.spacing.lg))
+  leftPadding: padding
+  rightPadding: padding
+  topPadding: padding
+  bottomPadding: padding
+  font.family: String(renderer.prop("font_family", renderer.fontFamily))
+  font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+
+  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")
+  }
+
+  header: Rectangle {
+    visible: renderer.prop("show_header", true) !== false
+      && String(renderer.prop("header_text", pageRoot.title)).length > 0
+    implicitHeight: visible ? Number(renderer.prop("header_height", 56)) : 0
+    color: renderer.prop("header_background", renderer.prop("background", Color.background))
+    Text {
+      anchors.fill: parent
+      anchors.leftMargin: pageRoot.padding
+      anchors.rightMargin: pageRoot.padding
+      text: String(renderer.prop("header_text", pageRoot.title))
+      color: renderer.prop("foreground", renderer.foreground)
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("title_size", Style.font.heading))
+      font.bold: true
+      verticalAlignment: Text.AlignVCenter
+      elide: Text.ElideRight
+    }
+  }
+
+  footer: Rectangle {
+    visible: renderer.prop("show_footer", true) !== false
+      && String(renderer.prop("footer_text", "")).length > 0
+    implicitHeight: visible ? Number(renderer.prop("footer_height", 40)) : 0
+    color: renderer.prop("footer_background", renderer.prop("background", Color.background))
+    Text {
+      anchors.fill: parent
+      anchors.leftMargin: pageRoot.padding
+      anchors.rightMargin: pageRoot.padding
+      text: String(renderer.prop("footer_text", ""))
+      color: renderer.prop("muted", Color.muted)
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("footer_size", Style.font.caption))
+      verticalAlignment: Text.AlignVCenter
+      elide: Text.ElideRight
+    }
+  }
+
+  contentItem: Item {
+    LayoutMirroring.enabled: String(renderer.prop("layout_direction", "left_to_right")) === "right_to_left"
+    LayoutMirroring.childrenInherit: true
+
+    Loader {
+      anchors.fill: parent
+      sourceComponent: pageRoot.contentLayout === "row" ? rowContent
+        : (pageRoot.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/PageIndicator.qml

@@ -0,0 +1,63 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.PageIndicator {
+  id: indicatorRoot
+
+  required property var renderer
+  readonly property int requestedIndex: Number(renderer.prop("current_index", 0))
+  property bool synchronizing: false
+
+  function boundedIndex(value) {
+    return count === 0 ? -1 : Math.max(0, Math.min(count - 1, Number(value)))
+  }
+
+  function syncSelection() {
+    var next = boundedIndex(requestedIndex)
+    if (currentIndex === next) return
+    synchronizing = true
+    currentIndex = next
+    synchronizing = false
+  }
+
+  count: Math.max(0, Number(renderer.prop("count", 0)))
+  interactive: renderer.prop("interactive", false) === true
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  spacing: Number(renderer.prop("spacing", Style.spacing.sm))
+  implicitWidth: Number(renderer.prop("width",
+    count * Number(renderer.prop("dot_size", 8)) + Math.max(0, count - 1) * spacing))
+  implicitHeight: Number(renderer.prop("height", Number(renderer.prop("dot_size", 8)) + 12))
+
+  background: Rectangle {
+    color: renderer.prop("background", "transparent")
+    radius: Number(renderer.prop("radius", 0))
+  }
+
+  delegate: Rectangle {
+    required property int index
+    implicitWidth: Number(renderer.prop("dot_size", 8))
+    implicitHeight: implicitWidth
+    radius: width / 2
+    color: index === indicatorRoot.currentIndex
+      ? renderer.prop("accent", Color.accent)
+      : renderer.prop("foreground", renderer.foreground)
+    opacity: index === indicatorRoot.currentIndex ? 1 : 0.45
+  }
+
+  onRequestedIndexChanged: syncSelection()
+  onCountChanged: syncSelection()
+  Component.onCompleted: syncSelection()
+  onCurrentIndexChanged: {
+    if (synchronizing || currentIndex < 0) return
+    if (renderer.subscribed("input"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", { value: currentIndex })
+    if (renderer.subscribed("change"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: currentIndex })
+  }
+  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/Pagination.qml

@@ -0,0 +1,158 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.Pane {
+  id: paginationRoot
+
+  required property var renderer
+  readonly property int pageCount: Math.max(0, Number(renderer.prop("count", 0)))
+  readonly property int requestedPage: Number(renderer.prop("page", 1))
+  readonly property var pageWindow: visiblePages()
+  property int currentPage: 0
+  property bool synchronizing: false
+
+  function boundedPage(value) {
+    return pageCount === 0 ? 0 : Math.max(1, Math.min(pageCount, Number(value)))
+  }
+
+  function syncSelection() {
+    var next = boundedPage(requestedPage)
+    if (currentPage === next) return
+    synchronizing = true
+    currentPage = next
+    synchronizing = false
+  }
+
+  function visiblePages() {
+    var result = []
+    if (pageCount === 0) return result
+    var siblings = Math.max(0, Number(renderer.prop("sibling_count", 1)))
+    var threshold = siblings * 2 + 5
+    if (pageCount <= threshold) {
+      for (var all = 1; all <= pageCount; all++) result.push(all)
+      return result
+    }
+    var start = Math.max(2, currentPage - siblings)
+    var finish = Math.min(pageCount - 1, currentPage + siblings)
+    if (currentPage <= siblings + 3) finish = Math.min(pageCount - 1, threshold - 2)
+    if (currentPage >= pageCount - siblings - 2) start = Math.max(2, pageCount - threshold + 3)
+    result.push(1)
+    if (start > 2) result.push(0)
+    for (var page = start; page <= finish; page++) result.push(page)
+    if (finish < pageCount - 1) result.push(0)
+    result.push(pageCount)
+    return result
+  }
+
+  function choose(page, eventName) {
+    var next = boundedPage(page)
+    if (next === 0) return
+    currentPage = next
+    var payload = { value: next, page: next, count: pageCount }
+    if (eventName && renderer.subscribed(eventName))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, eventName, payload)
+    if (renderer.subscribed("select"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "select", payload)
+  }
+
+  implicitWidth: Number(renderer.prop("width", 620))
+  implicitHeight: Number(renderer.prop("height", 52))
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  padding: Number(renderer.prop("padding", Style.spacing.xs))
+
+  background: Rectangle {
+    color: renderer.prop("background", "transparent")
+    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")
+  }
+
+  contentItem: Row {
+    spacing: Number(renderer.prop("spacing", Style.spacing.xs))
+
+    QQC.ToolButton {
+      visible: renderer.prop("show_first_last", false) === true
+      enabled: paginationRoot.enabled && paginationRoot.currentPage > 1
+      width: Number(renderer.prop("item_size", 40)); height: width
+      text: String(renderer.prop("first_text", "«"))
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+      onClicked: paginationRoot.choose(1, "first")
+    }
+
+    QQC.ToolButton {
+      visible: renderer.prop("show_previous_next", true) !== false
+      enabled: paginationRoot.enabled && paginationRoot.currentPage > 1
+      width: Number(renderer.prop("item_size", 40)); height: width
+      text: String(renderer.prop("previous_text", "‹"))
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+      onClicked: paginationRoot.choose(paginationRoot.currentPage - 1, "previous")
+    }
+
+    Repeater {
+      model: paginationRoot.pageWindow
+      QQC.ToolButton {
+        required property int modelData
+        readonly property bool selected: modelData === paginationRoot.currentPage
+        enabled: paginationRoot.enabled && modelData > 0
+        width: Number(renderer.prop("item_size", 40)); height: width
+        text: modelData === 0 ? "…" : String(modelData)
+        font.family: String(renderer.prop("font_family", renderer.fontFamily))
+        font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+        contentItem: Text {
+          text: parent.text
+          color: !parent.enabled ? renderer.prop("muted", Color.muted)
+            : (parent.selected ? renderer.prop("accent", Color.accent)
+              : renderer.prop("foreground", renderer.foreground))
+          font: parent.font
+          horizontalAlignment: Text.AlignHCenter
+          verticalAlignment: Text.AlignVCenter
+        }
+        background: Rectangle {
+          color: parent.selected ? renderer.prop("selected_background", "transparent") : "transparent"
+          radius: Number(renderer.prop("radius", Style.cornerRadius))
+        }
+        onClicked: paginationRoot.choose(modelData, null)
+      }
+    }
+
+    QQC.ToolButton {
+      visible: renderer.prop("show_previous_next", true) !== false
+      enabled: paginationRoot.enabled && paginationRoot.currentPage < paginationRoot.pageCount
+      width: Number(renderer.prop("item_size", 40)); height: width
+      text: String(renderer.prop("next_text", "›"))
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+      onClicked: paginationRoot.choose(paginationRoot.currentPage + 1, "next")
+    }
+
+    QQC.ToolButton {
+      visible: renderer.prop("show_first_last", false) === true
+      enabled: paginationRoot.enabled && paginationRoot.currentPage < paginationRoot.pageCount
+      width: Number(renderer.prop("item_size", 40)); height: width
+      text: String(renderer.prop("last_text", "»"))
+      font.family: String(renderer.prop("font_family", renderer.fontFamily))
+      font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+      onClicked: paginationRoot.choose(paginationRoot.pageCount, "last")
+    }
+  }
+
+  onRequestedPageChanged: syncSelection()
+  onPageCountChanged: syncSelection()
+  Component.onCompleted: syncSelection()
+  onCurrentPageChanged: {
+    if (synchronizing || currentPage <= 0) return
+    var payload = { value: currentPage, page: currentPage, count: pageCount }
+    if (renderer.subscribed("input"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", payload)
+    if (renderer.subscribed("change"))
+      renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", payload)
+  }
+  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/Pane.qml

@@ -0,0 +1,72 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.Pane {
+  id: paneRoot
+
+  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", Color.background)
+    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: Item {
+    LayoutMirroring.enabled: String(renderer.prop("layout_direction", "left_to_right")) === "right_to_left"
+    LayoutMirroring.childrenInherit: true
+
+    Loader {
+      anchors.fill: parent
+      sourceComponent: paneRoot.contentLayout === "row" ? rowContent
+        : (paneRoot.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/PanelHero.qml

@@ -0,0 +1,15 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.PanelHero {
+  required property var renderer
+      title: renderer.escapeAutoText(renderer.prop("title", "")); meta: renderer.escapeAutoText(renderer.prop("meta", "")); detail: renderer.escapeAutoText(renderer.prop("detail", ""))
+      iconSize: Number(renderer.prop("icon_size", Style.font.display)); iconOpacity: Number(renderer.prop("icon_opacity", 1))
+      metaOpacity: Number(renderer.prop("meta_opacity", 1)); foreground: renderer.prop("foreground", renderer.foreground)
+      fontFamily: String(renderer.prop("font_family", renderer.fontFamily))
+    }

data/Components/Builtins/ParallelAnimation.qml

@@ -0,0 +1,3 @@
+import QtQuick
+import "Support" as Support
+Support.AnimationGroupDriver { renderer: null; sequential: false }

data/Components/Builtins/ParentAnimation.qml

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

data/Components/Builtins/ParentChange.qml

@@ -0,0 +1,10 @@
+import QtQuick
+
+Item {
+  id: changeRoot
+  property var renderer: null
+  property int handledRevision: -1
+  function apply(){if(!renderer)return;var revision=Number(renderer.prop("revision",0));if(revision===handledRevision)return;var target=renderer.findRenderedItem(renderer.prop("target",""));var parent=renderer.findRenderedItem(renderer.prop("parent",""));if(!target||!parent)return;handledRevision=revision;target.parent=parent;["x","y","width","height","scale","rotation"].forEach(function(key){var value=renderer.prop(key,null);if(value!==null)target[key]=value});renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"apply",{revision:revision,parent:renderer.prop("parent","")})}
+  Connections{target:renderer;function onNodeChanged(){changeRoot.apply()}}
+  Component.onCompleted:apply()
+}

data/Components/Builtins/ParticleSystem.qml

@@ -0,0 +1,81 @@
+import QtQuick
+import QtQuick.Particles
+
+Item {
+  id: particleRoot
+  required property var renderer
+  property int handledBurstRevision: -1
+  implicitWidth: Number(renderer.prop("width", 320))
+  implicitHeight: Number(renderer.prop("height", 200))
+
+  function send(name, payload) {
+    if (renderer.subscribed(name)) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, name, payload || {})
+  }
+
+  function handleBurst() {
+    var revision = Number(renderer.prop("burst_revision", 0))
+    var count = Number(renderer.prop("burst_count", 0))
+    if (revision === handledBurstRevision || count <= 0) return
+    handledBurstRevision = revision
+    particleEmitter.burst(count, Number(renderer.prop("burst_x", particleEmitter.width / 2)), Number(renderer.prop("burst_y", particleEmitter.height / 2)))
+    send("burst", { count: count, revision: revision })
+  }
+
+  ParticleSystem {
+    id: nativeSystem
+    anchors.fill: parent
+    running: renderer.prop("running", true) !== false
+    paused: renderer.prop("paused", false) === true
+    onRunningChanged: particleRoot.send(running ? "start" : "stop", {})
+    onPausedChanged: particleRoot.send(paused ? "pause" : "resume", {})
+    onEmptyChanged: if (empty) particleRoot.send("empty", {})
+
+    Emitter {
+      id: particleEmitter
+      system: nativeSystem
+      x: Number(renderer.prop("emitter_x", 0)); y: Number(renderer.prop("emitter_y", 0))
+      width: Number(renderer.prop("emitter_width", particleRoot.width)); height: Number(renderer.prop("emitter_height", particleRoot.height))
+      emitRate: Number(renderer.prop("emit_rate", 40))
+      lifeSpan: Number(renderer.prop("life_span", 1500)); lifeSpanVariation: Number(renderer.prop("life_span_variation", 0))
+      maximumEmitted: Number(renderer.prop("maximum_emitted", -1))
+      size: Number(renderer.prop("size", 16)); endSize: Number(renderer.prop("end_size", size)); sizeVariation: Number(renderer.prop("size_variation", 0))
+      shape: String(renderer.prop("particle_shape", "rectangle")) === "ellipse" ? ellipseShape : rectangleShape
+      velocity: AngleDirection {
+        angle: Number(renderer.prop("velocity_angle", 270)); magnitude: Number(renderer.prop("velocity", 50))
+        angleVariation: Number(renderer.prop("velocity_angle_variation", 180)); magnitudeVariation: Number(renderer.prop("velocity_variation", 0))
+      }
+      acceleration: AngleDirection {
+        angle: Number(renderer.prop("acceleration_angle", 90)); magnitude: Number(renderer.prop("acceleration", 0))
+        angleVariation: Number(renderer.prop("acceleration_angle_variation", 0)); magnitudeVariation: Number(renderer.prop("acceleration_variation", 0))
+      }
+    }
+
+    EllipseShape { id: ellipseShape }
+    RectangleShape { id: rectangleShape; fill: true }
+
+    ImageParticle {
+      system: nativeSystem
+      source: renderer.assetUrl(renderer.prop("source", ""))
+      color: renderer.prop("color", "white"); colorVariation: Number(renderer.prop("color_variation", 0))
+      alpha: Number(renderer.prop("alpha", 1)); alphaVariation: Number(renderer.prop("alpha_variation", 0))
+      rotation: Number(renderer.prop("rotation", 0)); rotationVariation: Number(renderer.prop("rotation_variation", 0))
+      rotationVelocity: Number(renderer.prop("rotation_velocity", 0)); rotationVelocityVariation: Number(renderer.prop("rotation_velocity_variation", 0))
+      autoRotation: renderer.prop("auto_rotation", false) === true
+    }
+
+    Gravity {
+      system: nativeSystem
+      magnitude: Number(renderer.prop("gravity", 0)); angle: Number(renderer.prop("gravity_angle", 90))
+    }
+    Turbulence {
+      system: nativeSystem
+      enabled: Number(renderer.prop("turbulence", 0)) !== 0
+      strength: Number(renderer.prop("turbulence", 0))
+      x: Number(renderer.prop("turbulence_x", 0)); y: Number(renderer.prop("turbulence_y", 0))
+      width: Number(renderer.prop("turbulence_width", particleRoot.width)); height: Number(renderer.prop("turbulence_height", particleRoot.height))
+    }
+  }
+
+  Connections { target: renderer; function onNodeChanged() { particleRoot.handleBurst() } }
+  Component.onCompleted: handleBurst()
+}

data/Components/Builtins/PasswordField.qml

@@ -0,0 +1,58 @@
+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
+      id: passwordRoot
+      property bool revealState: renderer.prop("revealed", false) === true
+      readonly property bool canReveal: renderer.prop("revealable", true) !== false
+      implicitWidth: Number(renderer.prop("width", 260))
+      implicitHeight: passwordInput.implicitHeight
+      ZuiControls.TextField {
+        id: passwordInput
+        width: passwordRoot.width - (passwordRoot.canReveal ? passwordRoot.height : 0)
+        anchors.left: parent.left
+        text: String(renderer.prop("text", ""))
+        placeholderText: String(renderer.prop("placeholder", ""))
+        password: !passwordRoot.revealState
+        foreground: renderer.prop("foreground", renderer.foreground)
+        accent: renderer.prop("accent", Color.accent)
+        selectionTint: renderer.prop("selection_tint", Style.selectionFillFor(foreground, accent))
+        horizontalPadding: Number(renderer.prop("horizontal_padding", Style.spacing.controlPaddingX))
+        verticalPadding: Number(renderer.prop("vertical_padding", Style.spacing.inputPaddingY))
+        onTextEdited: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", { value: text })
+        onEditingFinished: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: text })
+        onAccepted: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "submit", { value: text })
+        onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, activeFocus ? "focus" : "blur", { value: text })
+      }
+      Rectangle {
+        visible: passwordRoot.canReveal
+        anchors.right: parent.right
+        width: parent.height
+        height: parent.height
+        color: "transparent"
+        Text {
+          anchors.centerIn: parent
+          text: renderer.iconGlyph(passwordRoot.revealState ? "eye_slash" : "eye")
+          textFormat: Text.PlainText
+          color: renderer.foreground
+          font.family: renderer.fontFamily
+          font.pixelSize: Style.font.icon
+        }
+        TapHandler {
+          onTapped: {
+            passwordRoot.revealState = !passwordRoot.revealState
+            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reveal", { value: passwordRoot.revealState })
+          }
+        }
+      }
+      Connections {
+        target: root
+        function onNodeChanged() { passwordRoot.revealState = renderer.prop("revealed", passwordRoot.revealState) === true }
+      }
+    }

data/Components/Builtins/Path.qml

@@ -0,0 +1,35 @@
+import QtQuick
+import QtQuick.Shapes
+
+Shape {
+  id: pathRoot
+  required property var renderer
+  implicitWidth: Number(renderer.prop("width", 120))
+  implicitHeight: Number(renderer.prop("height", 120))
+  antialiasing: renderer.prop("antialiasing", true) !== false
+  asynchronous: renderer.prop("asynchronous", false) === true
+  preferredRendererType: String(renderer.prop("preferred_renderer", "geometry")) === "curve" ? Shape.CurveRenderer : Shape.GeometryRenderer
+  containsMode: String(renderer.prop("contains_mode", "bounding_rect")) === "fill" ? Shape.FillContains : Shape.BoundingRectContains
+  transform: Scale { xScale: Number(renderer.prop("scale", 1)); yScale: Number(renderer.prop("scale", 1)) }
+
+  ShapePath {
+    strokeColor: renderer.prop("stroke", renderer.foreground)
+    fillColor: renderer.prop("fill", "transparent")
+    strokeWidth: Number(renderer.prop("stroke_width", 1))
+    capStyle: String(renderer.prop("cap", "square")) === "round" ? ShapePath.RoundCap : (String(renderer.prop("cap", "square")) === "flat" ? ShapePath.FlatCap : ShapePath.SquareCap)
+    joinStyle: String(renderer.prop("join", "miter")) === "round" ? ShapePath.RoundJoin : (String(renderer.prop("join", "miter")) === "bevel" ? ShapePath.BevelJoin : ShapePath.MiterJoin)
+    fillRule: String(renderer.prop("fill_rule", "winding")) === "odd_even" ? ShapePath.OddEvenFill : ShapePath.WindingFill
+    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))
+    PathSvg { path: String(renderer.prop("data", "")) }
+  }
+
+  onStatusChanged: if (renderer.subscribed("status")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "status", { value: status, renderer: rendererType })
+  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, contains: pathRoot.contains(Qt.point(mouse.x, mouse.y)) }) }
+    onPositionChanged: function(mouse) { if (renderer.subscribed("hover")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { x: mouse.x, y: mouse.y, contains: pathRoot.contains(Qt.point(mouse.x, mouse.y)) }) }
+  }
+}

data/Components/Builtins/PathAnimation.qml

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