zui 0.0.1

data/Components/Builtins/MessageDialog.qml

@@ -0,0 +1,104 @@
+import QtQuick
+import QtQuick.Dialogs as Dialogs
+
+Dialogs.MessageDialog {
+  id: messageDialogRoot
+
+  required property var renderer
+  readonly property bool requestedOpen: renderer.prop("opened", false) === true
+    && renderer.prop("visible", true) !== false
+
+  function buttonsValue(value) {
+    var names = Array.isArray(value) ? value : (value === null || value === undefined ? [] : [value])
+    var result = Dialogs.MessageDialog.NoButton
+    for (var index = 0; index < names.length; index++) {
+      var name = String(names[index])
+      if (name === "ok") result |= Dialogs.MessageDialog.Ok
+      else if (name === "save") result |= Dialogs.MessageDialog.Save
+      else if (name === "save_all") result |= Dialogs.MessageDialog.SaveAll
+      else if (name === "open") result |= Dialogs.MessageDialog.Open
+      else if (name === "yes") result |= Dialogs.MessageDialog.Yes
+      else if (name === "yes_to_all") result |= Dialogs.MessageDialog.YesToAll
+      else if (name === "no") result |= Dialogs.MessageDialog.No
+      else if (name === "no_to_all") result |= Dialogs.MessageDialog.NoToAll
+      else if (name === "abort") result |= Dialogs.MessageDialog.Abort
+      else if (name === "retry") result |= Dialogs.MessageDialog.Retry
+      else if (name === "ignore") result |= Dialogs.MessageDialog.Ignore
+      else if (name === "close") result |= Dialogs.MessageDialog.Close
+      else if (name === "cancel") result |= Dialogs.MessageDialog.Cancel
+      else if (name === "discard") result |= Dialogs.MessageDialog.Discard
+      else if (name === "help") result |= Dialogs.MessageDialog.Help
+      else if (name === "apply") result |= Dialogs.MessageDialog.Apply
+      else if (name === "reset") result |= Dialogs.MessageDialog.Reset
+      else if (name === "restore_defaults") result |= Dialogs.MessageDialog.RestoreDefaults
+    }
+    return result
+  }
+
+  function buttonName(button) {
+    if (button === Dialogs.MessageDialog.Ok) return "ok"
+    if (button === Dialogs.MessageDialog.Save) return "save"
+    if (button === Dialogs.MessageDialog.SaveAll) return "save_all"
+    if (button === Dialogs.MessageDialog.Open) return "open"
+    if (button === Dialogs.MessageDialog.Yes) return "yes"
+    if (button === Dialogs.MessageDialog.YesToAll) return "yes_to_all"
+    if (button === Dialogs.MessageDialog.No) return "no"
+    if (button === Dialogs.MessageDialog.NoToAll) return "no_to_all"
+    if (button === Dialogs.MessageDialog.Abort) return "abort"
+    if (button === Dialogs.MessageDialog.Retry) return "retry"
+    if (button === Dialogs.MessageDialog.Ignore) return "ignore"
+    if (button === Dialogs.MessageDialog.Close) return "close"
+    if (button === Dialogs.MessageDialog.Cancel) return "cancel"
+    if (button === Dialogs.MessageDialog.Discard) return "discard"
+    if (button === Dialogs.MessageDialog.Help) return "help"
+    if (button === Dialogs.MessageDialog.Apply) return "apply"
+    if (button === Dialogs.MessageDialog.Reset) return "reset"
+    if (button === Dialogs.MessageDialog.RestoreDefaults) return "restore_defaults"
+    return "unknown"
+  }
+
+  function roleName(role) {
+    if (role === Dialogs.MessageDialog.AcceptRole) return "accept"
+    if (role === Dialogs.MessageDialog.RejectRole) return "reject"
+    if (role === Dialogs.MessageDialog.DestructiveRole) return "destructive"
+    if (role === Dialogs.MessageDialog.ActionRole) return "action"
+    if (role === Dialogs.MessageDialog.HelpRole) return "help"
+    if (role === Dialogs.MessageDialog.YesRole) return "yes"
+    if (role === Dialogs.MessageDialog.NoRole) return "no"
+    if (role === Dialogs.MessageDialog.ApplyRole) return "apply"
+    if (role === Dialogs.MessageDialog.ResetRole) return "reset"
+    return "invalid"
+  }
+
+  function modalityValue(value) {
+    var name = String(value || "application")
+    if (name === "none" || name === "non_modal") return Qt.NonModal
+    if (name === "window" || name === "window_modal") return Qt.WindowModal
+    return Qt.ApplicationModal
+  }
+
+  function syncOpenState() {
+    if (requestedOpen === visible) return
+    if (requestedOpen) open()
+    else close()
+  }
+
+  title: String(renderer.prop("title", ""))
+  text: String(renderer.prop("message", ""))
+  informativeText: String(renderer.prop("informative_text", ""))
+  detailedText: String(renderer.prop("detailed_text", ""))
+  buttons: buttonsValue(renderer.prop("buttons", ["ok"]))
+  modality: modalityValue(renderer.prop("modality", "application"))
+
+  Component.onCompleted: syncOpenState()
+  onRequestedOpenChanged: syncOpenState()
+  onButtonClicked: function(button, role) {
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "button", {
+      button: buttonName(button), role: roleName(role)
+    })
+  }
+  onAccepted: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "accept", {})
+  onRejected: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reject", {})
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "open" : "close", {})
+}

