zui 0.0.1

data/Components/Builtins/AlertDialog.qml

@@ -0,0 +1,398 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+QQC.Dialog {
+    id: alertRoot
+
+    required property var renderer
+    readonly property bool requestedOpen: renderer.prop("opened", false) === true && renderer.prop("visible", true) !== false
+    readonly property string severity: String(renderer.prop("severity", "info"))
+    readonly property string imageSource: String(renderer.prop("image", renderer.prop("image_source", "")))
+    readonly property var buttonNames: normalizedButtonNames()
+    readonly property bool centered: renderer.prop("centered", true) !== false
+    readonly property bool hasExplicitX: renderer.node && renderer.node.props && renderer.node.props.x !== undefined
+    readonly property bool hasExplicitY: renderer.node && renderer.node.props && renderer.node.props.y !== undefined
+
+    function severityIcon() {
+        var requested = String(renderer.prop("icon", ""));
+        if (requested !== "")
+            return requested;
+
+        if (severity === "success")
+            return "check";
+
+        if (severity === "warning")
+            return "warning";
+
+        if (severity === "error" || severity === "critical")
+            return "xmark";
+
+        return "info";
+    }
+
+    function severityColor() {
+        if (severity === "success")
+            return renderer.prop("success_color", renderer.prop("accent", Color.accent));
+
+        if (severity === "warning")
+            return renderer.prop("warning_color", "#d8a657");
+
+        if (severity === "error" || severity === "critical")
+            return renderer.prop("error_color", Color.urgent);
+
+        return renderer.prop("accent", Color.accent);
+    }
+
+    function normalizedButtonNames() {
+        var requested = renderer.prop("standard_buttons", ["ok"]);
+        var values = Array.isArray(requested) ? requested : [requested];
+        return values.map(function(value) {
+            return String(value || "").toLowerCase();
+        }).filter(function(value) {
+            return value !== "";
+        });
+    }
+
+    function buttonText(name) {
+        var labels = renderer.prop("button_labels", {
+        });
+        if (labels && labels[name] !== undefined)
+            return String(labels[name]);
+
+        var names = {
+            "ok": "OK",
+            "save": "Save",
+            "save_all": "Save All",
+            "open": "Open",
+            "yes": "Yes",
+            "yes_to_all": "Yes to All",
+            "no": "No",
+            "no_to_all": "No to All",
+            "abort": "Abort",
+            "retry": "Retry",
+            "ignore": "Ignore",
+            "close": "Close",
+            "cancel": "Cancel",
+            "discard": "Discard",
+            "help": "Help",
+            "apply": "Apply",
+            "reset": "Reset",
+            "restore_defaults": "Restore Defaults"
+        };
+        return names[name] || name;
+    }
+
+    function isPrimaryButton(name) {
+        return ["ok", "save", "save_all", "open", "yes", "yes_to_all", "retry", "apply"].indexOf(name) >= 0;
+    }
+
+    function activateButton(name) {
+        if (name === "apply") {
+            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "apply", {
+            });
+        } else if (name === "reset" || name === "restore_defaults") {
+            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reset", {
+            });
+        } else if (name === "help") {
+            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "help", {
+            });
+        } else if (name === "discard") {
+            renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "discard", {
+            });
+            close();
+        } else if (["no", "no_to_all", "abort", "close", "cancel"].indexOf(name) >= 0) {
+            reject();
+        } else {
+            accept();
+        }
+    }
+
+    function fillModeValue(value) {
+        var mode = String(value || "preserve_aspect_fit");
+        if (mode === "stretch")
+            return Image.Stretch;
+
+        if (mode === "preserve_aspect_crop" || mode === "crop" || mode === "cover")
+            return Image.PreserveAspectCrop;
+
+        if (mode === "tile")
+            return Image.Tile;
+
+        if (mode === "tile_vertically" || mode === "tile_vertical")
+            return Image.TileVertically;
+
+        if (mode === "tile_horizontally" || mode === "tile_horizontal")
+            return Image.TileHorizontally;
+
+        if (mode === "pad")
+            return Image.Pad;
+
+        return Image.PreserveAspectFit;
+    }
+
+    function closePolicyValue(value) {
+        var names = Array.isArray(value) ? value : [value || "escape"];
+        var result = 0;
+        for (var index = 0; index < names.length; index++) {
+            var name = String(names[index]);
+            if (name === "escape")
+                result |= QQC.Popup.CloseOnEscape;
+
+            if (name === "outside")
+                result |= QQC.Popup.CloseOnPressOutside;
+
+            if (name === "outside_parent")
+                result |= QQC.Popup.CloseOnPressOutsideParent;
+
+        }
+        return result;
+    }
+
+    function syncOpenState() {
+        if (requestedOpen === opened)
+            return ;
+
+        if (requestedOpen)
+            open();
+        else
+            close();
+    }
+
+    title: String(renderer.prop("title", ""))
+    standardButtons: QQC.Dialog.NoButton
+    parent: QQC.Overlay.overlay
+    x: hasExplicitX ? Number(renderer.prop("x", 0)) : (centered && parent ? Math.round((parent.width - width) / 2) : 0)
+    y: hasExplicitY ? Number(renderer.prop("y", 0)) : (centered && parent ? Math.round((parent.height - height) / 2) : 0)
+    width: Number(renderer.prop("width", 500))
+    height: Number(renderer.prop("height", 360))
+    modal: renderer.prop("modal", true) !== false
+    dim: renderer.prop("dim", modal) !== false
+    focus: renderer.prop("focus", true) !== false
+    closePolicy: closePolicyValue(renderer.prop("close_policy", "escape"))
+    enabled: renderer.prop("enabled", true) !== false
+    padding: Number(renderer.prop("padding", Style.spacing.lg))
+    font.family: String(renderer.prop("font_family", renderer.fontFamily))
+    font.pixelSize: Number(renderer.prop("font_size", Style.font.body))
+    Component.onCompleted: syncOpenState()
+    onRequestedOpenChanged: syncOpenState()
+    onAccepted: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "accept", {
+    })
+    onRejected: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "reject", {
+    })
+    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", {
+    })
+    onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, visible ? "show" : "hide", {
+    })
+    onActiveFocusChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, activeFocus ? "focus" : "blur", {
+    })
+
+    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")
+    }
+
+    header: Rectangle {
+        implicitHeight: alertRoot.title.length > 0 ? Number(renderer.prop("header_height", 48)) : 0
+        color: renderer.prop("header_background", renderer.prop("background", Color.background))
+        radius: Number(renderer.prop("radius", Style.cornerRadius))
+
+        Text {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.leftMargin: Number(renderer.prop("padding", Style.spacing.lg))
+            anchors.rightMargin: Number(renderer.prop("padding", Style.spacing.lg))
+            anchors.verticalCenter: parent.verticalCenter
+            text: alertRoot.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.body))
+            font.bold: true
+            elide: Text.ElideRight
+        }
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.bottom: parent.bottom
+            height: Style.normalBorderWidth
+            color: renderer.prop("border_color", Qt.rgba(renderer.foreground.r, renderer.foreground.g, renderer.foreground.b, 0.2))
+        }
+
+    }
+
+    contentItem: Column {
+        spacing: Number(renderer.prop("spacing", Style.spacing.md))
+
+        Row {
+            id: messageRow
+
+            width: parent.width
+            height: Math.max(iconFrame.visible ? iconFrame.height : 0, messageText.implicitHeight)
+            spacing: Number(renderer.prop("spacing", Style.spacing.md))
+
+            Item {
+                id: iconFrame
+
+                width: Number(renderer.prop("icon_size", 32))
+                height: width
+                visible: renderer.prop("show_icon", true) !== false
+                anchors.verticalCenter: parent.verticalCenter
+
+                Rectangle {
+                    anchors.fill: parent
+                    radius: width / 2
+                    color: alertRoot.severityColor()
+                }
+
+                Text {
+                    anchors.centerIn: parent
+                    text: renderer.iconGlyph(alertRoot.severityIcon())
+                    color: renderer.prop("icon_foreground", Color.background)
+                    font.family: renderer.fontFamily
+                    font.pixelSize: Math.max(10, parent.width * 0.5)
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                }
+
+            }
+
+            Text {
+                id: messageText
+
+                width: Math.max(0, parent.width - (iconFrame.visible ? iconFrame.width + parent.spacing : 0))
+                anchors.verticalCenter: parent.verticalCenter
+                text: String(renderer.prop("message", ""))
+                color: renderer.prop("foreground", renderer.foreground)
+                font.family: String(renderer.prop("font_family", renderer.fontFamily))
+                font.pixelSize: Number(renderer.prop("message_size", Style.font.heading))
+                font.bold: true
+                wrapMode: Text.Wrap
+            }
+
+        }
+
+        Rectangle {
+            id: imageFrame
+
+            width: {
+                var requested = Number(renderer.prop("image_width", 0));
+                return requested > 0 ? Math.min(parent.width, requested) : parent.width;
+            }
+            height: Number(renderer.prop("image_height", 160))
+            anchors.horizontalCenter: parent.horizontalCenter
+            visible: alertRoot.imageSource !== ""
+            color: "transparent"
+            radius: Number(renderer.prop("image_radius", renderer.prop("radius", Style.cornerRadius)))
+            clip: true
+
+            Image {
+                anchors.fill: parent
+                source: renderer.assetUrl(alertRoot.imageSource)
+                fillMode: alertRoot.fillModeValue(renderer.prop("image_fill_mode", "preserve_aspect_fit"))
+                asynchronous: renderer.prop("image_asynchronous", true) !== false
+                cache: renderer.prop("image_cache", true) !== false
+                smooth: true
+                onStatusChanged: {
+                    if (status === Image.Error)
+                        renderer.componentError("alert_dialog_image_failed", "Unable to load the declared alert dialog image", {
+                            "source": String(source)
+                        });
+                }
+            }
+
+        }
+
+        Text {
+            width: parent.width
+            visible: text.length > 0
+            text: String(renderer.prop("informative_text", ""))
+            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))
+            wrapMode: Text.Wrap
+        }
+
+        QQC.ScrollView {
+            width: parent.width
+            height: Number(renderer.prop("details_height", 120))
+            visible: String(renderer.prop("detailed_text", "")).length > 0
+            clip: true
+
+            QQC.TextArea {
+                text: String(renderer.prop("detailed_text", ""))
+                readOnly: true
+                selectByMouse: true
+                wrapMode: TextEdit.Wrap
+                color: renderer.prop("foreground", renderer.foreground)
+                font.family: String(renderer.prop("font_family", renderer.fontFamily))
+                font.pixelSize: Number(renderer.prop("details_size", Style.font.caption))
+            }
+
+        }
+
+    }
+
+    footer: Rectangle {
+        implicitHeight: alertRoot.buttonNames.length > 0 ? Number(renderer.prop("footer_height", 62)) : 0
+        color: renderer.prop("footer_background", renderer.prop("background", Color.background))
+
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.top
+            height: Style.normalBorderWidth
+            color: renderer.prop("border_color", Qt.rgba(renderer.foreground.r, renderer.foreground.g, renderer.foreground.b, 0.2))
+        }
+
+        Row {
+            id: buttonRow
+
+            readonly property string alignment: String(renderer.prop("button_alignment", "right"))
+
+            anchors.left: alignment === "left" || alignment === "start" ? parent.left : undefined
+            anchors.right: alignment === "right" || alignment === "end" ? parent.right : undefined
+            anchors.horizontalCenter: alignment === "center" ? parent.horizontalCenter : undefined
+            anchors.leftMargin: Number(renderer.prop("padding", Style.spacing.lg))
+            anchors.rightMargin: Number(renderer.prop("padding", Style.spacing.lg))
+            anchors.verticalCenter: parent.verticalCenter
+            spacing: Number(renderer.prop("button_spacing", Style.spacing.sm))
+
+            Repeater {
+                model: alertRoot.buttonNames
+
+                delegate: ZuiControls.Button {
+                    required property string modelData
+                    readonly property bool primary: alertRoot.isPrimaryButton(modelData)
+
+                    text: alertRoot.buttonText(modelData)
+                    iconText: primary && modelData === "ok" ? renderer.iconGlyph("check") : ""
+                    foreground: renderer.prop("button_foreground", renderer.prop("foreground", renderer.foreground))
+                    background: primary ? renderer.prop("button_background", "transparent") : "transparent"
+                    accent: renderer.prop("button_accent", renderer.prop("accent", Color.accent))
+                    fontFamily: String(renderer.prop("font_family", renderer.fontFamily))
+                    fontSize: Number(renderer.prop("font_size", Style.font.body))
+                    focusable: true
+                    bordered: !primary
+                    active: primary
+                    horizontalPadding: Number(renderer.prop("button_horizontal_padding", Style.spacing.controlPaddingX))
+                    verticalPadding: Number(renderer.prop("button_vertical_padding", Style.spacing.controlPaddingY))
+                    onClicked: alertRoot.activateButton(modelData)
+                }
+
+            }
+
+        }
+
+    }
+
+}

data/Components/Builtins/AnchorAnimation.qml

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

data/Components/Builtins/AnchorChanges.qml

@@ -0,0 +1,11 @@
+import QtQuick
+
+Item {
+  id: changesRoot
+  property var renderer: null
+  property int handledRevision: -1
+  function line(target,key){var value=renderer.prop("anchors",{})[key];if(value===undefined||value===null||String(value)==="")return undefined;var item=renderer.findRenderedItem(value);if(!item)return undefined;if(key==="left"||key==="right"||key==="horizontal_center")return key==="left"?item.left:(key==="right"?item.right:item.horizontalCenter);return key==="top"?item.top:(key==="bottom"?item.bottom:item.verticalCenter)}
+  function apply(){if(!renderer)return;var revision=Number(renderer.prop("revision",0));if(revision===handledRevision)return;var target=renderer.findRenderedItem(renderer.prop("target",""));if(!target)return;handledRevision=revision;var anchors=renderer.prop("anchors",{});if(anchors.left!==undefined)target.anchors.left=line(target,"left");if(anchors.right!==undefined)target.anchors.right=line(target,"right");if(anchors.top!==undefined)target.anchors.top=line(target,"top");if(anchors.bottom!==undefined)target.anchors.bottom=line(target,"bottom");if(anchors.horizontal_center!==undefined)target.anchors.horizontalCenter=line(target,"horizontal_center");if(anchors.vertical_center!==undefined)target.anchors.verticalCenter=line(target,"vertical_center");var margins=renderer.prop("margins",{});for(var key in margins){var property=key.replace(/_([a-z])/g,function(_,letter){return letter.toUpperCase()});if(target.anchors.hasOwnProperty(property))target.anchors[property]=margins[key]}renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"apply",{revision:revision})}
+  Connections{target:renderer;function onNodeChanged(){changesRoot.apply()}}
+  Component.onCompleted:apply()
+}