data/Components/Builtins/ModalSheet.qml

@@ -0,0 +1,222 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.Popup {
+  id: modalSheetRoot
+
+  required property var renderer
+  readonly property bool requestedOpen: renderer.prop("opened", false) === true
+    && renderer.prop("visible", true) !== false
+  readonly property string sheetEdge: String(renderer.prop("edge", "right"))
+  readonly property string contentLayout: String(renderer.prop("layout", "column"))
+  readonly property real sheetMargin: Number(renderer.prop("margin", Style.spacing.md))
+  readonly property real maximumWidth: Number(renderer.prop("max_width", 720))
+  readonly property real maximumHeight: Number(renderer.prop("max_height", 900))
+  readonly property bool horizontalEdge: sheetEdge === "top" || sheetEdge === "bottom"
+  property bool dismissalReported: false
+
+  function closePolicyValue(value) {
+    if (renderer.prop("dismissible", true) === false) return QQC.Popup.NoAutoClose
+    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 === "none") continue
+      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()
+  }
+
+  function reportDismiss(reason) {
+    if (dismissalReported) return
+    dismissalReported = true
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "dismiss", { reason: reason })
+  }
+
+  function dismiss(reason) {
+    if (renderer.prop("dismissible", true) === false) return
+    reportDismiss(reason)
+    close()
+  }
+
+  function hiddenX() {
+    if (!parent) return x
+    if (sheetEdge === "left") return -width
+    if (sheetEdge === "right") return parent.width
+    return x
+  }
+
+  function hiddenY() {
+    if (!parent) return y
+    if (sheetEdge === "top") return -height
+    if (sheetEdge === "bottom") return parent.height
+    return y
+  }
+
+  x: {
+    if (!parent) return sheetMargin
+    if (sheetEdge === "left") return sheetMargin
+    if (sheetEdge === "right") return parent.width - width - sheetMargin
+    return Math.max(sheetMargin, (parent.width - width) / 2)
+  }
+  y: {
+    if (!parent) return sheetMargin
+    if (sheetEdge === "top") return sheetMargin
+    if (sheetEdge === "bottom") return parent.height - height - sheetMargin
+    return Math.max(sheetMargin, (parent.height - height) / 2)
+  }
+  width: {
+    var available = parent ? Math.max(0, parent.width - sheetMargin * 2) : maximumWidth
+    var defaultWidth = horizontalEdge ? available : Math.min(520, available)
+    return Math.min(Number(renderer.prop("width", defaultWidth)), available, maximumWidth)
+  }
+  height: {
+    var available = parent ? Math.max(0, parent.height - sheetMargin * 2) : maximumHeight
+    var defaultHeight = horizontalEdge ? Math.min(420, available) : available
+    return Math.min(Number(renderer.prop("height", defaultHeight)), available, maximumHeight)
+  }
+  modal: renderer.prop("modal", true) !== false
+  dim: renderer.prop("dim", modal) !== false
+  focus: true
+  closePolicy: closePolicyValue(renderer.prop("close_policy", "escape_and_outside"))
+  enabled: renderer.prop("enabled", true) !== false
+  padding: Number(renderer.prop("padding", Style.spacing.lg))
+
+  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")
+  }
+
+  contentItem: Column {
+    spacing: Number(renderer.prop("spacing", Style.spacing.md))
+
+    Rectangle {
+      width: parent.width
+      height: renderer.prop("show_header", true) !== false
+        ? Number(renderer.prop("header_height", 48)) : 0
+      visible: height > 0
+      color: renderer.prop("header_background", "transparent")
+
+      Text {
+        anchors.left: parent.left
+        anchors.right: closeButton.visible ? closeButton.left : parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.rightMargin: Style.spacing.sm
+        text: String(renderer.prop("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
+        elide: Text.ElideRight
+      }
+
+      QQC.ToolButton {
+        id: closeButton
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        visible: renderer.prop("show_close", true) !== false
+          && renderer.prop("dismissible", true) !== false
+        text: renderer.iconGlyph("xmark")
+        font.family: renderer.fontFamily
+        font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+        onClicked: modalSheetRoot.dismiss("close_button")
+      }
+    }
+
+    Loader {
+      width: parent.width
+      height: Math.max(0, parent.height - y)
+      sourceComponent: modalSheetRoot.contentLayout === "row" ? rowContent
+        : (modalSheetRoot.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 }
+    }
+  }
+
+  enter: Transition {
+    ParallelAnimation {
+      NumberAnimation {
+        property: "opacity"; from: 0; to: 1
+        duration: renderer.prop("animated", true) !== false
+          ? Number(renderer.prop("duration", 220)) : 0
+        easing.type: renderer.easingType(renderer.prop("easing", "out_cubic"))
+      }
+      NumberAnimation {
+        property: modalSheetRoot.horizontalEdge ? "y" : "x"
+        from: modalSheetRoot.horizontalEdge ? modalSheetRoot.hiddenY() : modalSheetRoot.hiddenX()
+        duration: renderer.prop("animated", true) !== false
+          ? Number(renderer.prop("duration", 220)) : 0
+        easing.type: renderer.easingType(renderer.prop("easing", "out_cubic"))
+      }
+    }
+  }
+
+  exit: Transition {
+    ParallelAnimation {
+      NumberAnimation {
+        property: "opacity"; from: 1; to: 0
+        duration: renderer.prop("animated", true) !== false
+          ? Number(renderer.prop("duration", 180)) : 0
+        easing.type: renderer.easingType("in_cubic")
+      }
+      NumberAnimation {
+        property: modalSheetRoot.horizontalEdge ? "y" : "x"
+        to: modalSheetRoot.horizontalEdge ? modalSheetRoot.hiddenY() : modalSheetRoot.hiddenX()
+        duration: renderer.prop("animated", true) !== false
+          ? Number(renderer.prop("duration", 180)) : 0
+        easing.type: renderer.easingType("in_cubic")
+      }
+    }
+  }
+
+  Component.onCompleted: syncOpenState()
+  onRequestedOpenChanged: syncOpenState()
+  onOpened: {
+    dismissalReported = false
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "open", {})
+  }
+  onClosed: {
+    if (requestedOpen && !dismissalReported) reportDismiss("close_policy")
+    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", {})
+  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/ModelView3d.qml

@@ -0,0 +1,50 @@
+import QtQuick
+import "Support/OptionalModuleState.js" as OptionalModuleState
+
+Item {
+    id: modelHost
+
+    required property var renderer
+    property bool failureReported: false
+
+    function reportUnavailable() {
+        if (failureReported)
+            return ;
+
+        failureReported = true;
+        renderer.componentError("qtquick3d_unavailable", "Qt Quick 3D is not installed. Install qt6-quick3d and assimp.", {
+        });
+    }
+
+    implicitWidth: Number(renderer.prop("width", 420))
+    implicitHeight: Number(renderer.prop("height", 420))
+    clip: true
+    Component.onCompleted: {
+        if (OptionalModuleState.quick3dUnavailable) {
+            reportUnavailable();
+            return ;
+        }
+        sceneLoader.setSource(Qt.resolvedUrl("Support/ModelView3dScene.qml"), {
+            "renderer": renderer
+        });
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: renderer.prop("background", "transparent")
+    }
+
+    Loader {
+        id: sceneLoader
+
+        anchors.fill: parent
+        asynchronous: true
+        onStatusChanged: {
+            if (status === Loader.Error) {
+                OptionalModuleState.quick3dUnavailable = true;
+                modelHost.reportUnavailable();
+            }
+        }
+    }
+
+}

data/Components/Builtins/MonthGrid.qml

@@ -0,0 +1,23 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.MonthGrid {
+  id: monthRoot
+  property var renderer: null
+  implicitWidth: Number(renderer ? renderer.prop("width", 320) : 320); implicitHeight: Number(renderer ? renderer.prop("height", 280) : 280)
+  month: Number(renderer ? renderer.prop("month", new Date().getMonth() + 1) : new Date().getMonth() + 1) - 1
+  year: Number(renderer ? renderer.prop("year", new Date().getFullYear()) : new Date().getFullYear())
+  locale: Qt.locale(String(renderer ? renderer.prop("locale", Qt.locale().name) : Qt.locale().name))
+  function allowed(value){var text=Qt.formatDate(value,"yyyy-MM-dd");var minimum=String(renderer?renderer.prop("minimum",""):"");var maximum=String(renderer?renderer.prop("maximum",""):"");return(minimum===""||text>=minimum)&&(maximum===""||text<=maximum)}
+  delegate: Text {
+    required property var model
+    text: model.day; opacity: monthRoot.allowed(model.date) ? 1 : 0.35; horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter
+    color: model.month === monthRoot.month ? renderer.prop("foreground", renderer.foreground) : renderer.prop("muted", Color.muted)
+    font.family: renderer.prop("font_family", renderer.fontFamily); font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+    Rectangle { anchors.fill: parent; z: -1; radius: width / 2; color: Qt.formatDate(model.date, "yyyy-MM-dd") === String(renderer.prop("selected_date", "")) ? renderer.prop("selected_background", renderer.prop("accent", Color.accent)) : (Qt.formatDate(model.date,"yyyy-MM-dd")===Qt.formatDate(new Date(),"yyyy-MM-dd")?renderer.prop("today_background",Color.popups.background):renderer.prop("background","transparent")) }
+  }
+  onClicked: function(date) { if(!allowed(date))return;var payload = { value: Qt.formatDate(date, "yyyy-MM-dd") }; renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", payload); renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", payload) }
+  onPressed: function(date) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "press", { value: Qt.formatDate(date, "yyyy-MM-dd") }) }
+  onReleased: function(date) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "release", { value: Qt.formatDate(date, "yyyy-MM-dd") }) }
+}