data/Components/Builtins/AnimatedImage.qml

@@ -0,0 +1,39 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+AnimatedImage {
+  required property var renderer
+      source: String(renderer.prop("source", ""))
+      width: Number(renderer.prop("width", sourceSize.width > 0 ? sourceSize.width : 120))
+      height: Number(renderer.prop("height", sourceSize.height > 0 ? sourceSize.height : 120))
+      fillMode: {
+        var mode = String(renderer.prop("fill_mode", "contain"))
+        if (mode === "cover") return Image.PreserveAspectCrop
+        if (mode === "stretch") return Image.Stretch
+        if (mode === "tile") return Image.Tile
+        if (mode === "tile_horizontal") return Image.TileHorizontally
+        if (mode === "tile_vertical") return Image.TileVertically
+        if (mode === "pad") return Image.Pad
+        return Image.PreserveAspectFit
+      }
+      playing: renderer.prop("playing", true) !== false
+      paused: renderer.prop("paused", false) === true
+      speed: Number(renderer.prop("speed", 1))
+      asynchronous: renderer.prop("asynchronous", true) !== false
+      cache: renderer.prop("cache", true) !== false
+      mirror: renderer.prop("mirror", false) === true
+      smooth: renderer.prop("smooth", true) !== false
+      onCurrentFrameChanged: {
+        if (renderer.subscribed("frame")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "frame", { value: currentFrame, count: frameCount })
+      }
+      onStatusChanged: {
+        if (renderer.subscribed("status")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "status", { value: status })
+        if (status === AnimatedImage.Ready && renderer.subscribed("loaded")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "loaded", { width: sourceSize.width, height: sourceSize.height, frames: frameCount })
+        if (status === AnimatedImage.Error) renderer.componentError("animated_image_load_failed", "Unable to load the declared animated image", { source: String(source) })
+      }
+    }

data/Components/Builtins/Animation.qml

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

data/Components/Builtins/AnimationController.qml

@@ -0,0 +1,11 @@
+import QtQuick
+
+Item {
+  id: controllerRoot
+  property var renderer: null
+  function option(name,fallback){var specification=renderer?renderer.prop("animation",{}):{};return specification&&specification[name]!==undefined?specification[name]:(renderer?renderer.prop(name,fallback):fallback)}
+  readonly property var targetItem: renderer ? renderer.findRenderedItem(option("target", "")) : null
+  NumberAnimation { id: controlledAnimation; target: controllerRoot.targetItem; property: String(controllerRoot.option("property", "opacity")); from: Number(controllerRoot.option("from", 0)); to: Number(controllerRoot.option("to", 1)); duration: Number(controllerRoot.option("duration", 1000)) }
+  AnimationController { id: nativeController; animation: controlledAnimation; progress: Number(renderer ? renderer.prop("progress", 0) : 0); onProgressChanged: { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "progress_change", { value: progress }); if(progress>=1)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"finish",{}) } }
+  Connections { target: renderer; function onNodeChanged(){nativeController.progress=Number(renderer.prop("progress",0));if(renderer.prop("reload",false)===true)nativeController.reload()} }
+}

data/Components/Builtins/ApplicationWindow.qml