data/Components/Builtins/MultiEffect.qml

@@ -0,0 +1,48 @@
+import QtQuick
+import QtQuick.Effects
+
+Item {
+  id: effectRoot
+  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 {
+    id: nativeEffect
+    anchors.fill: parent
+    source: sourceTexture
+    brightness: Number(renderer.prop("brightness", 0))
+    contrast: Number(renderer.prop("contrast", 0))
+    saturation: Number(renderer.prop("saturation", 0))
+    colorization: Number(renderer.prop("colorization", 0))
+    colorizationColor: renderer.prop("colorization_color", "white")
+    blurEnabled: renderer.prop("blur_enabled", false) === true
+    blur: Number(renderer.prop("blur", 0))
+    blurMax: Number(renderer.prop("blur_max", 32))
+    blurMultiplier: Number(renderer.prop("blur_multiplier", 1))
+    shadowEnabled: renderer.prop("shadow_enabled", false) === true
+    shadowOpacity: Number(renderer.prop("shadow_opacity", 1))
+    shadowBlur: Number(renderer.prop("shadow_blur", 1))
+    shadowHorizontalOffset: Number(renderer.prop("shadow_horizontal_offset", 0))
+    shadowVerticalOffset: Number(renderer.prop("shadow_vertical_offset", 0))
+    shadowColor: renderer.prop("shadow_color", "black")
+    shadowScale: Number(renderer.prop("shadow_scale", 1))
+    maskEnabled: renderer.prop("mask_enabled", false) === true
+    maskSource: renderer.findRenderedItem(renderer.prop("mask_source", ""))
+    maskThresholdMin: Number(renderer.prop("mask_threshold_min", 0))
+    maskSpreadAtMin: Number(renderer.prop("mask_spread_at_min", 0))
+    maskThresholdMax: Number(renderer.prop("mask_threshold_max", 1))
+    maskSpreadAtMax: Number(renderer.prop("mask_spread_at_max", 0))
+    maskInverted: renderer.prop("mask_inverted", false) === true
+    autoPaddingEnabled: renderer.prop("auto_padding", true) !== false
+    paddingRect: Qt.rect(Number(renderer.prop("padding_left", 0)), Number(renderer.prop("padding_top", 0)), Number(renderer.prop("padding_right", 0)), Number(renderer.prop("padding_bottom", 0)))
+    onShaderChanged: if (renderer.subscribed("shader_change")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "shader_change", { fragment: fragmentShader, vertex: vertexShader })
+  }
+}