@@ -0,0 +1,103 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Window
+
+QQC.ApplicationWindow {
+  id: nativeWindow
+
+  required property var renderer
+
+  function visibilityValue(value) {
+    var name = String(value || "automatic")
+    if (name === "hidden") return Window.Hidden
+    if (name === "minimized") return Window.Minimized
+    if (name === "maximized") return Window.Maximized
+    if (name === "fullscreen" || name === "full_screen") return Window.FullScreen
+    if (name === "windowed") return Window.Windowed
+    return Window.AutomaticVisibility
+  }
+
+  function modalityValue(value) {
+    var name = String(value || "none")
+    if (name === "window" || name === "window_modal") return Qt.WindowModal
+    if (name === "application" || name === "application_modal") return Qt.ApplicationModal
+    return Qt.NonModal
+  }
+
+  function flagsValue(value) {
+    if (typeof value === "number") return value
+    var names = Array.isArray(value) ? value : [value || "window"]
+    var result = 0
+    for (var index = 0; index < names.length; index++) {
+      var name = String(names[index])
+      if (name === "dialog") result |= Qt.Dialog
+      else if (name === "sheet") result |= Qt.Sheet
+      else if (name === "drawer") result |= Qt.Drawer
+      else if (name === "popup") result |= Qt.Popup
+      else if (name === "tool") result |= Qt.Tool
+      else if (name === "tooltip") result |= Qt.ToolTip
+      else if (name === "splash") result |= Qt.SplashScreen
+      else if (name === "frameless") result |= Qt.FramelessWindowHint
+      else if (name === "stay_on_top") result |= Qt.WindowStaysOnTopHint
+      else if (name === "stay_on_bottom") result |= Qt.WindowStaysOnBottomHint
+      else result |= Qt.Window
+    }
+    return result || Qt.Window
+  }
+
+  function orientationValue(value) {
+    var name = String(value || "primary")
+    if (name === "portrait") return Qt.PortraitOrientation
+    if (name === "landscape") return Qt.LandscapeOrientation
+    if (name === "inverted_portrait") return Qt.InvertedPortraitOrientation
+    if (name === "inverted_landscape") return Qt.InvertedLandscapeOrientation
+    return Qt.PrimaryOrientation
+  }
+
+  title: String(renderer.prop("title", ""))
+  x: Number(renderer.prop("x", 0))
+  y: Number(renderer.prop("y", 0))
+  width: Number(renderer.prop("width", 800))
+  height: Number(renderer.prop("height", 600))
+  minimumWidth: Number(renderer.prop("minimum_width", 0))
+  minimumHeight: Number(renderer.prop("minimum_height", 0))
+  maximumWidth: Number(renderer.prop("maximum_width", 16777215))
+  maximumHeight: Number(renderer.prop("maximum_height", 16777215))
+  color: renderer.prop("color", "transparent")
+  visible: renderer.prop("visible", false) === true
+  visibility: visibilityValue(renderer.prop("visibility", "automatic"))
+  modality: modalityValue(renderer.prop("modality", "none"))
+  flags: flagsValue(renderer.prop("flags", "window"))
+  opacity: Number(renderer.prop("opacity", 1))
+  contentOrientation: orientationValue(renderer.prop("content_orientation", "primary"))
+  font.family: String(renderer.prop("font_family", renderer.fontFamily))
+  font.pixelSize: Number(renderer.prop("font_size", 14))
+  background: Rectangle { color: renderer.prop("background", "transparent") }
+
+  onClosing: function(close) {
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "close", {
+      accepted: close.accepted
+    })
+  }
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "visible_change", { value: visible })
+  onActiveChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "active_change", { value: active })
+  onVisibilityChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "visibility_change", { value: visibility })
+  onActiveFocusControlChanged: if (renderer.subscribed("focus_change")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "focus_change", {
+    active: activeFocusControl !== null,
+    object_name: activeFocusControl ? String(activeFocusControl.objectName || "") : ""
+  })
+  onXChanged: if (renderer.subscribed("move")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "move", { x: x, y: y })
+  onYChanged: if (renderer.subscribed("move")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "move", { x: x, y: y })
+  onWidthChanged: if (renderer.subscribed("resize")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "resize", { width: width, height: height })
+  onHeightChanged: if (renderer.subscribed("resize")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "resize", { width: width, height: height })
+
+  Item {
+    anchors.fill: parent
+    LayoutMirroring.enabled: String(renderer.prop("layout_direction", "left_to_right")) === "right_to_left"
+    LayoutMirroring.childrenInherit: true
+    Repeater {
+      model: renderer.node.children || []
+      delegate: renderer.childDelegateComponent
+    }
+  }
+}

data/Components/Builtins/AreaChart.qml

@@ -0,0 +1,70 @@
+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: areaCanvas
+        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 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 }
+          var pad = 10
+          var chartWidth = Math.max(1, width - pad * 2)
+          var chartHeight = Math.max(1, height - pad * 2)
+          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++) {
+            points.push({
+              x: pad + (values.length === 1 ? chartWidth / 2 : chartWidth * index / (values.length - 1)),
+              y: pad + chartHeight * (1 - (values[index] - low) / (high - low))
+            })
+          }
+          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 = renderer.prop("fill_color", renderer.prop("color", Color.accent)); 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()
+        }
+      }
+      Connections { target: root; function onNodeChanged() { areaCanvas.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)) }
+      }
+    }