data/Components/Builtins/MultiSelect.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
+
+ZuiControls.MultiSelect {
+  required property var renderer
+      label: renderer.escapeAutoText(renderer.prop("label", "")); values: renderer.prop("values", []); options: renderer.prop("options", [])
+      placeholderText: String(renderer.prop("placeholder", "Search...")); enabled: renderer.prop("enabled", true) !== false
+      optionsCommand: renderer.prop("options_command", []); optionsCommandCwd: String(renderer.prop("options_command_cwd", ""))
+      emptyText: String(renderer.prop("empty_text", "No options")); noSelectionText: String(renderer.prop("no_selection_text", "None selected"))
+      triggerLabel: String(renderer.prop("trigger_label", "")); showLabel: renderer.prop("show_label", true) !== false
+      width: Number(renderer.prop("width", 240)); foreground: renderer.prop("foreground", renderer.foreground)
+      background: renderer.prop("background", Color.popups.background); popupBorder: renderer.prop("popup_border", Color.popups.border)
+      accent: renderer.prop("accent", Color.accent); fontFamily: String(renderer.prop("font_family", renderer.fontFamily))
+      rowHeight: Number(renderer.prop("row_height", Style.spacing.controlHeight)); popupRowHeight: Number(renderer.prop("popup_row_height", Style.spacing.popupRowHeight))
+      popupMinHeight: Number(renderer.prop("popup_min_height", Style.spacing.searchablePopupMinHeight)); hasCursor: renderer.prop("cursor", false) === true
+      onChanged: function(values) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: values }) }
+      onOptionHovered: function(value) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: value }) }
+    }

data/Components/Builtins/NavigationRail.qml

@@ -0,0 +1,154 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.Pane {
+  id: railRoot
+
+  required property var renderer
+  readonly property var destinations: renderer.prop("items", [])
+  readonly property int requestedIndex: Number(renderer.prop("current_index", 0))
+  readonly property bool extended: renderer.prop("extended", false) === true
+  property int currentIndex: 0
+  property bool synchronizing: false
+
+  function itemAt(index) {
+    return Array.isArray(destinations) && index < destinations.length ? destinations[index] : null
+  }
+
+  function itemValue(index, name, fallback) {
+    var item = itemAt(index)
+    return item !== null && typeof item === "object" && item[name] !== undefined
+      ? item[name] : fallback
+  }
+
+  function itemLabel(index) {
+    var item = itemAt(index)
+    return item !== null && typeof item === "object"
+      ? String(item.label === undefined ? (item.text === undefined ? "" : item.text) : item.label)
+      : String(item === null ? "" : item)
+  }
+
+  function boundedIndex(value) {
+    var count = Array.isArray(destinations) ? destinations.length : 0
+    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
+  }
+
+  implicitWidth: Number(renderer.prop("width", extended ? 220 : 72))
+  implicitHeight: Number(renderer.prop("height", 480))
+  enabled: renderer.prop("enabled", true) !== false
+  visible: renderer.prop("visible", true) !== false
+  padding: Number(renderer.prop("padding", Style.spacing.md))
+
+  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")
+  }
+
+  contentItem: Item {
+    Column {
+      id: destinationColumn
+      anchors.left: parent.left
+      anchors.right: parent.right
+      anchors.top: String(renderer.prop("alignment", "top")) === "top" ? parent.top : undefined
+      anchors.verticalCenter: String(renderer.prop("alignment", "top")) === "center"
+        ? parent.verticalCenter : undefined
+      anchors.bottom: String(renderer.prop("alignment", "top")) === "bottom" ? parent.bottom : undefined
+      spacing: Number(renderer.prop("spacing", Style.spacing.sm))
+
+      Repeater {
+        model: Array.isArray(railRoot.destinations) ? railRoot.destinations.length : 0
+        QQC.ToolButton {
+          required property int index
+          width: destinationColumn.width
+          height: Number(renderer.prop("item_height", 56))
+          enabled: railRoot.enabled && railRoot.itemValue(index, "enabled", true) !== false
+          checkable: true
+          checked: railRoot.currentIndex === index
+          hoverEnabled: true
+
+          contentItem: Row {
+            property bool selected: parent.checked
+            property bool available: parent.enabled
+            anchors.centerIn: parent
+            spacing: railRoot.extended ? Style.spacing.md : 0
+
+            Image {
+              visible: source.toString().length > 0
+              source: String(railRoot.itemValue(index, "icon_source", ""))
+              width: Number(renderer.prop("icon_size", Style.font.icon))
+              height: width
+              fillMode: Image.PreserveAspectFit
+              onStatusChanged: {
+                if (status === Image.Error)
+                  renderer.componentError("navigation_rail_icon_failed",
+                    "Unable to load the declared navigation rail icon image",
+                    { index: index, source: String(source) })
+              }
+            }
+
+            Text {
+              visible: String(railRoot.itemValue(index, "icon_source", "")).length === 0
+              text: renderer.iconGlyph(railRoot.itemValue(index, "icon", "circle_info"))
+              color: parent.selected ? renderer.prop("accent", Color.accent)
+                : (parent.available ? renderer.prop("foreground", renderer.foreground)
+                  : renderer.prop("muted", Color.muted))
+              font.family: renderer.fontFamily
+              font.pixelSize: Number(renderer.prop("icon_size", Style.font.icon))
+              anchors.verticalCenter: parent.verticalCenter
+            }
+
+            Text {
+              visible: railRoot.extended
+              text: railRoot.itemLabel(index)
+              color: parent.selected ? renderer.prop("accent", Color.accent)
+                : (parent.available ? renderer.prop("foreground", renderer.foreground)
+                  : renderer.prop("muted", Color.muted))
+              font.family: String(renderer.prop("font_family", renderer.fontFamily))
+              font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+              anchors.verticalCenter: parent.verticalCenter
+              elide: Text.ElideRight
+            }
+          }
+
+          background: Rectangle {
+            color: parent.checked ? renderer.prop("selected_background", "transparent") : "transparent"
+            radius: Number(renderer.prop("radius", Style.cornerRadius))
+          }
+
+          onClicked: {
+            railRoot.currentIndex = index
+            if (renderer.subscribed("select"))
+              renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "select",
+                { value: index, label: railRoot.itemLabel(index) })
+          }
+        }
+      }
+    }
+  }
+
+  onRequestedIndexChanged: syncSelection()
+  onDestinationsChanged: 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/NumberAnimation.qml

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

data/Components/Builtins/NumberField.qml

@@ -0,0 +1,18 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.NumberField {
+  required property var renderer
+      label: renderer.escapeAutoText(renderer.prop("label", "")); value: Number(renderer.prop("value", 0))
+      from: Number(renderer.prop("from", 0)); to: Number(renderer.prop("to", 100)); stepSize: Number(renderer.prop("step", 1))
+      foreground: renderer.prop("foreground", renderer.foreground); accent: renderer.prop("accent", Color.accent)
+      fontFamily: String(renderer.prop("font_family", renderer.fontFamily)); fontSize: Number(renderer.prop("font_size", Style.font.body))
+      fieldWidth: Number(renderer.prop("field_width", Style.spacing.numberFieldWidth)); hasCursor: renderer.prop("cursor", false) === true
+      onModified: function(value) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: value }) }
+      onHovered: function(value) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: value }) }
+    }

data/Components/Builtins/OpacityAnimator.qml

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