Inital commit of the Komplex Hub

App/CMakeLists.txt

@@ -0,0 +1,11 @@
+
+target_sources(${CMAKE_PROJECT_NAME} PUBLIC
+    "main.cpp"
+)
+
+target_link_libraries(${CMAKE_PROJECT_NAME} PRIVATE
+    Qt${QT_VERSION_MAJOR}::Core
+    Qt${QT_VERSION_MAJOR}::Gui
+    Qt${QT_VERSION_MAJOR}::Widgets
+    Qt${QT_VERSION_MAJOR}::Quick
+    Qt${QT_VERSION_MAJOR}::Qml)

App/autogen/environment.h

@@ -0,0 +1,36 @@
+/*
+ * This file is automatically generated by Qt Design Studio.
+ * Do not change.
+*/
+#ifndef APP_ENVIRONMENT_H
+#define APP_ENVIRONMENT_H
+
+#include <QGuiApplication>
+#include "qqmlextensionplugin.h"
+
+Q_IMPORT_QML_PLUGIN(KomplexHubPlugin)
+Q_IMPORT_QML_PLUGIN(KomplexHubContentPlugin)
+
+const char mainQmlFile[] = "qrc:/qt/qml/KomplexHubContent/App.qml";
+
+#ifdef BUILD_QDS_COMPONENTS
+
+Q_IMPORT_QML_PLUGIN(QtQuick_Studio_ComponentsPlugin)
+Q_IMPORT_QML_PLUGIN(QtQuick_Studio_EffectsPlugin)
+Q_IMPORT_QML_PLUGIN(QtQuick_Studio_ApplicationPlugin)
+Q_IMPORT_QML_PLUGIN(FlowViewPlugin)
+Q_IMPORT_QML_PLUGIN(QtQuick_Studio_LogicHelperPlugin)
+Q_IMPORT_QML_PLUGIN(QtQuick_Studio_MultiTextPlugin)
+Q_IMPORT_QML_PLUGIN(QtQuick_Studio_EventSimulatorPlugin)
+Q_IMPORT_QML_PLUGIN(QtQuick_Studio_EventSystemPlugin)
+
+#endif
+
+inline void set_qt_environment() {
+    qputenv("QML_COMPAT_RESOLVE_URLS_ON_ASSIGNMENT", "1");
+    qputenv("QT_ENABLE_HIGHDPI_SCALING", "0");
+    qputenv("QT_LOGGING_RULES", "qt.qml.connections=false");
+    qputenv("QT_QUICK_CONTROLS_CONF", ":/qtquickcontrols2.conf");
+}
+
+#endif // APP_ENVIRONMENT_H

App/main.cpp

@@ -0,0 +1,46 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+
+#include <QApplication>
+#include <QQmlApplicationEngine>
+#include <qobject.h>
+#include <qqml.h>
+#include <QPalette>
+#include <QStyle>
+#include <QQuickStyle>
+#include <QTextStream>
+#include <QSurface>
+#include <QStyleFactory>
+#include <QColorSpace>
+#include <QQuickWindow>
+#include <QSurfaceFormat>
+#include <QSGRendererInterface>
+#include "autogen/environment.h"
+
+int main(int argc, char *argv[])
+{
+    set_qt_environment();
+    QCoreApplication::setOrganizationName("DigitalArtifex");
+    QCoreApplication::setApplicationName("KomplexHub");
+    QCoreApplication::setApplicationVersion("1.0");
+
+    QApplication app(argc, argv);
+
+    QQmlApplicationEngine engine;
+    const QUrl url(mainQmlFile);
+    QObject::connect(
+                &engine, &QQmlApplicationEngine::objectCreated, &app,
+                [url](QObject *obj, const QUrl &objUrl) {
+        if (!obj && url == objUrl)
+            QCoreApplication::exit(-1);
+    }, Qt::QueuedConnection);
+
+    engine.addImportPath(QCoreApplication::applicationDirPath() + "/qml");
+    engine.addImportPath(":/");
+    engine.load(url);
+
+    if (engine.rootObjects().isEmpty())
+        return -1;
+
+    return app.exec();
+}

CMakeLists.txt

@@ -0,0 +1,125 @@
+
+cmake_minimum_required(VERSION 3.21.1)
+
+option(LINK_INSIGHT "Link Qt Insight Tracker library" ON)
+option(BUILD_QDS_COMPONENTS "Build design studio components" ON)
+ 
+project(KomplexHub LANGUAGES CXX) 
+
+list(APPEND CMAKE_MODULE_PATH "${CMAKE_CURRENT_SOURCE_DIR}" "${CMAKE_CURRENT_SOURCE_DIR}/cmake")
+
+set(CMAKE_CXX_STANDARD 20)
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+set(CMAKE_AUTOMOC ON)
+set(CMAKE_AUTORCC ON)
+set(CMAKE_INCLUDE_CURRENT_DIR ON)
+set(QT_QML_OUTPUT_DIRECTORY ${CMAKE_BINARY_DIR}/qml)
+set(QML_IMPORT_PATH ${QT_QML_OUTPUT_DIRECTORY}
+    CACHE STRING "Import paths for Qt Creator's code model"
+    FORCE
+)
+
+find_package(Qt6 6.8 REQUIRED COMPONENTS Core Gui Widgets Qml Quick QuickControls2 QuickTimeline ShaderTools)
+qt_standard_project_setup()
+
+qt_add_executable(${CMAKE_PROJECT_NAME})
+qt_add_resources(${CMAKE_PROJECT_NAME} "configuration"
+    PREFIX "/"
+    FILES
+        qtquickcontrols2.conf
+)
+
+qt_add_resources(${CMAKE_PROJECT_NAME} "app_images"
+    FILES
+        "images/icons/icons8-back.svg"
+        "images/icons/icons8-bill.svg"
+        "images/icons/icons8-biotech.svg"
+        "images/icons/icons8-cancel.svg"
+        "images/icons/icons8-check-mark.svg"
+        "images/icons/icons8-close-window.svg"
+        "images/icons/icons8-famous.svg"
+        "images/icons/icons8-filter.svg"
+        "images/icons/icons8-forward.svg"
+        "images/icons/icons8-hdd.svg"
+        "images/icons/icons8-image.svg"
+        "images/icons/icons8-login.svg"
+        "images/icons/icons8-logout-rounded-left.svg"
+        "images/icons/icons8-next.svg"
+        "images/icons/icons8-reply-arrow.svg"
+        "images/icons/icons8-search.svg"
+        "images/icons/icons8-settings.svg"
+        "images/icons/icons8-shopping-cart.svg"
+        "images/icons/icons8-star-filled.svg"
+        "images/icons/icons8-store.svg"
+        "images/icons/icons8-user-account.svg"
+        "images/icons/icons8-view-more.svg"
+        "images/kero/kero_build_1.png"
+        "images/kero/kero_build_2.png"
+        "images/kero/kero_build_3.png"
+        "images/kero/kero_build_4.png"
+        "images/kero/kero_build_error.png"
+        "images/kero/kero_choice.png"
+        "images/kero/kero_error.png"
+        "images/kero/kero_hello.png"
+        "images/kero/kero_login.png"
+        "images/kero/kero_no_results.png"
+        "images/kero/kero_run_1.png"
+        "images/kero/kero_run_2.png"
+        "images/kero/kero_run_3.png"
+        "images/kero/kero_run_4.png"
+        "images/kero/kero_success.png"
+        "images/kero/kero_warning.png"
+        "images/icons/icons8-trash.svg"
+    )
+
+include(qds)
+
+option(ENABLE_ASAN "Enable AddressSanitizer" OFF)
+
+if(ENABLE_ASAN)
+  message(STATUS "Building with AddressSanitizer")
+  if(NOT CMAKE_CXX_COMPILER_ID MATCHES "Clang|GNU")
+    message(FATAL_ERROR "ASan supported only with Clang/GCC")
+  endif()
+
+  target_compile_options(${CMAKE_PROJECT_NAME} PRIVATE -fsanitize=address -fno-omit-frame-pointer)
+  target_link_options(${CMAKE_PROJECT_NAME} PRIVATE -fsanitize=address)
+endif()
+
+# this wont produce a binary due to a feature mismatch issue, but will lint
+
+option(ENABLE_CLANG_TIDY "Enable clang-tidy" OFF)
+
+if(ENABLE_CLANG_TIDY)
+  if(NOT DEFINED CLANG_TIDY)
+    if(DEFINED ENV{CLANG_TIDY})
+      set(CLANG_TIDY $ENV{CLANG_TIDY})
+    endif()
+  endif()
+
+  find_program(CLANG_TIDY_EXE NAMES ${CLANG_TIDY} clang-tidy)
+  if(CLANG_TIDY_EXE)
+    message(STATUS ${CMAKE_CXX_FLAGS})
+    message(STATUS "Found clang-tidy: ${CLANG_TIDY_EXE}")
+  else()
+    message(STATUS "clang-tidy not found")
+  endif()
+  if(CLANG_TIDY_EXE)
+    set(CMAKE_CXX_CLANG_TIDY "${CLANG_TIDY_EXE};-checks=modernize-*,performance-*,readability-*,header-filter=.*;--warnings-as-errors=*;--extra-arg=-Qunused-arguments")
+  endif()
+endif()
+
+if (BUILD_QDS_COMPONENTS)
+    include(qmlcomponents OPTIONAL)
+endif()
+
+if (LINK_INSIGHT)
+    include(insight OPTIONAL)
+endif ()
+
+include(GNUInstallDirs)
+install(TARGETS ${CMAKE_PROJECT_NAME}
+  BUNDLE DESTINATION .
+  LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
+  RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
+)

CMakeLists.txt.shared

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE QtCreatorProject>
+<qtcreator>
+  <data>
+  <variable>ProjectExplorer.Project.PluginSettings</variable>
+  <valuemap type="QVariantMap">
+   <valuelist type="QVariantList" key="ProjectExplorer.Project.Environment">
+    <value type="QString">QTC_DEFAULT_BUILD_DIRECTORY_TEMPLATE=../%{Asciify:%{Project:Name}-%{BuildConfig:Name}}</value>
+   </valuelist>
+  </valuemap>
+</data>
+<data>
+  <variable>Version</variable>
+  <value type="int">22</value>
+</data>
+<data>
+  <variable>CMake Generator</variable>
+  <value type="int">2</value>
+</data>
+</qtcreator>

Dependencies/CMakeLists.txt

@@ -0,0 +1,4 @@
+
+if (BUILD_QDS_COMPONENTS)
+    add_subdirectory(Components)
+endif()

Dependencies/Components/CMakeLists.txt

@@ -0,0 +1,18 @@
+find_package(Qt6 COMPONENTS ShaderTools)
+
+add_library(QtQuickDesignerComponents INTERFACE)
+
+function(register_plugin module_name)
+    target_link_libraries(QtQuickDesignerComponents INTERFACE ${module_name}plugin)
+endfunction()
+
+set(qds_qml_extra_args "")
+if(QT_QDS_COMPONENTS_NOWARN)
+   list(APPEND qds_qml_extra_args NO_LINT)
+endif()
+
+if (Qt6_VERSION VERSION_GREATER_EQUAL "6.8")
+    qt_policy(SET QTP0004 NEW)
+endif()
+
+add_subdirectory(imports)

Dependencies/Components/ignore-in-qds

@@ -0,0 +1,2 @@
+#### QDS 4.8.0
+This folder is ignored in Qt Design Studio.

Dependencies/Components/imports/CMakeLists.txt

@@ -0,0 +1,10 @@
+add_subdirectory(application)
+add_subdirectory(compat)
+add_subdirectory(components)
+add_subdirectory(designeffects)
+add_subdirectory(effects_qt6)
+add_subdirectory(flowview)
+add_subdirectory(logichelper)
+add_subdirectory(multitext)
+add_subdirectory(tools)
+add_subdirectory(utils)

Dependencies/Components/imports/application/CMakeLists.txt

@@ -0,0 +1,15 @@
+qt_add_library(QuickStudioApplication STATIC)
+qt6_add_qml_module(QuickStudioApplication
+    URI "QtQuick.Studio.Application"
+    VERSION "${PROJECT_VERSION}"
+    RESOURCE_PREFIX "/qt-project.org/imports"
+    DESIGNER_SUPPORTED
+    ${qds_qml_extra_args}
+    SOURCES
+        quickstudioapplication.cpp
+        quickstudioapplication.h
+)
+
+target_link_libraries(QuickStudioApplication PRIVATE Qt6::Gui)
+
+register_plugin(QuickStudioApplication)

Dependencies/Components/imports/application/quickstudioapplication.cpp

@@ -0,0 +1,90 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Dialogs module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include "quickstudioapplication.h"
+
+#include <QDir>
+#include <QDirIterator>
+#include <QFontDatabase>
+#include <QLoggingCategory>
+
+QT_BEGIN_NAMESPACE
+
+#ifndef Q_STATIC_LOGGING_CATEGORY // introduced with Qt 6.9
+static Q_LOGGING_CATEGORY(texttomodelMergerDebug, "qt.Studioapplication.debug", QtDebugMsg)
+#else
+Q_STATIC_LOGGING_CATEGORY(texttomodelMergerDebug, "qt.Studioapplication.debug", QtDebugMsg)
+#endif
+
+QuickStudioApplication::QuickStudioApplication(QObject *parent) : QObject(parent) {}
+
+static void loadFont(const QString &path)
+{
+    qCDebug(texttomodelMergerDebug) << Q_FUNC_INFO << "Load font: " << path;
+    QFontDatabase::addApplicationFont(path);
+}
+
+void QuickStudioApplication::setFontPath(const QUrl &url)
+{
+    if (url == fontPath())
+        return;
+
+    m_fontPath = url;
+
+    QString localPath;
+
+    if (url.isLocalFile())
+        localPath = url.toLocalFile();
+
+    if (url.scheme() == QStringLiteral("qrc")) {
+        const QString &path = url.path();
+        localPath = QStringLiteral(":") + path;
+    }
+
+    if (!localPath.isEmpty()) {
+        QDirIterator it(localPath,
+                        {QStringLiteral("*.ttf"), QStringLiteral("*.otf")},
+                        QDir::Files,
+                        QDirIterator::Subdirectories);
+
+        while (it.hasNext())
+            loadFont(it.next());
+    }
+
+    emit fontPathChanged();
+}
+
+QT_END_NAMESPACE

Dependencies/Components/imports/application/quickstudioapplication.h

@@ -0,0 +1,83 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Dialogs module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#ifndef QUICKSTUDIOAPPLICATION_P_H
+#define QUICKSTUDIOAPPLICATION_P_H
+
+//
+//  W A R N I N G
+//  -------------
+//
+// This file is not part of the Qt API.  It exists purely as an
+// implementation detail.  This header file may change from version to
+// version without notice, or even be removed.
+//
+// We mean it.
+//
+
+#include <QtCore/qurl.h>
+#include <QtQml/qqml.h>
+
+QT_BEGIN_NAMESPACE
+
+class QuickStudioApplication : public QObject
+{
+    Q_OBJECT
+
+    QML_NAMED_ELEMENT(StudioApplication)
+    QML_ADDED_IN_VERSION(6, 2)
+
+     Q_PROPERTY(QUrl fontPath READ fontPath WRITE setFontPath NOTIFY fontPathChanged)
+
+public:
+    explicit QuickStudioApplication(QObject *parent = nullptr);
+
+    const QUrl fontPath() { return m_fontPath; }
+    void setFontPath(const QUrl &path);
+
+signals:
+    void fontPathChanged();
+
+private:
+    QUrl m_fontPath;
+
+};
+
+QT_END_NAMESPACE
+
+QML_DECLARE_TYPE(QuickStudioApplication)
+
+#endif // QUICKSTUDIOAPPLICATION_P_H

Dependencies/Components/imports/compat/CMakeLists.txt

@@ -0,0 +1,4 @@
+add_subdirectory(Components)
+add_subdirectory(Extras)
+add_subdirectory(Layers)
+add_subdirectory(Profiling)

Dependencies/Components/imports/compat/Components/ArcItem.qml

@@ -0,0 +1,244 @@
+/****************************************************************************
+**
+** Copyright (C) 2023 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.9
+import QtQuick.Shapes 1.12
+
+//! [ArcItem compatibility]
+Shape {
+    id: root
+
+    implicitWidth: 100
+    implicitHeight: 100
+
+    // These properties are not supported in Qt Quick Ultralite:
+    // strokeStyle, dashPattern, dashOffset
+
+    property alias gradient: path.fillGradient
+    property alias strokeWidth: path.strokeWidth
+    property alias strokeColor: path.strokeColor
+    property alias joinStyle: path.joinStyle
+    property alias fillColor: path.fillColor
+    property alias capStyle: path.capStyle
+    property real begin: 0
+    property real end: 90
+    property real arcWidth: 10
+    property real alpha: root.clamp(root.sortedEnd() - root.sortedBegin(), 0, 359.9)
+
+    // antialiasing is enabled to have the same shape as Qt Quick Ultralite runtime
+    antialiasing: true
+
+    layer.enabled: root.antialiasing
+    layer.smooth: root.antialiasing
+    layer.samples: root.antialiasing ? 4 : 0
+
+    property bool outlineArc: false
+    property bool round: false
+    property bool roundEnd: root.round
+    property bool roundBegin: root.round
+
+    function clamp(num, min, max) {
+        return Math.max(min, Math.min(num, max))
+    }
+
+    function toRadians(degrees) {
+        return degrees * (Math.PI / 180.0)
+    }
+
+    function myCos(angleInDegrees) {
+        return Math.cos(root.toRadians(angleInDegrees))
+    }
+
+    function mySin(angleInDegrees) {
+        return Math.sin(root.toRadians(angleInDegrees))
+    }
+
+    function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
+        return centerX + radius * Math.cos(root.toRadians(angleInDegrees))
+    }
+
+    function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
+        return centerY + radius * Math.sin(root.toRadians(angleInDegrees))
+    }
+
+    function sortedBegin() {
+        return Math.min(root.begin, root.end)
+    }
+
+    function sortedEnd() {
+        return Math.min(Math.max(root.begin, root.end), root.sortedBegin() + 359.9)
+    }
+
+    function isArcFull() {
+        return root.alpha > 359.5
+    }
+
+    onAlphaChanged: {
+        if (root.__wasFull !== root.isArcFull())
+            root.constructArcItem()
+
+        root.__wasFull = root.isArcFull()
+    }
+    onOutlineArcChanged: root.constructArcItem()
+    onRoundChanged: root.constructArcItem()
+    onRoundBeginChanged: root.constructArcItem()
+    onRoundEndChanged: root.constructArcItem()
+
+    property bool __wasFull: false
+
+    property real maxArcWidth: Math.min(path.__xRadius, path.__yRadius)
+
+    ShapePath {
+        id: path
+
+        property real __xRadius: root.width / 2 - root.strokeWidth / 2
+        property real __yRadius: root.height / 2 - root.strokeWidth / 2
+
+        property real __arcWidth: Math.min(Math.min(path.__xRadius, path.__yRadius), root.arcWidth)
+
+        property real __xCenter: root.width / 2
+        property real __yCenter: root.height / 2
+
+        strokeColor: "red"
+        strokeWidth: 4
+        capStyle: ShapePath.FlatCap
+
+        startX: root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.sortedBegin() - 90)
+        startY: root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.sortedBegin() - 90)
+    }
+
+    function constructArcItem() {
+        root.clearPathElements()
+
+        // Outer arc
+        let outerArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+        outerArc.x = Qt.binding(function() {
+            return root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.sortedEnd() - 90)
+        })
+        outerArc.y = Qt.binding(function() {
+            return root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.sortedEnd() - 90)
+        })
+        outerArc.radiusX = Qt.binding(function() { return path.__xRadius })
+        outerArc.radiusY = Qt.binding(function() { return path.__yRadius })
+        outerArc.useLargeArc = Qt.binding(function() { return root.alpha > 180 })
+        path.pathElements.push(outerArc)
+
+        // Straight end
+        if (!root.roundEnd && root.outlineArc && !root.isArcFull()) {
+            let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
+            pathLine.relativeX = Qt.binding(function() {
+                return -path.__arcWidth * root.myCos(root.sortedEnd() - 90)
+            })
+            pathLine.relativeY = Qt.binding(function() {
+                return -path.__arcWidth * root.mySin(root.sortedEnd() - 90)
+            })
+            path.pathElements.push(pathLine)
+        }
+
+        // Round end
+        if (root.roundEnd && root.outlineArc && !root.isArcFull()) {
+            let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            pathArc.relativeX = Qt.binding(function() {
+                return -path.__arcWidth * root.myCos(root.sortedEnd() - 90)
+            })
+            pathArc.relativeY = Qt.binding(function() {
+                return -path.__arcWidth * root.mySin(root.sortedEnd() - 90)
+            })
+            pathArc.radiusX = Qt.binding(function() { return path.__arcWidth / 2 })
+            pathArc.radiusY = Qt.binding(function() { return path.__arcWidth / 2 })
+            path.pathElements.push(pathArc)
+        }
+
+        // Open end
+        if (root.outlineArc && root.isArcFull()) {
+            let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
+            pathMove.relativeX = Qt.binding(function() {
+                return -path.__arcWidth * root.myCos(root.sortedEnd() - 90)
+            })
+            pathMove.relativeY = Qt.binding(function() {
+                return -path.__arcWidth * root.mySin(root.sortedEnd() - 90)
+            })
+            path.pathElements.push(pathMove)
+        }
+
+        // Inner arc
+        if (root.outlineArc) {
+            let innerArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            innerArc.x = Qt.binding(function() {
+                return path.startX - path.__arcWidth * root.myCos(root.sortedBegin() - 90)
+            })
+            innerArc.y = Qt.binding(function() {
+                return path.startY - path.__arcWidth * root.mySin(root.sortedBegin() - 90)
+            })
+            innerArc.radiusX = Qt.binding(function() { return path.__xRadius - path.__arcWidth })
+            innerArc.radiusY = Qt.binding(function() { return path.__yRadius - path.__arcWidth })
+            innerArc.useLargeArc = Qt.binding(function() { return root.alpha > 180 })
+            innerArc.direction = PathArc.Counterclockwise
+            path.pathElements.push(innerArc)
+        }
+
+        // Straight begin
+        if (!root.roundBegin && root.outlineArc && !root.isArcFull()) {
+            let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
+            pathLine.x = Qt.binding(function() { return path.startX })
+            pathLine.y = Qt.binding(function() { return path.startY })
+            path.pathElements.push(pathLine)
+        }
+
+        // Round begin
+        if (root.roundBegin && root.outlineArc && !root.isArcFull()) {
+            let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            pathArc.x = Qt.binding(function() { return path.startX })
+            pathArc.y = Qt.binding(function() { return path.startY })
+            pathArc.radiusX = Qt.binding(function() { return path.__arcWidth / 2 })
+            pathArc.radiusY = Qt.binding(function() { return path.__arcWidth / 2 })
+            path.pathElements.push(pathArc)
+        }
+
+        // Open begin
+        if (root.outlineArc && root.isArcFull()) {
+            let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
+            pathMove.x = Qt.binding(function() { return path.startX })
+            pathMove.y = Qt.binding(function() { return path.startY })
+            path.pathElements.push(pathMove)
+        }
+    }
+
+    function clearPathElements() {
+        for (var i = 0; i !== path.pathElements.length; ++i)
+            path.pathElements[i].destroy()
+
+        path.pathElements = []
+    }
+
+    Component.onCompleted: {
+        root.__wasFull = root.isArcFull()
+        root.constructArcItem()
+    }
+}
+//! [ArcItem compatibility]

Dependencies/Components/imports/compat/Components/CMakeLists.txt

@@ -0,0 +1,14 @@
+qt_add_library(QuickUltraLiteStudioComponents STATIC)
+qt6_add_qml_module(QuickUltraLiteStudioComponents
+    URI "QtQuickUltralite.Studio.Components"
+    VERSION "${PROJECT_VERSION}"
+    RESOURCE_PREFIX "/qt-project.org/imports"
+    DESIGNER_SUPPORTED
+    PAST_MAJOR_VERSIONS 1
+    QML_FILES
+        ArcItem.qml
+)
+
+target_link_libraries(QuickUltraLiteStudioComponents PRIVATE Qt6::Gui)
+
+register_plugin(QuickUltraLiteStudioComponents)

Dependencies/Components/imports/compat/Components/plugins.qmltypes

@@ -0,0 +1,13 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by:
+// 'qmlplugindump -nonrelocatable -dependencies dependencies.json QtQuick.Controls 2.15'
+
+Module {
+    dependencies: [
+        "QtQuick 2.12"
+    ]
+}

Dependencies/Components/imports/compat/Components/qmldir

@@ -0,0 +1,10 @@
+module QtQuickUltralite.Studio.Components
+designersupported
+linktarget studioqtquickultralitecomponentsplugin
+optional plugin studioqtquickultralitecomponentsplugin
+classname QtQuickUltralite_Studio_ComponentsPlugin
+typeinfo studioqtquickultralitecomponents.qmltypes
+prefer :/QtQuickUltralite/Studio/Components/
+ArcItem 1.0 ArcItem.qml
+ArcItem 2.0 ArcItem.qml
+ArcItem 6.0 ArcItem.qml

Dependencies/Components/imports/compat/Components/studiocompatibilityqulcomponents.cpp

@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2023 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QQmlEngine>
+#include <QQmlContext>
+#include <QtQml/qqmlextensionplugin.h>
+
+QT_BEGIN_NAMESPACE
+
+class StudioCompatibilityQULComponents: public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    StudioCompatibilityQULComponents(QObject *parent = nullptr);
+    void registerTypes(const char *uri) override;
+};
+
+StudioCompatibilityQULComponents::StudioCompatibilityQULComponents(QObject *parent)
+    : QQmlExtensionPlugin(parent)
+{
+}
+
+void StudioCompatibilityQULComponents::registerTypes(const char *)
+{
+}
+
+QT_END_NAMESPACE
+
+#include "studiocompatibilityqulcomponents.moc"

Dependencies/Components/imports/compat/Extras/AnimatedSpriteDirectory.qml

@@ -0,0 +1,50 @@
+/****************************************************************************
+**
+** Copyright (C) 2023 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+//! [AnimatedSpriteDirectory compatibility]
+//  Draws a sprite animation stored in a directory.
+Item {
+    property int currentFrame: 0
+    property int frameDuration: 0
+    property int loops: -1 //-1 = AnimatedSpriteDirectory.Infinite
+    property bool running: true
+    property bool paused: false
+    property string sourcePath
+
+    signal finished
+
+    function advance() {}
+    function pause() {}
+    function restart() {}
+    function resume() {}
+    function start() {}
+    function stop() {}
+}
+//! [AnimatedSpriteDirectory compatibility]

Dependencies/Components/imports/compat/Extras/CMakeLists.txt

@@ -0,0 +1,23 @@
+set_source_files_properties(QulPerf.qml
+    PROPERTIES
+        QT_QML_SINGLETON_TYPE true
+)
+
+qt_add_library(QuickUltraLiteStudioExtras STATIC)
+qt6_add_qml_module(QuickUltraLiteStudioExtras
+    URI "QtQuickUltralite.Extras"
+    VERSION "${PROJECT_VERSION}"
+    RESOURCE_PREFIX "/qt-project.org/imports"
+    DESIGNER_SUPPORTED
+    PAST_MAJOR_VERSIONS 1 2
+    QML_FILES
+        AnimatedSpriteDirectory.qml
+        ColorizedImage.qml
+        ItemBuffer.qml
+        StaticText.qml
+        QulPerf.qml
+)
+
+target_link_libraries(QuickUltraLiteStudioExtras PRIVATE Qt6::Gui)
+
+register_plugin(QuickUltraLiteStudioExtras)

Dependencies/Components/imports/compat/Extras/ColorizedImage.qml

@@ -0,0 +1,58 @@
+/****************************************************************************
+**
+** Copyright (C) 2023 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.12
+import Qt5Compat.GraphicalEffects
+//! [ColorizedImage compatibility]
+//  Displays a colorized image.
+Item {
+    id: colorizedRoot
+    implicitHeight: img.implicitHeight
+    implicitWidth: img.implicitWidth
+
+    property alias color: colorize.color
+    property alias source: img.source
+    property alias fillMode: img.fillMode
+    property alias horizontalAlignment: img.horizontalAlignment
+    property alias verticalAlignment: img.verticalAlignment
+
+    Image {
+        id: img
+        anchors.fill: parent
+        visible: false
+    }
+
+    ColorOverlay {
+        id: colorize
+        anchors.fill: img
+        color: "transparent"
+        source: img
+    }
+}
+//! [ColorizedImage compatibility]

Dependencies/Components/imports/compat/Extras/ItemBuffer.qml

@@ -0,0 +1,37 @@
+/****************************************************************************
+**
+** Copyright (C) 2023 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.12
+//! [ItemBuffer compatibility]
+Item {
+    enum ExtraFlag { RedrawItemBufferFlag = 1 }
+//    property Transform transform; //in regular QML this property is already provided by QtQuick.Item
+    property bool useAlphaChannel;
+}
+//! [ItemBuffer compatibility]

Dependencies/Components/imports/compat/Extras/QulPerf.qml

@@ -0,0 +1,50 @@
+/****************************************************************************
+**
+** Copyright (C) 2023 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+pragma Singleton
+
+import QtQuick 2.12
+//! [QulPerf compatibility]
+//  Holds information about application performance.
+//  This data is only available if Qt Quick Ultralite is compiled with QUL_ENABLE_PERFORMANCE_LOGGING.
+//  Properties will be updated every two seconds.
+//  All properties are read-only.
+QtObject {
+    readonly property bool enabled: false
+    readonly property real fps: 0
+    readonly property real imageBlend: 0
+    readonly property real imageTransform: 0
+    readonly property int maxDirtyNodes: 0
+    readonly property real rectBlend: 0
+    readonly property real rectFill: 0
+    readonly property real rectRounded: 0
+    readonly property real repaint: 0
+    readonly property real textBlend: 0
+    readonly property real textLayout: 0
+}
+//! [QulPerf compatibility]

Dependencies/Components/imports/compat/Extras/StaticText.qml

@@ -0,0 +1,35 @@
+/****************************************************************************
+**
+** Copyright (C) 2023 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+//! [StaticText compatibility]
+//  Enables optimized drawing of text.
+Text {
+}
+//! [StaticText compatibility]

Dependencies/Components/imports/compat/Extras/plugins.qmltypes

@@ -0,0 +1,13 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by:
+// 'qmlplugindump -nonrelocatable -dependencies dependencies.json QtQuick.Controls 2.15'
+
+Module {
+    dependencies: [
+        "QtQuick 2.12"
+    ]
+}

Dependencies/Components/imports/compat/Extras/qmldir

@@ -0,0 +1,22 @@
+module QtQuickUltralite.Extras
+designersupported
+linktarget studioqtquickultraliteextrasplugin
+optional plugin studioqtquickultraliteextrasplugin
+classname QtQuickUltralite_ExtrasPlugin
+typeinfo studioqtquickultraliteextras.qmltypes
+prefer :/QtQuickUltralite/Extras/
+AnimatedSpriteDirectory 1.0 AnimatedSpriteDirectory.qml
+AnimatedSpriteDirectory 2.0 AnimatedSpriteDirectory.qml
+AnimatedSpriteDirectory 6.0 AnimatedSpriteDirectory.qml
+ColorizedImage 1.0 ColorizedImage.qml
+ColorizedImage 2.0 ColorizedImage.qml
+ColorizedImage 6.0 ColorizedImage.qml
+ItemBuffer 1.0 ItemBuffer.qml
+ItemBuffer 2.0 ItemBuffer.qml
+ItemBuffer 6.0 ItemBuffer.qml
+StaticText 1.0 StaticText.qml
+StaticText 2.0 StaticText.qml
+StaticText 6.0 StaticText.qml
+singleton QulPerf 1.0 QulPerf.qml
+singleton QulPerf 2.0 QulPerf.qml
+singleton QulPerf 6.0 QulPerf.qml

Dependencies/Components/imports/compat/Extras/studiocompatibilityqulextras.cpp

@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QQmlEngine>
+#include <QQmlContext>
+#include <QtQml/qqmlextensionplugin.h>
+
+QT_BEGIN_NAMESPACE
+
+class StudioCompatibilityQULExtras: public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    StudioCompatibilityQULExtras(QObject *parent = nullptr);
+    void registerTypes(const char *uri) override;
+};
+
+StudioCompatibilityQULExtras::StudioCompatibilityQULExtras(QObject *parent)
+    : QQmlExtensionPlugin(parent)
+{
+}
+
+void StudioCompatibilityQULExtras::registerTypes(const char *)
+{
+}
+
+QT_END_NAMESPACE
+
+#include "studiocompatibilityqulextras.moc"

Dependencies/Components/imports/compat/Layers/+DesignMode/Screen.qml

@@ -0,0 +1,43 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+
+//! [Screen compatibility]
+Rectangle {
+    id: wnd
+    property string outputDevice: "device"
+    property alias backgroundColor: wnd.color
+
+    property real defaultApplicationWidth: 0
+    property real defaultApplicationHeight: 0
+
+    visible: true
+}
+//! [Screen compatibility]

Dependencies/Components/imports/compat/Layers/ApplicationScreens.qml

@@ -0,0 +1,35 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+
+//! [ApplicationScreens compatibility]
+Item {
+}
+//! [ApplicationScreens compatibility]

Dependencies/Components/imports/compat/Layers/CMakeLists.txt

@@ -0,0 +1,19 @@
+qt_add_library(QuickUltraLiteStudioLayers STATIC)
+qt6_add_qml_module(QuickUltraLiteStudioLayers
+    URI "QtQuickUltralite.Layers"
+    VERSION "${PROJECT_VERSION}"
+    RESOURCE_PREFIX "/qt-project.org/imports"
+    DESIGNER_SUPPORTED
+    PAST_MAJOR_VERSIONS 1 2
+    QML_FILES
+        ApplicationScreens.qml
+        ImageLayer.qml
+        ItemLayer.qml
+        Screen.qml
+        SpriteLayer.qml
+        +DesignMode/Screen.qml
+)
+
+target_link_libraries(QuickUltraLiteStudioLayers PRIVATE Qt6::Gui)
+
+register_plugin(QuickUltraLiteStudioLayers)

Dependencies/Components/imports/compat/Layers/ImageLayer.qml

@@ -0,0 +1,49 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+
+//! [ImageLayer compatibility]
+Item {
+    enum RenderingHints {
+         OptimizeForSpeed,
+         OptimizeForSize,
+         StaticContents
+    }
+
+    property int platformId: 0
+    property int renderingHints: ImageLayer.RenderingHints.OptimizeForSpeed
+    property alias source: internalImage.source
+
+    Image {
+        id: internalImage
+        anchors.fill: parent
+    }
+}
+//! [ImageLayer compatibility]

Dependencies/Components/imports/compat/Layers/ItemLayer.qml

@@ -0,0 +1,49 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+
+//! [ItemLayer compatibility]
+Item {
+    enum ColorDepth {
+        Bpp16, Bpp16Alpha, Bpp24, Bpp32, Bpp32Alpha
+    }
+
+    enum RenderingHints {
+        OptimizeForSpeed,
+        OptimizeForSize,
+        StaticContents
+    }
+
+    property int depth: ColorDepth.Bpp32
+    property int refreshInterval: 1
+    property int platformId: 0
+    property int renderingHints: RenderingHints.OptimizeForSpeed
+}
+//! [ItemLayer compatibility]

Dependencies/Components/imports/compat/Layers/Screen.qml

@@ -0,0 +1,82 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Window 2.2
+
+//! [Screen compatibility]
+Item {
+    id: root
+
+    property string outputDevice: "device"
+    property alias backgroundColor: wnd.color
+
+    property real defaultApplicationWidth: 0
+    property real defaultApplicationHeight: 0
+
+    onChildrenChanged: {
+        if (wnd.isAvailable)
+            wnd.reparenting()
+    }
+
+    Window {
+        id: wnd
+        visible: true
+
+        width: root.width
+        height: root.height
+
+        property bool reparentingBlock: false
+        property bool isAvailable: false
+
+        Component.onCompleted: {
+            reparenting()
+            isAvailable = true
+        }
+
+        function reparenting() {
+            if (reparentingBlock)
+                return;
+
+            reparentingBlock = true;
+
+            var result = [];
+            var rootChildren = root.children;
+            for (var i = 0; i < rootChildren.length; i++) {
+                if (rootChildren[i] !== wnd) {
+                    result.push(rootChildren[i]);
+                }
+            }
+            wnd.data = result;
+
+            reparentingBlock = false;
+        }
+    }
+}
+//! [Screen compatibility]

Dependencies/Components/imports/compat/Layers/SpriteLayer.qml

@@ -0,0 +1,41 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+
+//! [SpriteLayer compatibility]
+Item {
+     enum ColorDepth {
+         Bpp8, Bpp16, Bpp16Alpha, Bpp24, Bpp32, Bpp32Alpha
+     }
+
+    property int depth: ColorDepth.Bpp32
+    property int platformId: 0
+}
+//! [SpriteLayer compatibility]

Dependencies/Components/imports/compat/Layers/plugins.qmltypes

@@ -0,0 +1,10 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+
+Module {
+    dependencies: [
+        "QtQuick 2.15"
+    ]
+}

Dependencies/Components/imports/compat/Layers/qmldir

@@ -0,0 +1,22 @@
+module QtQuickUltralite.Layers
+designersupported
+linktarget studioqtquickultralitelayersplugin
+optional plugin studioqtquickultralitelayersplugin
+classname QtQuickUltralite_LayersPlugin
+typeinfo studioqtquickultralitelayers.qmltypes
+prefer :/QtQuickUltralite/Layers/
+ApplicationScreens 1.0 ApplicationScreens.qml
+ApplicationScreens 2.0 ApplicationScreens.qml
+ApplicationScreens 6.0 ApplicationScreens.qml
+ImageLayer 1.0 ImageLayer.qml
+ImageLayer 2.0 ImageLayer.qml
+ImageLayer 6.0 ImageLayer.qml
+ItemLayer 1.0 ItemLayer.qml
+ItemLayer 2.0 ItemLayer.qml
+ItemLayer 6.0 ItemLayer.qml
+Screen 1.0 Screen.qml
+Screen 2.0 Screen.qml
+Screen 6.0 Screen.qml
+SpriteLayer 1.0 SpriteLayer.qml
+SpriteLayer 2.0 SpriteLayer.qml
+SpriteLayer 6.0 SpriteLayer.qml

Dependencies/Components/imports/compat/Layers/studiocompatibilityqullayers.cpp

@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtQml/qqmlextensionplugin.h>
+
+QT_BEGIN_NAMESPACE
+
+class StudioCompatibilityQULLayers: public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    StudioCompatibilityQULLayers(QObject *parent = nullptr);
+    void registerTypes(const char *uri) override;
+};
+
+StudioCompatibilityQULLayers::StudioCompatibilityQULLayers(QObject *parent)
+    : QQmlExtensionPlugin(parent)
+{
+}
+
+void StudioCompatibilityQULLayers::registerTypes(const char *)
+{
+}
+
+QT_END_NAMESPACE
+
+#include "studiocompatibilityqullayers.moc"

Dependencies/Components/imports/compat/Profiling/CMakeLists.txt

@@ -0,0 +1,14 @@
+qt_add_library(QuickUltraLiteStudioProfiling STATIC)
+qt6_add_qml_module(QuickUltraLiteStudioProfiling
+    URI "QtQuickUltralite.Profiling"
+    VERSION "${PROJECT_VERSION}"
+    RESOURCE_PREFIX "/qt-project.org/imports"
+    DESIGNER_SUPPORTED
+    PAST_MAJOR_VERSIONS 1 2
+    QML_FILES
+        QulPerfOverlay.qml
+)
+
+target_link_libraries(QuickUltraLiteStudioProfiling PRIVATE Qt6::Gui)
+
+register_plugin(QuickUltraLiteStudioProfiling)

Dependencies/Components/imports/compat/Profiling/QulPerfOverlay.qml

@@ -0,0 +1,69 @@
+/******************************************************************************
+**
+** Copyright (C) 2023 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Ultralite module.
+**
+** $QT_BEGIN_LICENSE:COMM$
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** $QT_END_LICENSE$
+**
+******************************************************************************/
+
+import QtQuick 2.15
+import QtQuickUltralite.Extras
+
+Column {
+    id: root
+
+    onVisibleChanged: {
+        if (root.visible) {
+            console.log("Benchmark Results:");
+            console.log("Total frames:    ", QulPerf.totalFrames);
+            console.log("Average fps:     ", QulPerf.averageFps.toFixed(2));
+            console.log("Minimum fps:     ", QulPerf.minimumFps.toFixed(1));
+            console.log("Max heap usage:  ", QulPerf.maxHeapUsage, "Bytes");
+            console.log("Max stack usage: ", QulPerf.maxStackUsage, "Bytes");
+            console.log("Average CPU load:", QulPerf.averageCpuLoad.toFixed(1), "%");
+        }
+    }
+
+    Text {
+        color: "#ffb6c1"
+        text: "Total frames: " + QulPerf.totalFrames
+    }
+
+    Text {
+        color: "#ffb6c1"
+        text: "Average fps: " + QulPerf.averageFps.toFixed(2)
+    }
+
+    Text {
+        color: "#ffb6c1"
+        text: "Minimum fps: " + QulPerf.minimumFps.toFixed(1)
+    }
+
+    Text {
+        color: "#ffb6c1"
+        text: "Max heap usage: " + QulPerf.maxHeapUsage + " Bytes"
+    }
+
+    Text {
+        color: "#ffb6c1"
+        text: "Max stack usage: " + QulPerf.maxStackUsage + " Bytes"
+    }
+
+    Text {
+        color: "#ffb6c1"
+        text: "Average CPU load: " + QulPerf.averageCpuLoad.toFixed(1) + "%"
+    }
+}

Dependencies/Components/imports/compat/Profiling/plugins.qmltypes

@@ -0,0 +1,13 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by:
+// 'qmlplugindump -nonrelocatable -dependencies dependencies.json QtQuick.Controls 2.15'
+
+Module {
+    dependencies: [
+        "QtQuick 2.15"
+    ]
+}

Dependencies/Components/imports/compat/Profiling/qmldir

@@ -0,0 +1,10 @@
+module QtQuickUltralite.Profiling
+designersupported
+linktarget studioqtquickultraliteprofilingplugin
+optional plugin studioqtquickultraliteprofilingplugin
+classname QtQuickUltralite_ProfilingPlugin
+typeinfo studioqtquickultraliteprofiling.qmltypes
+prefer :/QtQuickUltralite/Profiling/
+QulPerfOverlay 1.0 QulPerfOverlay.qml
+QulPerfOverlay 2.0 QulPerfOverlay.qml
+QulPerfOverlay 6.0 QulPerfOverlay.qml

Dependencies/Components/imports/compat/Profiling/studiocompatibilityqulprofiling.cpp

@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2023 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Ultralite compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QQmlEngine>
+#include <QQmlContext>
+#include <QtQml/qqmlextensionplugin.h>
+
+QT_BEGIN_NAMESPACE
+
+class StudioCompatibilityQULProfiling: public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    StudioCompatibilityQULProfiling(QObject *parent = nullptr);
+    void registerTypes(const char *uri) override;
+};
+
+StudioCompatibilityQULProfiling::StudioCompatibilityQULProfiling(QObject *parent)
+    : QQmlExtensionPlugin(parent)
+{
+}
+
+void StudioCompatibilityQULProfiling::registerTypes(const char *)
+{
+}
+
+QT_END_NAMESPACE
+
+#include "studiocompatibilityqulprofiling.moc"

Dependencies/Components/imports/compat/QtAndroidAutomotive/ActivityView/ActivityView.qml

@@ -0,0 +1,212 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Android Automotive compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Controls
+
+Item {
+    id: root
+
+    width: 480
+    height: 640
+
+    property alias radius: rect.radius
+    property string packageName: "some.package.name"
+    property string className
+    readonly property alias status: internal.status
+    property alias placeholder: placeholderItem.children
+    property bool usePlaceholder: false
+
+    onUsePlaceholderChanged: {
+        if (placeholder) {
+            placeholder.visible = usePlaceholder
+            avMock.visible = !usePlaceholder
+        } else {
+            avMock.visible = true
+        }
+    }
+
+    onPlaceholderChanged: {
+        if (!placeholder)
+            avMock.visible = true
+    }
+
+    enum Status {
+        NotInitialized,
+        Ready,
+        Starting,
+        Started
+    }
+
+    QtObject {
+        id: internal
+
+        property var status: ActivityView.NotInitialized
+        property real fontPointSize: 20
+
+        function enumToString(val) {
+            switch (val) {
+                case ActivityView.NotInitialized: return "NotInitialized"
+                case ActivityView.Ready: return "Ready"
+                case ActivityView.Starting: return "Starting"
+                case ActivityView.Started: return "Started"
+            }
+            return "Unknown"
+        }
+    }
+
+    component StatusButton: Rectangle {
+        id: button
+
+        color: highlighted ? "lightGray" : "gray"
+        radius: 5
+        clip: true
+        width: btnText.width
+        height: btnText.height
+
+        property int statusId: 0
+        property bool highlighted: false
+        signal clicked(int value)
+
+        Label {
+            id: btnText
+
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.pointSize: internal.fontPointSize
+
+            text: " " + internal.enumToString(statusId) + " "
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            onClicked: button.clicked(statusId)
+        }
+    }
+
+    Item {
+        id: placeholderItem
+        anchors.fill: parent
+    }
+
+    Item {
+        id: avMock
+
+        anchors.fill: parent
+
+        Rectangle {
+            id: rect
+
+            anchors.fill: parent
+            color: "#AAAAAA"
+            radius: 0
+            border.color: "#888888"
+            border.width: 2
+            clip: true
+
+            Image {
+                id: icon
+
+                anchors.centerIn: parent
+                anchors.verticalCenterOffset: - statusArea.height / 2
+
+                source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACAAQMAAAD58POIAAAABlBMV
+                        EUAAAA+Pj4LNneDAAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAASNJREFUSMft1
+                        TFuwzAMBVApAqIlgNZu6hF6A/UovYm99VjV1mu46AUyelDNilJgftkx0gbtZg4C/BCFNETRSnE88
+                        3JQEi+8HAEel/DEywngYV624DTv24KjMrHmvsRBEfUIxhGdI4B+I/rqESgHgmHALZbhDOAZRoDAM
+                        AF0DARQniGNrhDbrERDmxXBpZwmBSnEj7mQ0Y9LSFLXBkipXf3TaVE51E5b0Lev8hOI7cveBcP9s
+                        Aw4U1c2JNkSYjkDO0PHv3b0OkPpAC/wcYF3gXQNgsDnDjv8AdxuuqZP07VOdtDrZdrZCZqfr5BOA
+                        j7ikJIr9i9w+2avJsxqBq3nWKjPE871wTZzfYffQ2zBUTTNx3MFlnrdjGiTz6j5AOvcsF09yG/q3
+                        /z/4fD/YgAAAABJRU5ErkJggg=="
+                }
+
+            Label {
+                id: packageLabel
+
+                anchors.top: icon.bottom
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.margins: 5
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+                font.pointSize: internal.fontPointSize
+                text: root.packageName
+            }
+        }
+
+        Rectangle {
+            id: statusArea
+
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: statusFlow.top
+            anchors.bottom: statusFlow.bottom
+            anchors.topMargin: -5
+            anchors.bottomMargin: -5
+            color: "black"
+            opacity: 0.5
+            radius: rect.radius
+        }
+
+        Label {
+            id: statusLabel
+
+            anchors.top: statusFlow.top
+            anchors.left: parent.left
+
+            text: " " + "status:" + " "
+            color: "lightGray"
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            font.pointSize: internal.fontPointSize
+        }
+
+        Flow {
+            id: statusFlow
+
+            anchors.bottom: parent.bottom
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.margins: 5
+            anchors.leftMargin: statusLabel.width
+            spacing: 5
+
+            Repeater {
+                model: [ActivityView.NotInitialized, ActivityView.Ready, ActivityView.Starting,
+                        ActivityView.Started]
+
+                delegate: StatusButton {
+                    statusId: modelData
+                    onClicked: (value) => internal.status = value
+                    highlighted: modelData === internal.status
+                }
+            }
+        }
+    }
+}

Dependencies/Components/imports/compat/QtAndroidAutomotive/ActivityView/CMakeLists.txt

@@ -0,0 +1,14 @@
+qt_add_library(AndroidAutomotiveActivityView STATIC)
+qt6_add_qml_module(AndroidAutomotiveActivityView
+    URI "QtAndroidAutomotive.ActivityView"
+    VERSION "${PROJECT_VERSION}"
+    RESOURCE_PREFIX "/qt-project.org/imports"
+    DESIGNER_SUPPORTED
+    PAST_MAJOR_VERSIONS 1
+    QML_FILES
+        ActivityView.qml
+)
+
+target_link_libraries(AndroidAutomotiveActivityView PRIVATE Qt6::Gui)
+
+register_plugin(AndroidAutomotiveActivityView)

Dependencies/Components/imports/compat/QtAndroidAutomotive/ActivityView/plugins.qmltypes

@@ -0,0 +1,13 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by:
+// 'qmlplugindump -nonrelocatable -dependencies dependencies.json QtQuick.Controls 2.15'
+
+Module {
+    dependencies: [
+        "QtQuick 2.12"
+    ]
+}

Dependencies/Components/imports/compat/QtAndroidAutomotive/ActivityView/qmldir

@@ -0,0 +1,9 @@
+module QtAndroidAutomotive.ActivityView
+linktarget Qt6::AndroidAutomotiveActivityViewplugin
+optional plugin androidautomotiveactivityviewplugin
+classname QtAndroidAutomotive_ActivityViewPlugin
+designersupported
+typeinfo AndroidAutomotiveActivityView.qmltypes
+prefer :/qt-project.org/imports/QtAndroidAutomotive/ActivityView/
+ActivityView 6.0 ActivityView.qml
+ActivityView 1.0 ActivityView.qml

Dependencies/Components/imports/compat/QtAndroidAutomotive/ActivityView/studiocompatibilityqaaactivityview.cpp

@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2022 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Android Automotive compatibility.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtQml/qqmlextensionplugin.h>
+
+QT_BEGIN_NAMESPACE
+
+class StudioCompatibilityQtAaActivityView: public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    StudioCompatibilityQtAaActivityView(QObject *parent = nullptr);
+    void registerTypes(const char *uri) override;
+};
+
+StudioCompatibilityQtAaActivityView::StudioCompatibilityQtAaActivityView(QObject *parent)
+    : QQmlExtensionPlugin(parent)
+{
+}
+
+void StudioCompatibilityQtAaActivityView::registerTypes(const char *)
+{
+}
+
+QT_END_NAMESPACE
+
+#include "studiocompatibilityqaaactivityview.moc"

Dependencies/Components/imports/compat/QtAndroidAutomotive/CMakeLists.txt

@@ -0,0 +1 @@
+add_subdirectory(ActivityView)

Dependencies/Components/imports/components/ArcArrow.qml

@@ -0,0 +1,83 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+
+GroupItem {
+    id: root
+
+    property int thickness: 45
+
+    property int arrowSize: 80
+
+    property int radius: 5
+    property color color: "#b6b3b3"
+
+    property alias begin: arc.begin
+    property alias end: arc.end
+
+    property bool flip: false
+
+    transform: Scale {
+        xScale: root.flip ? -1 : 1
+        origin.x: root.width / 2
+        origin.y: root.height / 2
+    }
+
+    ArcItem {
+        id: arc
+        x: 0
+        y: 16
+        width: 300
+        height: 300
+        capStyle: root.radius > 2 ? 32 : 0
+        end: 180
+        strokeWidth: root.thickness
+        strokeColor: root.color
+        fillColor: "#00000000"
+
+        Item {
+            anchors.fill: parent
+            rotation: arc.end
+            TriangleItem {
+                id: triangle3
+                x: root.width / 2
+
+                y: -root.thickness / 2
+                width: root.arrowSize
+                height: root.arrowSize
+                strokeWidth: -1
+                rotation: 90
+                radius: root.radius
+
+                fillColor: root.color
+            }
+        }
+    }
+}

Dependencies/Components/imports/components/ArcItem.qml

@@ -0,0 +1,446 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Shapes
+
+/*!
+    \qmltype ArcItem
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Shape
+
+
+    \brief An arc that ends at the specified position and uses the specified radius.
+
+    An arc is specified by setting values in degrees for the \l begin and \l end properties. The arc
+    can be just a line or a filled outline. The \l strokeColor, \l strokeWidth, and \l strokeStyle
+    properties specify the appearance of the line or outline. The \l dashPattern and \l dashOffset
+    properties specify the appearance of dashed lines.
+
+    The area between the arc's start and end points or the area inside the outline are painted using
+    either a solid fill color, specified using the \l fillColor property, or a gradient, defined
+    using one of the \l ShapeGradient subtypes and set using the \l gradient property. If both a
+    color and a gradient are specified, the gradient is used.
+
+    To create an arc with an outline, set the \l outlineArc property to \c true. The \l arcWidth
+    property specifies the width of the arc outline, including the stroke. The width of the outline
+    between the start and end points is calculated automatically.
+
+    The \l round, \l roundBegin, and \l roundEnd properties specify whether the end points of the
+    arc outline have rounded caps. For an arc that does not have an outline, the \l capStyle
+    property specifies whether the line ends are square or rounded.
+
+    Because an arc has curves, it may be appropriate to set the \c antialiasing property that is
+    inherited from \l Item to improve its appearance.
+
+    \section2 Example Usage
+
+    You can use the Arc component in \QDS to create different kinds of arcs.
+
+    \image studio-arc.webp
+
+    The QML code looks as follows:
+
+    \code
+
+    ArcItem {
+        id: arc
+        x: 667
+        y: 490
+        fillColor: "#00ffffff"
+        capStyle: 32
+        end: 180
+        strokeWidth: 6
+        strokeColor: "#000000"
+    }
+
+    ArcItem {
+        id: arcOutline
+        x: 910
+        y: 490
+        strokeColor: "gray"
+        arcWidth: 13
+        end: 180
+        fillColor: "light gray"
+        antialiasing: true
+        round: true
+        outlineArc: true
+    }
+
+    ArcItem {
+        id: circle
+        x: 811
+        y: 490
+        fillColor: "#02ffffff"
+        end: 360
+        strokeWidth: 5
+        strokeColor: "#000000"
+    }
+
+    ArcItem {
+        id: circleOutline
+        x: 1046
+        y: 490
+        antialiasing: false
+        outlineArc: true
+        round: true
+        strokeColor: "gray"
+        fillColor: "light gray"
+        strokeWidth: 1
+        end: 360
+    }
+    \endcode
+*/
+
+Shape {
+    id: root
+
+    width: 100
+    height: 100
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-gradient} {arc}
+*/
+    property alias gradient: path.fillGradient
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {arc}
+
+    The total width of an arc that has an outline (that is, the outline and the fill) is specified
+    by \l arcWidth.
+*/
+    property alias strokeWidth: path.strokeWidth
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {arc}
+*/
+    property alias strokeColor: path.strokeColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {arc}
+*/
+    property alias dashPattern: path.dashPattern
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-joinStyle
+*/
+    //property alias joinStyle: path.joinStyle
+    property int joinStyle: ShapePath.BevelJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
+    //property alias capStyle: path.capStyle
+    property int capStyle: ShapePath.FlatCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {arc}
+*/
+    //property alias strokeStyle: path.strokeStyle
+    property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {arc}
+
+    If the arc is just a line, the area between its \l begin and \l end points is filled. If the arc
+    has an outline, the area within the outline is filled.
+*/
+    property alias fillColor: path.fillColor
+
+/*!
+    The starting point of the dash pattern for the arc or arc outline.
+
+    The offset is measured in terms of the units used to specify the dash pattern. For example, a
+    pattern where each stroke is four units long, followed by a gap of two units, will begin with
+    the stroke when drawn as a line. However, if the dash offset is set to 4.0, any line drawn will
+    begin with the gap. Values of the offset up to 4.0 will cause part of the stroke to be drawn
+    first, and values of the offset between 4.0 and 6.0 will cause the line to begin with part of
+    the gap.
+
+    The default value is 0.
+
+    \sa QPen::setDashOffset()
+*/
+    property alias dashOffset: path.dashOffset
+
+/*!
+    The position in degrees where the arc begins.
+
+    The default value is 0.
+
+    To create a circle, set the value of \c begin to 0 and the value of the \c end to 360.
+*/
+    property real begin: 0
+
+/*!
+    The position in degrees where the arc ends.
+
+    The default value is 90.
+
+    To create a circle, set the value of \c end to 360 and the value of the \c begin to 0.
+*/
+    property real end: 90
+
+/*!
+    The total width of an arc that has an outline, including the outline and fill.
+
+    The default value is 10.
+
+    \sa strokeWidth
+*/
+    property real arcWidth: 10
+
+/*!
+    The area between the \l begin and \l end points of the arc.
+*/
+    property real alpha: root.clamp(root.sortedEnd() - root.sortedBegin(), 0, 359.9)
+
+    property bool __preferredRendererTypeAvailable: root.preferredRendererType !== undefined
+    property bool __curveRendererActive: root.__preferredRendererTypeAvailable
+                                         && root.rendererType === Shape.CurveRenderer
+
+    layer.enabled: root.antialiasing && !root.__curveRendererActive
+    layer.smooth: root.antialiasing && !root.__curveRendererActive
+    layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
+
+/*!
+    Whether the arc has an outline.
+
+    \sa arcWidth, round, roundBegin, roundEnd
+*/
+    property bool outlineArc: false
+
+/*!
+    Whether the arc outline end points have round caps.
+
+    The \l roundBegin and \l roundEnd properties can be used to specify the caps separately for the
+    end points.
+*/
+    property bool round: false
+
+/*!
+    Whether the arc outline ends with a round cap.
+
+    \sa Qt::PenCapStyle, round, roundBegin
+*/
+    property bool roundEnd: root.round
+
+/*!
+    Whether the arc outline begins with a round cap.
+
+    \sa Qt::PenCapStyle, round, roundEnd
+*/
+    property bool roundBegin: root.round
+
+    function clamp(num, min, max) {
+        return Math.max(min, Math.min(num, max))
+    }
+
+    function toRadians(degrees) {
+        return degrees * (Math.PI / 180.0)
+    }
+
+    function myCos(angleInDegrees) {
+        return Math.cos(root.toRadians(angleInDegrees))
+    }
+
+    function mySin(angleInDegrees) {
+        return Math.sin(root.toRadians(angleInDegrees))
+    }
+
+    function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
+        return centerX + radius * Math.cos(root.toRadians(angleInDegrees))
+    }
+
+    function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
+        return centerY + radius * Math.sin(root.toRadians(angleInDegrees))
+    }
+
+    function sortedBegin() {
+        return Math.min(root.begin, root.end)
+    }
+
+    function sortedEnd() {
+        return Math.min(Math.max(root.begin, root.end), root.sortedBegin() + 359.9)
+    }
+
+    function isArcFull() {
+        return root.alpha > 359.5
+    }
+
+    onAlphaChanged: {
+        if (root.__wasFull !== root.isArcFull())
+            root.constructArcItem()
+
+        root.__wasFull = root.isArcFull()
+    }
+    onOutlineArcChanged: root.constructArcItem()
+    onRoundChanged: root.constructArcItem()
+    onRoundBeginChanged: root.constructArcItem()
+    onRoundEndChanged: root.constructArcItem()
+
+    property bool __wasFull: false
+
+    property real maxArcWidth: Math.min(path.__xRadius, path.__yRadius)
+
+    ShapePath {
+        id: path
+
+        property real __xRadius: root.width / 2 - root.strokeWidth / 2
+        property real __yRadius: root.height / 2 - root.strokeWidth / 2
+
+        property real __arcWidth: Math.min(Math.min(path.__xRadius, path.__yRadius), root.arcWidth)
+
+        property real __xCenter: root.width / 2
+        property real __yCenter: root.height / 2
+
+        strokeColor: "red"
+        strokeWidth: 4
+        capStyle: root.capStyle
+        strokeStyle: root.strokeStyle
+        joinStyle: root.joinStyle
+
+        startX: root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.sortedBegin() - 90)
+        startY: root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.sortedBegin() - 90)
+    }
+
+    function constructArcItem() {
+        root.clearPathElements()
+
+        // Outer arc
+        let outerArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+        outerArc.x = Qt.binding(function() {
+            return root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.sortedEnd() - 90)
+        })
+        outerArc.y = Qt.binding(function() {
+            return root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.sortedEnd() - 90)
+        })
+        outerArc.radiusX = Qt.binding(function() { return path.__xRadius })
+        outerArc.radiusY = Qt.binding(function() { return path.__yRadius })
+        outerArc.useLargeArc = Qt.binding(function() { return root.alpha > 180 })
+        path.pathElements.push(outerArc)
+
+        // Straight end
+        if (!root.roundEnd && root.outlineArc && !root.isArcFull()) {
+            let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
+            pathLine.relativeX = Qt.binding(function() {
+                return -path.__arcWidth * root.myCos(root.sortedEnd() - 90)
+            })
+            pathLine.relativeY = Qt.binding(function() {
+                return -path.__arcWidth * root.mySin(root.sortedEnd() - 90)
+            })
+            path.pathElements.push(pathLine)
+        }
+
+        // Round end
+        if (root.roundEnd && root.outlineArc && !root.isArcFull()) {
+            let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            pathArc.relativeX = Qt.binding(function() {
+                return -path.__arcWidth * root.myCos(root.sortedEnd() - 90)
+            })
+            pathArc.relativeY = Qt.binding(function() {
+                return -path.__arcWidth * root.mySin(root.sortedEnd() - 90)
+            })
+            pathArc.radiusX = Qt.binding(function() { return path.__arcWidth / 2 })
+            pathArc.radiusY = Qt.binding(function() { return path.__arcWidth / 2 })
+            path.pathElements.push(pathArc)
+        }
+
+        // Open end
+        if (root.outlineArc && root.isArcFull()) {
+            let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
+            pathMove.relativeX = Qt.binding(function() {
+                return -path.__arcWidth * root.myCos(root.sortedEnd() - 90)
+            })
+            pathMove.relativeY = Qt.binding(function() {
+                return -path.__arcWidth * root.mySin(root.sortedEnd() - 90)
+            })
+            path.pathElements.push(pathMove)
+        }
+
+        // Inner arc
+        if (root.outlineArc) {
+            let innerArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            innerArc.x = Qt.binding(function() {
+                return path.startX - path.__arcWidth * root.myCos(root.sortedBegin() - 90)
+            })
+            innerArc.y = Qt.binding(function() {
+                return path.startY - path.__arcWidth * root.mySin(root.sortedBegin() - 90)
+            })
+            innerArc.radiusX = Qt.binding(function() { return path.__xRadius - path.__arcWidth })
+            innerArc.radiusY = Qt.binding(function() { return path.__yRadius - path.__arcWidth })
+            innerArc.useLargeArc = Qt.binding(function() { return root.alpha > 180 })
+            innerArc.direction = PathArc.Counterclockwise
+            path.pathElements.push(innerArc)
+        }
+
+        // Straight begin
+        if (!root.roundBegin && root.outlineArc && !root.isArcFull()) {
+            let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
+            pathLine.x = Qt.binding(function() { return path.startX })
+            pathLine.y = Qt.binding(function() { return path.startY })
+            path.pathElements.push(pathLine)
+        }
+
+        // Round begin
+        if (root.roundBegin && root.outlineArc && !root.isArcFull()) {
+            let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            pathArc.x = Qt.binding(function() { return path.startX })
+            pathArc.y = Qt.binding(function() { return path.startY })
+            pathArc.radiusX = Qt.binding(function() { return path.__arcWidth / 2 })
+            pathArc.radiusY = Qt.binding(function() { return path.__arcWidth / 2 })
+            path.pathElements.push(pathArc)
+        }
+
+        // Open begin
+        if (root.outlineArc && root.isArcFull()) {
+            let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
+            pathMove.x = Qt.binding(function() { return path.startX })
+            pathMove.y = Qt.binding(function() { return path.startY })
+            path.pathElements.push(pathMove)
+        }
+    }
+
+    function clearPathElements() {
+        for (var i = 0; i !== path.pathElements.length; ++i)
+            path.pathElements[i].destroy()
+
+        path.pathElements = []
+    }
+
+    Component.onCompleted: {
+        // If preferredRendererType wasn't set initially make CurveRenderer the default
+        if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
+            root.preferredRendererType = Shape.CurveRenderer
+
+        root.__wasFull = root.isArcFull()
+        root.constructArcItem()
+    }
+}

Dependencies/Components/imports/components/BorderItem.qml

@@ -0,0 +1,544 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Shapes
+
+/*!
+    \qmltype BorderItem
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Shape
+
+    \brief A border drawn in four segments: left, top, right, and bottom.
+
+    The Border type is used to create borders out of four segments: left, top, right, and bottom.
+    The \l drawLeft, \l drawTop, \l drawRight, and \l drawBottom properties can be used to determine
+    whether each of the segments is visible.
+
+    The \l borderMode property determines whether the border is drawn along the inside or outside
+    edge of the item, or on top of the edge.
+
+    The \l radius property specifies whether the border corners are rounded. The radius can also be
+    specified separately for each corner. Because this introduces curved edges to the corners, it
+    may be appropriate to set the \c antialiasing property that is inherited from \l Item to improve
+    the appearance of the border.
+
+    The \l joinStyle property specifies how to connect two border line segments.
+
+    The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
+    border line. The \l dashPattern and \l dashOffset properties specify the appearance of dashed
+    lines.
+
+    The \l capStyle property specifies whether line ends are square or rounded.
+
+    \section2 Example Usage
+
+    You can use the Border component in \QDS to create different kinds of borders.
+
+    \image studio-border.webp
+
+    The QML code looks as follows:
+
+    \code
+    BorderItem {
+        id: openLeft
+        width: 99
+        height: 99
+        antialiasing: true
+        drawLeft: false
+        strokeColor: "gray"
+    }
+
+    BorderItem {
+        id: openTop
+        width: 99
+        height: 99
+        antialiasing: true
+        strokeColor: "#808080"
+        drawTop: false
+    }
+
+    BorderItem {
+        id: asymmetricalCorners
+        width: 99
+        height: 99
+        antialiasing: true
+        bottomLeftRadius: 0
+        topRightRadius: 0
+        strokeColor: "#808080"
+    }
+
+    BorderItem {
+        id: dashedBorder
+        width: 99
+        height: 99
+        antialiasing: true
+        strokeStyle: 4
+        strokeColor: "#808080"
+    }
+    \endcode
+*/
+
+Shape {
+    id: root
+    width: 200
+    height: 150
+/*!
+    \include CommonItemDescriptions.qdocinc {component-radius} {10}
+
+    If radius is non-zero, the corners will be rounded, otherwise they will be sharp. The radius can
+    also be specified separately for each corner by using the \l bottomLeftRadius,
+    \l bottomRightRadius, \l topLeftRadius, and \l topRightRadius properties.
+*/
+    property int radius: 10
+
+/*!
+    The radius of the top left border corner.
+
+    \sa radius
+*/
+    property int topLeftRadius: root.radius
+
+/*!
+    The radius of the bottom left border corner.
+
+    \sa radius
+*/
+    property int bottomLeftRadius: root.radius
+
+/*!
+    The radius of the top right border corner.
+
+    \sa radius
+*/
+    property int topRightRadius: root.radius
+
+/*!
+    The radius of the bottom right border corner.
+
+    \sa radius
+*/
+    property int bottomRightRadius: root.radius
+
+/*!
+    Whether the border corner is beveled.
+*/
+    property bool bevel: false
+
+/*!
+    The bevel of the top left border corner.
+
+    \sa bevel
+*/
+    property bool topLeftBevel: root.bevel
+
+/*!
+    The bevel of the top right border corner.
+
+    \sa bevel
+*/
+    property bool topRightBevel: root.bevel
+
+/*!
+    The bevel of the bottom right border corner.
+
+    \sa bevel
+*/
+    property bool bottomRightBevel: root.bevel
+
+/*!
+    The bevel of the bottom left border corner.
+
+    \sa bevel
+*/
+    property bool bottomLeftBevel: root.bevel
+
+/*!
+    The width of the border line.
+    The default value is 4.
+    A width of 1 creates a thin line. For no line, use a negative value or a transparent color.
+
+    \note The width of the border does not affect its position relative to other items if
+    anchors are used.
+*/
+    property alias strokeWidth: path.strokeWidth
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {border}
+*/
+    property alias strokeColor: path.strokeColor
+
+/*!
+    The dash pattern of the border line specified as the dashes and the gaps
+    between them.
+
+    The dash pattern is specified in units of the pen's width. That is, a dash with the length 5
+    and width 10 is 50 pixels long.
+
+    Each dash is also subject to cap styles, and therefore a dash of 1 with square cap set will
+    extend 0.5 pixels out in each direction resulting in a total width of 2.
+
+    The default \l capStyle is \c {ShapePath.SquareCap}, meaning that a square line end covers the
+    end point and extends beyond it by half the line width.
+
+    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels followed by a space
+    of 2 * \l strokeWidth pixels.
+
+    \sa QPen::setDashPattern()
+*/
+    property alias dashPattern: path.dashPattern
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-joinStyle
+*/
+    //property alias joinStyle: path.joinStyle
+    property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
+    //property alias capStyle: path.capStyle
+    property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {border}
+*/
+    //property alias strokeStyle: path.strokeStyle
+    property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    The starting point of the dash pattern for the border line.
+
+    The offset is measured in terms of the units used to specify the dash pattern. For example, a
+    pattern where each stroke is four units long, followed by a gap of two units, will begin with
+    the stroke when drawn as a line. However, if the dash offset is set to 4.0, any line drawn will
+    begin with the gap. Values of the offset up to 4.0 will cause part of the stroke to be drawn
+    first, and values of the offset between 4.0 and 6.0 will cause the line to begin with part of
+    the gap.
+
+    The default value is 0.
+
+    \sa QPen::setDashOffset()
+*/
+    property alias dashOffset: path.dashOffset
+
+    //property alias fillColor: path.fillColor
+
+/*!
+    Whether the top border is visible.
+
+    The border segment is drawn if this property is set to \c true.
+*/
+    property bool drawTop: true
+
+/*!
+    Whether the bottom border is visible.
+
+    The border segment is drawn if this property is set to \c true.
+*/
+    property bool drawBottom: true
+
+/*!
+    Whether the right border is visible.
+
+    The border segment is drawn if this property is set to \c true.
+*/
+    property bool drawRight: true
+
+/*!
+    Whether the left border is visible.
+
+    The border segment is drawn if this property is set to \c true.
+*/
+    property bool drawLeft: true
+
+    property bool __preferredRendererTypeAvailable: root.preferredRendererType !== undefined
+    property bool __curveRendererActive: root.__preferredRendererTypeAvailable
+                                         && root.rendererType === Shape.CurveRenderer
+
+    layer.enabled: root.antialiasing && !root.__curveRendererActive
+    layer.smooth: root.antialiasing && !root.__curveRendererActive
+    layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-borderMode
+*/
+    property int borderMode: 0
+
+    property real borderOffset: {
+        if (root.borderMode === 0)
+            return root.strokeWidth * 0.5
+        if (root.borderMode === 1)
+            return 0
+
+        return -root.strokeWidth * 0.5
+    }
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-adjustBorderRadius
+*/
+    property bool adjustBorderRadius: false
+
+    Item {
+        anchors.fill: parent
+        anchors.margins: {
+            if (root.borderMode === 0)
+                return 0
+            if (root.borderMode === 1)
+                return -root.strokeWidth * 0.5
+
+            return -root.strokeWidth
+        }
+    }
+
+    onRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onTopLeftRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onTopRightRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onBottomLeftRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onBottomRightRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onWidthChanged: Qt.callLater(root.calculateIndependentRadii)
+    onHeightChanged: Qt.callLater(root.calculateIndependentRadii)
+
+    function calculateIndependentRadii() {
+        let minDimension = Math.min(root.width, root.height)
+        let maxRadius = Math.floor(minDimension / 2)
+        let mixed = !(root.radius === root.topLeftRadius
+                   && root.radius === root.topRightRadius
+                   && root.radius === root.bottomLeftRadius
+                   && root.radius === root.bottomRightRadius)
+
+        // Uniform radii
+        if (!mixed) {
+            path.__topLeftRadius = Math.min(root.topLeftRadius, maxRadius)
+            path.__topRightRadius = Math.min(root.topRightRadius, maxRadius)
+            path.__bottomRightRadius = Math.min(root.bottomRightRadius, maxRadius)
+            path.__bottomLeftRadius = Math.min(root.bottomLeftRadius, maxRadius)
+            return
+        }
+
+        // Mixed radii
+        let topLeftRadiusMin = Math.min(minDimension, root.topLeftRadius)
+        let topRightRadiusMin = Math.min(minDimension, root.topRightRadius)
+        let bottomLeftRadiusMin = Math.min(minDimension, root.bottomLeftRadius)
+        let bottomRightRadiusMin = Math.min(minDimension, root.bottomRightRadius)
+
+        // Top radii
+        let topRadii = root.topLeftRadius + root.topRightRadius
+
+        if (topRadii > root.width) {
+            let topLeftRadiusFactor = root.topLeftRadius / topRadii
+            let tlr = Math.round(root.width * topLeftRadiusFactor)
+
+            topLeftRadiusMin = Math.min(topLeftRadiusMin, tlr)
+            topRightRadiusMin = Math.min(topRightRadiusMin, root.width - tlr)
+        }
+
+        // Right radii
+        let rightRadii = root.topRightRadius + root.bottomRightRadius
+
+        if (rightRadii > root.height) {
+            let topRightRadiusFactor = root.topRightRadius / rightRadii
+            let trr = Math.round(root.height * topRightRadiusFactor)
+
+            topRightRadiusMin = Math.min(topRightRadiusMin, trr)
+            bottomRightRadiusMin = Math.min(bottomRightRadiusMin, root.height - trr)
+        }
+
+        // Bottom radii
+        let bottomRadii = root.bottomRightRadius + root.bottomLeftRadius
+
+        if (bottomRadii > root.width) {
+            let bottomRightRadiusFactor = root.bottomRightRadius / bottomRadii
+            let brr = Math.round(root.width * bottomRightRadiusFactor)
+
+            bottomRightRadiusMin = Math.min(bottomRightRadiusMin, brr)
+            bottomLeftRadiusMin = Math.min(bottomLeftRadiusMin, root.width - brr)
+        }
+
+        // Left radii
+        let leftRadii = root.bottomLeftRadius + root.topLeftRadius
+
+        if (leftRadii > root.height) {
+            let bottomLeftRadiusFactor = root.bottomLeftRadius / leftRadii
+            let blr = Math.round(root.height * bottomLeftRadiusFactor)
+
+            bottomLeftRadiusMin = Math.min(bottomLeftRadiusMin, blr)
+            topLeftRadiusMin = Math.min(topLeftRadiusMin, root.height - blr)
+        }
+
+        path.__topLeftRadius = topLeftRadiusMin
+        path.__topRightRadius = topRightRadiusMin
+        path.__bottomLeftRadius = bottomLeftRadiusMin
+        path.__bottomRightRadius = bottomRightRadiusMin
+    }
+
+    ShapePath {
+        id: path
+
+        property int __topLeftRadius: 0
+        property int __topRightRadius: 0
+        property int __bottomRightRadius: 0
+        property int __bottomLeftRadius: 0
+
+        readonly property real __borderRadiusAdjustment: {
+            if (root.adjustBorderRadius) {
+                if (root.borderMode === 1)
+                    return (root.strokeWidth * 0.5)
+                if (root.borderMode === 2)
+                    return root.strokeWidth
+            }
+            return 0
+        }
+
+        capStyle: root.capStyle
+        strokeStyle: root.strokeStyle
+        joinStyle: root.joinStyle
+
+        strokeWidth: 4
+        strokeColor: "red"
+        fillColor: "transparent"
+
+        startX: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
+        startY: root.borderOffset
+    }
+
+    onDrawTopChanged: root.constructBorderItem()
+    onDrawRightChanged: root.constructBorderItem()
+    onDrawBottomChanged: root.constructBorderItem()
+    onDrawLeftChanged: root.constructBorderItem()
+
+    function constructBorderItem() {
+        root.clearPathElements()
+
+        // Top line
+        if (root.drawTop) {
+            let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
+            pathLine.x = Qt.binding(function() { return root.width - path.__topRightRadius - root.borderOffset - path.__borderRadiusAdjustment })
+            pathLine.y = Qt.binding(function() { return root.borderOffset })
+            path.pathElements.push(pathLine)
+        } else {
+            let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
+            pathMove.x = Qt.binding(function() { return root.width - root.borderOffset })
+            pathMove.y = Qt.binding(function() { return path.__topRightRadius + root.borderOffset + path.__borderRadiusAdjustment })
+            path.pathElements.push(pathMove)
+        }
+
+        // Top right corner
+        if (root.drawTop && root.drawRight) {
+            let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            pathArc.x = Qt.binding(function() { return root.width - root.borderOffset })
+            pathArc.y = Qt.binding(function() { return path.__topRightRadius + root.borderOffset + path.__borderRadiusAdjustment })
+            pathArc.radiusX = Qt.binding(function() { return root.topRightBevel ? 50000 : path.__topRightRadius + path.__borderRadiusAdjustment })
+            pathArc.radiusY = Qt.binding(function() { return root.topRightBevel ? 50000 : path.__topRightRadius + path.__borderRadiusAdjustment })
+            path.pathElements.push(pathArc)
+        }
+
+        // Right line
+        if (root.drawRight) {
+            let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
+            pathLine.x = Qt.binding(function() { return root.width - root.borderOffset })
+            pathLine.y = Qt.binding(function() { return root.height - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment })
+            path.pathElements.push(pathLine)
+        } else {
+            let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
+            pathMove.x = Qt.binding(function() { return root.width - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment })
+            pathMove.y = Qt.binding(function() { return root.height - root.borderOffset })
+            path.pathElements.push(pathMove)
+        }
+
+        // Bottom right corner
+        if (root.drawBottom && root.drawRight) {
+            let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            pathArc.x = Qt.binding(function() { return root.width - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment })
+            pathArc.y = Qt.binding(function() { return root.height - root.borderOffset })
+            pathArc.radiusX = Qt.binding(function() { return root.bottomRightBevel ? 50000 : path.__bottomRightRadius + path.__borderRadiusAdjustment })
+            pathArc.radiusY = Qt.binding(function() { return root.bottomRightBevel ? 50000 : path.__bottomRightRadius + path.__borderRadiusAdjustment })
+            path.pathElements.push(pathArc)
+        }
+
+        // Bottom line
+        if (root.drawBottom) {
+            let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
+            pathLine.x = Qt.binding(function() { return path.__bottomLeftRadius + root.borderOffset + path.__borderRadiusAdjustment })
+            pathLine.y = Qt.binding(function() { return root.height - root.borderOffset })
+            path.pathElements.push(pathLine)
+        } else {
+            let pathMove = Qt.createQmlObject('import QtQuick 2.15; PathMove {}', path)
+            pathMove.x = Qt.binding(function() { return root.borderOffset })
+            pathMove.y = Qt.binding(function() { return root.height - path.__bottomLeftRadius - root.borderOffset - path.__borderRadiusAdjustment })
+            path.pathElements.push(pathMove)
+        }
+
+        // Bottom left corner
+        if (root.drawBottom && root.drawLeft) {
+            let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            pathArc.x = Qt.binding(function() { return root.borderOffset })
+            pathArc.y = Qt.binding(function() { return root.height - path.__bottomLeftRadius - root.borderOffset - path.__borderRadiusAdjustment })
+            pathArc.radiusX = Qt.binding(function() { return root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius + path.__borderRadiusAdjustment })
+            pathArc.radiusY = Qt.binding(function() { return root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius + path.__borderRadiusAdjustment })
+            path.pathElements.push(pathArc)
+        }
+
+        // Left line
+        if (root.drawLeft) {
+            let pathLine = Qt.createQmlObject('import QtQuick 2.15; PathLine {}', path)
+            pathLine.x = Qt.binding(function() { return root.borderOffset })
+            pathLine.y = Qt.binding(function() { return path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment })
+            path.pathElements.push(pathLine)
+        }
+        // No need to use PathMove, if left line shouldn't be drawn we just leave the shape open.
+
+        // Top left corner
+        if (root.drawTop && root.drawLeft) {
+            let pathArc = Qt.createQmlObject('import QtQuick 2.15; PathArc {}', path)
+            pathArc.x = Qt.binding(function() { return path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment })
+            pathArc.y = Qt.binding(function() { return root.borderOffset })
+            pathArc.radiusX = Qt.binding(function() { return root.topLeftBevel ? 50000 : path.__topLeftRadius + path.__borderRadiusAdjustment })
+            pathArc.radiusY = Qt.binding(function() { return root.topLeftBevel ? 50000 : path.__topLeftRadius + path.__borderRadiusAdjustment })
+            path.pathElements.push(pathArc)
+        }
+    }
+
+    function clearPathElements() {
+        for (var i = 0; i !== path.pathElements.length; ++i)
+            path.pathElements[i].destroy()
+
+        path.pathElements = []
+    }
+
+    Component.onCompleted: {
+        // If preferredRendererType wasn't set initially make CurveRenderer the default
+        if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
+            root.preferredRendererType = Shape.CurveRenderer
+
+        root.calculateIndependentRadii()
+        root.constructBorderItem()
+    }
+}

Dependencies/Components/imports/components/CMakeLists.txt

@@ -0,0 +1,30 @@
+qt_add_library(QuickStudioComponents STATIC)
+qt6_add_qml_module(QuickStudioComponents
+    URI "QtQuick.Studio.Components"
+    VERSION "${PROJECT_VERSION}"
+    RESOURCE_PREFIX "/qt-project.org/imports"
+    DESIGNER_SUPPORTED
+    PAST_MAJOR_VERSIONS 1
+    ${qds_qml_extra_args}
+    QML_FILES
+        ArcArrow.qml
+        ArcItem.qml
+        BorderItem.qml
+        EllipseItem.qml
+        FlipableItem.qml
+        GroupItem.qml
+        PieItem.qml
+        RectangleItem.qml
+        RegularPolygonItem.qml
+        StarItem.qml
+        StraightArrow.qml
+        SvgPathItem.qml
+        TextItem.qml
+        TriangleItem.qml
+)
+
+set_target_properties(QuickStudioComponents PROPERTIES
+    QT_QMLCACHEGEN_EXECUTABLE qmlcachegen
+)
+
+register_plugin(QuickStudioComponents)

Dependencies/Components/imports/components/CommonItemDescriptions.qdocinc

@@ -0,0 +1,162 @@
+// Copyright (C) 2024 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+
+//! [component-radius]
+
+    The radius used to draw rounded corners.
+    The default value is \1.
+    If radius is non-zero, the corners will be rounded, otherwise they will be sharp.
+
+//! [component-radius]
+
+//! [component-fillColor]
+
+    The \1 fill color.
+
+    A \1 can be filled with a \c solid color or with any of the \c linear, \c radial, or
+    \c conical gradients.
+
+    When set to \c transparent, no filling occurs.
+
+    The default value is \c white.
+//! [component-fillColor]
+
+//! [component-gradient]
+
+    The gradient of the \1 fill color.
+
+    By default, no gradient is enabled and the value is null. In this case, the fill uses a solid
+    color based on the value of \l fillColor.
+
+    When set, \l fillColor is ignored and filling is done using one of the \l ShapeGradient
+    subtypes.
+//! [component-gradient]
+
+//! [component-joinStyle]
+
+    The join style is used to connect two border line segments.
+
+    \value ShapePath.MiterJoin
+           The outer edges of the lines are extended to meet at an angle, and
+           this area is filled.
+    \value ShapePath.BevelJoin
+           The triangular notch between the two lines is filled.
+           This is the default value.
+    \value ShapePath.RoundJoin
+           A circular arc between the two lines is filled.
+
+    \sa Qt::PenJoinStyle
+//! [component-joinStyle]
+
+//! [component-capStyle]
+
+    The cap style defines how the end points of lines are drawn using QPainter. The cap style
+    only applies to lines with width 1 or greater. The cap style can be \c square, \c flat, or
+    \c round.
+
+    The default is \l Qt::SquareCap
+
+    \sa QPen::capStyle()
+
+//! [component-capStyle]
+
+//! [component-strokeStyle]
+
+    The style of the \1 stroke.
+
+    When set to \c None, no stroke is drawn.
+
+    The stroke can be set to have a \c Solid, \c Dash, \c Dot, \c {Dash Dot}, or \c {Dash Dot Dot}
+    pattern.
+
+    The default value is \c Solid.
+
+//! [component-strokeStyle]
+
+//! [component-strokeWidth]
+
+    The width of the border of the \1.
+    The default value is 4.
+    A width of 1 creates a thin line. For no line, use a negative value or a transparent color.
+
+    \note The width of the \1's border does not affect the geometry of the \1 itself or its
+    position relative to other items if anchors are used.
+
+    The border is rendered within the \1's boundaries.
+
+//! [component-strokeWidth]
+
+//! [component-strokeColor]
+
+    The color used to draw the border of the \1.
+    When set to \c transparent, no line is drawn.
+    The default value is \c red.
+
+    \sa QColor
+
+//! [component-strokeColor]
+
+//! [component-dashPattern]
+
+    The dash pattern of the \1 border specified as the dashes and the gaps between them.
+
+    The dash pattern is specified in units of the pen's width. That is, a dash with the length 5
+    and width 10 is 50 pixels long.
+
+    Each dash is also subject to cap styles, and therefore a dash of 1 with square cap set will
+    extend 0.5 pixels out in each direction resulting in a total width of 2.
+
+    The default value is (4, 2), meaning a dash of 4 * \l strokeWidth pixels followed by a space
+    of 2 * \l strokeWidth pixels.
+
+    \sa QPen::setDashPattern()
+
+//! [component-dashPattern]
+
+//! [component-dashOffset]
+
+    The starting point of the dash pattern for the \1 border.
+
+    The offset is measured in terms of the units used to specify the dash pattern. For example, a
+    pattern where each stroke is four units long, followed by a gap of two units, will begin with
+    the stroke when drawn as a line. However, if the dash offset is set to 4.0, any line drawn will
+    begin with the gap. Values of the offset up to 4.0 will cause part of the stroke to be drawn
+    first, and values of the offset between 4.0 and 6.0 will cause the line to begin with part of
+    the gap.
+
+    The default value is 0.
+
+    \sa QPen::setDashOffset()
+
+//! [component-dashOffset]
+
+//! [component-borderMode]
+
+    It defines where the border is drawn.
+
+    \value Border.Inside
+           The border is drawn along the inside edge of the item and does not
+           affect the item width.
+           This is the default value.
+    \value Border.Middle
+           The border is drawn over the edge of the item and does not
+           affect the item width.
+    \value Border.Outside
+           The border is drawn along the outside edge of the item and increases
+           the item width by the value of \l strokeWidth.
+
+    The default value is 0, which sets the border along the inside edge of the \l Item.
+
+    \sa strokeWidth
+
+//! [component-borderMode]
+
+//! [component-adjustBorderRadius]
+
+    It defines how the border radius is calculated for the corners.
+
+//! [component-adjustBorderRadius]
+
+*/

Dependencies/Components/imports/components/EllipseItem.qml

@@ -0,0 +1,223 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Shapes
+
+/*!
+    \qmltype EllipseItem
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Shape
+
+    \brief A filled ellipse with an optional border.
+
+    An ellipse can be just an ellipse shaped stroke, a filling, or a stroke with filling. The
+    \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
+    outline. The \l dashPattern and \l dashOffset properties specify the appearance of a dashed
+    stroke.
+
+    The area inside the stroke is painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are specified, the gradient is
+    used.
+
+    To create an ellipse with a stroke, set a \l strokeWidth property that is greater than 0. The
+    \l strokeWidth property specifies the width of the ellipse stroke. The default \l strokeWidth
+    value is 4. Setting the \l strokeWidth value to -1 hides the border. To set the border outside,
+    inside, or on top of the ellipse's boundary, use \l borderMode. The default value 0 sets the
+    border inside the ellipse's boundary.
+
+    \section2 Example Usage
+
+    \image studio-ellipse.webp
+
+    The QML code looks as follows:
+
+    \code
+    EllipseItem {
+        id: ellipse
+        x: 571
+        y: 199
+        width: 167
+        height: 125
+        strokeColor: "#808080"
+        strokeStyle: 1
+        borderMode: 0
+        strokeWidth: 4
+    }
+
+    EllipseItem {
+        id: ellipseStroke
+        x: 773
+        y: 199
+        width: 167
+        height: 125
+        fillColor: "#00ffffff"
+        strokeWidth: 4
+        strokeStyle: 1
+        strokeColor: "#808080"
+        borderMode: 0
+    }
+
+    EllipseItem {
+        id: ellipseFilling
+        x: 571
+        y: 350
+        width: 167
+        height: 125
+        strokeWidth: -1
+        strokeStyle: 1
+        strokeColor: "#808080"
+        borderMode: 0
+    }
+
+    EllipseItem {
+        id: ellipseDashDotStroke
+        x: 773
+        y: 350
+        width: 167
+        height: 125
+        strokeWidth: 4
+        strokeStyle: 4
+        strokeColor: "#808080"
+        fillColor: "#00ffffff"
+        borderMode: 0
+    }
+    \endcode
+*/
+
+Shape {
+    id: root
+    width: 200
+    height: 150
+/*!
+    \include CommonItemDescriptions.qdocinc {component-gradient} {ellipse}
+*/
+    property alias gradient: path.fillGradient
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {ellipse}
+*/
+    //property alias strokeStyle: path.strokeStyle
+    property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {ellipse}
+*/
+    property alias strokeWidth: path.strokeWidth
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {ellipse}
+*/
+    property alias strokeColor: path.strokeColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {ellipse}
+*/
+    property alias dashPattern: path.dashPattern
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {ellipse}
+*/
+    property alias fillColor: path.fillColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {ellipse}
+*/
+    property alias dashOffset: path.dashOffset
+
+    property bool __preferredRendererTypeAvailable: root.preferredRendererType !== undefined
+    property bool __curveRendererActive: root.__preferredRendererTypeAvailable
+                                         && root.rendererType === Shape.CurveRenderer
+
+    layer.enabled: root.antialiasing && !root.__curveRendererActive
+    layer.smooth: root.antialiasing && !root.__curveRendererActive
+    layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-borderMode
+*/
+    property int borderMode: 0
+
+    property real borderOffset: {
+        if (root.borderMode === 0)
+            return root.strokeWidth * 0.5
+        if (root.borderMode === 1)
+            return 0
+
+        return -root.strokeWidth * 0.5
+    }
+
+    Item {
+        anchors.fill: parent
+        anchors.margins: {
+            if (root.borderMode === 0)
+                return 0
+            if (root.borderMode === 1)
+                return -root.strokeWidth * 0.5
+
+            return -root.strokeWidth
+        }
+    }
+
+    ShapePath {
+        id: path
+
+        joinStyle: ShapePath.MiterJoin
+        strokeWidth: 4
+        strokeColor: "red"
+        startX: root.width * 0.5
+        startY: root.borderOffset
+
+        strokeStyle: root.strokeStyle
+
+        PathArc {
+            x: path.startX
+            y: root.height - root.borderOffset
+            radiusX: root.width * 0.5 - root.borderOffset
+            radiusY: root.height * 0.5 - root.borderOffset
+            useLargeArc: true
+        }
+
+        PathArc {
+            x: path.startX
+            y: path.startY
+            radiusX: root.width * 0.5 - root.borderOffset
+            radiusY: root.height * 0.5 - root.borderOffset
+            useLargeArc: true
+        }
+    }
+
+    Component.onCompleted: {
+        // If preferredRendererType wasn't set initially make CurveRenderer the default
+        if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
+            root.preferredRendererType = Shape.CurveRenderer
+    }
+}

Dependencies/Components/imports/components/FlipableItem.qml

@@ -0,0 +1,171 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+
+/*!
+    \qmltype FlipableItem
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+
+    \brief Provides a surface that can be flipped.
+
+    A Flipable type can be visibly flipped between its front and back sides, like a card. The front
+    and back sides are specified by using any two types inside the Flipable type. The type with the
+    higher z-order is the front side. The \l opacityFront and \l opacityBack properties are used to
+    hide and show either the front or back side of the item at a time.
+
+    The \l flipAngle property is used to animate the angle of the type to produce the flipping
+    effect. The value of the \l rotationalAxis property determines which axis the type is rotated
+    around.
+
+    \section2 Example Usage
+
+    You can use the Flipable component in \QDS to create an item that can be flipped.
+
+    \image studio-flipable.webp
+
+    The QML code looks as follows:
+
+    \code
+    FlipableItem {
+        id: flipable
+        x: 595
+        y: 277
+        width: 493
+        height: 493
+        opacityFront: 1
+        opacityBack: 0.09412
+        flipAngle: 45
+        rotationalAxis: 1
+
+        TriangleItem {
+            id: triangle
+            x: 122
+            y: 122
+            width: 250
+            height: 250
+            opacity: 1
+            z: 0
+            strokeWidth: 10
+            fillColor: "#6cff9f"
+            rotation: -270
+        }
+
+        TriangleItem {
+            id: triangle1
+            x: 16
+            y: 122
+            width: 250
+            height: 250
+            strokeWidth: 10
+            rotation: 270
+            fillColor: "#6cff9f"
+        }
+    }
+    \endcode
+*/
+
+Flipable {
+    id: flipable
+    width: 240
+    height: 240
+
+/*!
+    The flip angle in degrees.
+
+    The minimum value is -360 and the maximum value is 360 degrees.
+*/
+    property alias flipAngle: rotation.angle
+
+/*!
+    The opacity of the front side of the type.
+
+    The opacity can be set between 0 and 1 to hide or show the items on the
+    front side of the type.
+*/
+    property real opacityFront: 1
+
+/*!
+    The opacity of the back side of the type.
+
+    The opacity can be set between 0 and 1 to hide or show the items on the
+    back side of the type.
+*/
+    property real opacityBack: 1
+
+/*!
+    Whether the type is rotated around the x-axis or y-axis.
+
+    This property is set to 0 to rotate the type around the x-axis or to
+    1 to rotate around the y-axis.
+*/
+    property int rotationalAxis: 1 // 0: x-axis, 1: y-axis
+
+    Binding {
+        target: flipable.front
+        value: opacityFront
+        property: "opacity"
+        when: flipable.front !== undefined
+    }
+
+    Binding {
+        target: flipable.back
+        value: opacityBack
+        property: "opacity"
+        when: flipable.back !== undefined
+    }
+
+/*!
+    Whether the type has been flipped.
+
+    This property is set to \c true when the type is flipped.
+*/
+    property bool flipped: false
+
+    onChildrenChanged: {
+        if (flipable.children[0] !== undefined && !flipable.front) {
+            flipable.front = flipable.children[0]
+        }
+
+        if (flipable.children[1] !== undefined && !flipable.back){
+            flipable.back = flipable.children[1]
+        }
+    }
+
+    transform: Rotation {
+        id: rotation
+        origin.x: flipable.width/2
+        origin.y: flipable.height/2
+        axis.x: flipable.rotationalAxis === 0 ? 1 : 0
+        axis.y: flipable.rotationalAxis === 1 ? 1 : 0
+        axis.z: 0
+        angle: 0    // the default angle
+    }
+}

Dependencies/Components/imports/components/GroupItem.qml

@@ -0,0 +1,79 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+
+/*!
+    \qmltype GroupItem
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Item
+
+    \brief A group item that gets its size from its children.
+
+    The Group type is an \l Item type extended with the size property. The value of size is
+    automatically calculated to fit the children of the group.
+
+    \section2 Example Usage
+
+    You can use the Group type to specify the size of one or several items.
+
+    \image studio-group.webp
+
+    The QML code looks as follows:
+
+    \code
+     GroupItem {
+        id: group
+        x: 820
+        y: 437
+
+        Rectangle {
+            id: rectangle1
+            width: 200
+            height: 200
+            color: "#c2c2c2"
+        }
+
+        Rectangle {
+            id: rectangle2
+            x: 140
+            y: 140
+            width: 200
+            height: 200
+            color: "#000000"
+        }
+    }
+    \endcode
+*/
+
+Item {
+    implicitWidth: Math.max(16, childrenRect.width + childrenRect.x)
+    implicitHeight: Math.max(16, childrenRect.height + childrenRect.y)
+}

Dependencies/Components/imports/components/PieItem.qml

@@ -0,0 +1,272 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Shapes
+
+/*!
+    \qmltype PieItem
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Shape
+
+    \brief A pie.
+
+    The Pie type is used to create a pie slice, a pie that is missing slices, or just the pie stroke
+    (similar to an \l ArcItem), depending on the \l begin and \l end property values and the
+    \l hideLine value.
+
+    The filling of the pie is painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are specified, the gradient is
+    used.
+
+    The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
+    pie outline. The \l dashPattern and \l dashOffset properties specify the appearance of dashed
+    lines.
+
+    The \l capStyle property specifies whether line ends are square or rounded.
+
+    \section2 Example Usage
+
+    You can use the Pie component in \QDS to create different kinds of pies.
+
+    \image studio-pie.webp
+
+    The QML code looks as follows:
+
+    \code
+    PieItem {
+        id: pieSlice
+        x: 920
+        y: 416
+        strokeWidth: -1
+        antialiasing: true
+        strokeColor: "gray"
+        fillColor: "light gray"
+    }
+
+    PieItem {
+        id: pie
+        x: 1118
+        y: 407
+        end: 300
+        fillColor: "#d3d3d3"
+        strokeColor: "#808080"
+        antialiasing: true
+    }
+
+    PieItem {
+        id: pieStroke
+        x: 1022
+        y: 548
+        fillColor: "#00ffffff"
+        strokeWidth: 4
+        capStyle: 32
+        hideLine: true
+        end: 300
+        strokeColor: "#808080"
+        antialiasing: true
+    }
+    \endcode
+*/
+
+Shape {
+    id: root
+
+    width: 100
+    height: 100
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-gradient} {pie}
+*/
+    property alias gradient: path.fillGradient
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-joinStyle
+*/
+    //property alias joinStyle: path.joinStyle
+    property int joinStyle: ShapePath.BevelJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
+    //property alias capStyle: path.capStyle
+    property int capStyle: ShapePath.FlatCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {pie}
+*/
+    //property alias strokeStyle: path.strokeStyle
+    property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {pie}
+*/
+    property alias strokeWidth: path.strokeWidth
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {pie}
+*/
+    property alias strokeColor: path.strokeColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {pie}
+*/
+    property alias dashPattern: path.dashPattern
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {pie}
+
+    If \l hideLine is \c false, a pie slice is drawn using the values of the \l begin and \l end
+    properties and filled with this color.
+
+    If \l hideLine is \c true, just the pie stroke is drawn and the area between the \l begin and
+    \l end points is filled.
+*/
+    property alias fillColor: path.fillColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {pie}
+*/
+    property alias dashOffset: path.dashOffset
+
+/*!
+    The position in degrees where the pie begins.
+
+    The default value is 0.
+
+    To create a circle, set the value of this property to 0 and the value of the \l end property to
+    360.
+*/
+    property real begin: 0
+
+/*!
+    The position in degrees where the pie ends.
+
+    The default value is 90.
+
+    To create a circle, set the value of this property to 360 and the value of the \l begin property
+    to 0.
+*/
+    property real end: 90
+
+/*!
+    The area between \l begin and \l end.
+*/
+    property real alpha: root.clamp(root.end - root.begin, 0, 359.9)
+
+    property bool __preferredRendererTypeAvailable: root.preferredRendererType !== undefined
+    property bool __curveRendererActive: root.__preferredRendererTypeAvailable
+                                         && root.rendererType === Shape.CurveRenderer
+
+    layer.enabled: root.antialiasing && !root.__curveRendererActive
+    layer.smooth: root.antialiasing && !root.__curveRendererActive
+    layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
+
+    function clamp(num, min, max) {
+        return Math.max(min, Math.min(num, max))
+    }
+
+/*!
+    Whether to draw a pie slice or just the pie stroke (similar to an \l ArcItem).
+*/
+    property bool hideLine: {
+        if (root.alpha <= 0)
+            return true
+        if (root.alpha >= 359)
+            return true
+        return false
+    }
+
+    function toRadians(degrees) {
+        return degrees * (Math.PI / 180.0)
+    }
+
+    function polarToCartesianX(centerX, centerY, radius, angleInDegrees) {
+        return centerX + radius * Math.cos(root.toRadians(angleInDegrees))
+    }
+
+    function polarToCartesianY(centerX, centerY, radius, angleInDegrees) {
+        return centerY + radius * Math.sin(root.toRadians(angleInDegrees))
+    }
+
+    ShapePath {
+        id: path
+
+        property real __xRadius: root.width / 2 - root.strokeWidth / 2
+        property real __yRadius: root.height / 2 - root.strokeWidth / 2
+
+        property real __xCenter: root.width / 2
+        property real __yCenter: root.height / 2
+
+        strokeColor: "red"
+        capStyle: root.capStyle
+        strokeStyle: root.strokeStyle
+        joinStyle: root.joinStyle
+
+        strokeWidth: 4
+
+        startX: root.hideLine ? root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.begin - 90)
+                              : path.__xCenter
+        startY: root.hideLine ? root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.begin - 90)
+                              : path.__yCenter
+
+        PathLine {
+            x: root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.begin - 90)
+            y: root.polarToCartesianY(path.__xCenter, path.__yCenter, path.__yRadius, root.begin - 90)
+        }
+
+        PathArc {
+            id: arc
+
+            x: root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.begin + root.alpha - 90)
+            y: root.polarToCartesianY(path.__xCenter, path.__yCenter,  path.__yRadius, root.begin + root.alpha - 90)
+
+            radiusY: path.__yRadius;
+            radiusX: path.__xRadius;
+
+            useLargeArc: root.alpha > 180
+        }
+
+        PathLine {
+            x: root.hideLine ? root.polarToCartesianX(path.__xCenter, path.__yCenter, path.__xRadius, root.begin + root.alpha - 90)
+                             : path.__xCenter
+            y: root.hideLine ? root.polarToCartesianY(path.__xCenter, path.__yCenter,  path.__yRadius, root.begin + root.alpha - 90)
+                             : path.__yCenter
+        }
+    }
+
+    Component.onCompleted: {
+        // If preferredRendererType wasn't set initially make CurveRenderer the default
+        if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
+            root.preferredRendererType = Shape.CurveRenderer
+    }
+}
+

Dependencies/Components/imports/components/RectangleItem.qml

@@ -0,0 +1,491 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Shapes
+
+/*!
+    \qmltype RectangleItem
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Shape
+
+    \brief A filled rectangle with an optional border.
+
+    Rectangle items are used to fill areas with solid color or gradients and to provide a
+    rectangular border.
+
+    Each Rectangle item is painted using either a solid fill color, specified using the \l fillColor
+    property, or a gradient, defined using one of the \l ShapeGradient subtypes and set using the
+    \l gradient property. If both a color and a gradient are specified, the gradient is used.
+
+    An optional border can be added to a rectangle with its own color and thickness by setting the
+    \l strokeColor and \l strokeWidth properties. Setting the color to \c transparent creates a
+    border without a fill color.
+
+    Rounded rectangles can be drawn using the \l radius property. The radius can also be specified
+    separately for each corner. Because this introduces curved edges to the corners of a rectangle.
+    Additionally, \l bevel can be applied on any corner to cut it off sharply.
+
+    \section2 Example Usage
+
+    You can use the Rectangle component in \QDS to create different kinds of rectangles.
+
+    \image studio-rectangle.webp
+
+    The QML code looks as follows:
+
+    \code
+    RectangleItem {
+        id: rectangle1
+        x: 480
+        y: 164
+        width: 409
+        height: 307
+        radius: 0
+        gradient: RadialGradient {
+            GradientStop {
+                position: 0
+                color: "#cea1f9fc"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#ec7d7d"
+            }
+            focalY: rectangle1.height * 0.5
+            focalX: rectangle1.width * 0.5
+            focalRadius: Math.min(rectangle1.width, rectangle1.height) * 0
+            centerY: rectangle1.height * 0.5
+            centerX: rectangle1.width * 0.5
+            centerRadius: Math.min(rectangle1.width, rectangle1.height) * 0.5
+        }
+        strokeWidth: 6
+        strokeColor: "#ff0000"
+        bottomLeftRadius: 30
+        topRightRadius: 30
+        adjustBorderRadius: true
+    }
+
+    RectangleItem {
+        id: rectangle2
+        x: 954
+        y: 164
+        width: 409
+        height: 307
+        radius: 0
+        fillColor: "#c062606a"
+        strokeWidth: -1
+        topRightRadius: 30
+        strokeColor: "#8b8a8a"
+        bottomLeftRadius: 30
+        adjustBorderRadius: true
+    }
+
+    RectangleItem {
+        id: rectangle3
+        x: 480
+        y: 533
+        width: 409
+        height: 307
+        radius: 0
+        gradient: LinearGradient {
+            y2: rectangle3.height * 1
+            y1: rectangle3.height * 0
+            x2: rectangle3.width * 1
+            x1: rectangle3.width * 0
+            GradientStop {
+                position: 0.10526
+                color: "#e77979"
+            }
+            GradientStop {
+                position: 0.67105
+                color: "#716767"
+            }
+        }
+        topRightBevel: true
+        topRightRadius: 30
+        strokeWidth: 6
+        strokeColor: "#ff0000"
+        bottomLeftRadius: 0
+        adjustBorderRadius: true
+    }
+
+    RectangleItem {
+        id: rectangle4
+        x: 954
+        y: 533
+        width: 409
+        height: 307
+        radius: 30
+        fillColor: "#d87c7c"
+        borderMode: 2
+        dashOffset: 3
+        joinStyle: 2
+        strokeStyle: 5
+        topRightBevel: false
+        strokeWidth: 6
+        strokeColor: "#ff0000"
+        adjustBorderRadius: true
+    }
+    \endcode
+*/
+
+Shape {
+    id: root
+    width: 200
+    height: 150
+/*!
+    \include CommonItemDescriptions.qdocinc {component-radius} {10}
+
+    If radius is non-zero, the corners will be rounded, otherwise they will be sharp. The radius can
+    also be specified separately for each corner by using the \l bottomLeftRadius,
+    \l bottomRightRadius, \l topLeftRadius, and \l topRightRadius properties.
+*/
+    property int radius: 10
+
+/*!
+    The radius of the top left rectangle corner.
+*/
+    property int topLeftRadius: root.radius
+
+/*!
+    The radius of the bottom left rectangle corner.
+*/
+    property int bottomLeftRadius: root.radius
+
+/*!
+    The radius of the top right rectangle corner.
+*/
+    property int topRightRadius: root.radius
+
+/*!
+    The radius of the bottom right rectangle corner.
+*/
+    property int bottomRightRadius: root.radius
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-gradient} {rectangle}
+*/
+    property ShapeGradient gradient: null
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-joinStyle
+*/
+    //property alias joinStyle: path.joinStyle
+    property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
+    //property alias capStyle: path.capStyle
+    property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {rectangle}
+*/
+    //property alias strokeStyle: path.strokeStyle
+    property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {rectangle}
+*/
+    property alias strokeWidth: path.strokeWidth
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {rectangle}
+*/
+    property alias strokeColor: path.strokeColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {rectangle}
+*/
+    property alias dashPattern: path.dashPattern
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {rectangle}
+*/
+    property alias fillColor: path.fillColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {rectangle}
+*/
+    property alias dashOffset: path.dashOffset
+
+/*!
+    Whether the rectangle corner is beveled.
+*/
+    property bool bevel: false
+
+/*!
+    The bevel of the top left rectangle corner.
+
+    \sa bevel
+*/
+    property bool topLeftBevel: root.bevel
+
+/*!
+    The bevel of the top right rectangle corner.
+
+    \sa bevel
+*/
+    property bool topRightBevel: root.bevel
+
+/*!
+    The bevel of the bottom right rectangle corner.
+
+    \sa bevel
+*/
+    property bool bottomRightBevel: root.bevel
+
+/*!
+    The bevel of the bottom left rectangle corner.
+
+    \sa bevel
+*/
+    property bool bottomLeftBevel: root.bevel
+
+    property bool __preferredRendererTypeAvailable: root.preferredRendererType !== undefined
+    property bool __curveRendererActive: root.__preferredRendererTypeAvailable
+                                         && root.rendererType === Shape.CurveRenderer
+
+    layer.enabled: root.antialiasing && !root.__curveRendererActive
+    layer.smooth: root.antialiasing && !root.__curveRendererActive
+    layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-borderMode
+*/
+    property int borderMode: 0
+
+    property real borderOffset: {
+        if (root.borderMode === 0)
+            return root.strokeWidth * 0.5
+        if (root.borderMode === 1)
+            return 0
+
+        return -root.strokeWidth * 0.5
+    }
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-adjustBorderRadius
+*/
+    property bool adjustBorderRadius: false
+
+    Item {
+        anchors.fill: parent
+        anchors.margins: {
+            if (root.borderMode === 0)
+                return 0
+            if (root.borderMode === 1)
+                return -root.strokeWidth * 0.5
+
+            return -root.strokeWidth
+        }
+    }
+
+    onRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onTopLeftRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onTopRightRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onBottomLeftRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onBottomRightRadiusChanged: Qt.callLater(root.calculateIndependentRadii)
+    onWidthChanged: Qt.callLater(root.calculateIndependentRadii)
+    onHeightChanged: Qt.callLater(root.calculateIndependentRadii)
+
+    Component.onCompleted: {
+        // If preferredRendererType wasn't set initially make CurveRenderer the default
+        if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
+            root.preferredRendererType = Shape.CurveRenderer
+
+        root.calculateIndependentRadii()
+    }
+
+    function calculateIndependentRadii() {
+        let minDimension = Math.min(root.width, root.height)
+        let maxRadius = Math.floor(minDimension / 2)
+        let mixed = !(root.radius === root.topLeftRadius
+                   && root.radius === root.topRightRadius
+                   && root.radius === root.bottomLeftRadius
+                   && root.radius === root.bottomRightRadius)
+
+        // Uniform radii
+        if (!mixed) {
+            path.__topLeftRadius = Math.min(root.topLeftRadius, maxRadius)
+            path.__topRightRadius = Math.min(root.topRightRadius, maxRadius)
+            path.__bottomRightRadius = Math.min(root.bottomRightRadius, maxRadius)
+            path.__bottomLeftRadius = Math.min(root.bottomLeftRadius, maxRadius)
+            return
+        }
+
+        // Mixed radii
+        let topLeftRadiusMin = Math.min(minDimension, root.topLeftRadius)
+        let topRightRadiusMin = Math.min(minDimension, root.topRightRadius)
+        let bottomLeftRadiusMin = Math.min(minDimension, root.bottomLeftRadius)
+        let bottomRightRadiusMin = Math.min(minDimension, root.bottomRightRadius)
+
+        // Top radii
+        let topRadii = root.topLeftRadius + root.topRightRadius
+
+        if (topRadii > root.width) {
+            let topLeftRadiusFactor = root.topLeftRadius / topRadii
+            let tlr = Math.round(root.width * topLeftRadiusFactor)
+
+            topLeftRadiusMin = Math.min(topLeftRadiusMin, tlr)
+            topRightRadiusMin = Math.min(topRightRadiusMin, root.width - tlr)
+        }
+
+        // Right radii
+        let rightRadii = root.topRightRadius + root.bottomRightRadius
+
+        if (rightRadii > root.height) {
+            let topRightRadiusFactor = root.topRightRadius / rightRadii
+            let trr = Math.round(root.height * topRightRadiusFactor)
+
+            topRightRadiusMin = Math.min(topRightRadiusMin, trr)
+            bottomRightRadiusMin = Math.min(bottomRightRadiusMin, root.height - trr)
+        }
+
+        // Bottom radii
+        let bottomRadii = root.bottomRightRadius + root.bottomLeftRadius
+
+        if (bottomRadii > root.width) {
+            let bottomRightRadiusFactor = root.bottomRightRadius / bottomRadii
+            let brr = Math.round(root.width * bottomRightRadiusFactor)
+
+            bottomRightRadiusMin = Math.min(bottomRightRadiusMin, brr)
+            bottomLeftRadiusMin = Math.min(bottomLeftRadiusMin, root.width - brr)
+        }
+
+        // Left radii
+        let leftRadii = root.bottomLeftRadius + root.topLeftRadius
+
+        if (leftRadii > root.height) {
+            let bottomLeftRadiusFactor = root.bottomLeftRadius / leftRadii
+            let blr = Math.round(root.height * bottomLeftRadiusFactor)
+
+            bottomLeftRadiusMin = Math.min(bottomLeftRadiusMin, blr)
+            topLeftRadiusMin = Math.min(topLeftRadiusMin, root.height - blr)
+        }
+
+        path.__topLeftRadius = topLeftRadiusMin
+        path.__topRightRadius = topRightRadiusMin
+        path.__bottomLeftRadius = bottomLeftRadiusMin
+        path.__bottomRightRadius = bottomRightRadiusMin
+    }
+
+    ShapePath {
+        id: path
+
+        property int __topLeftRadius: 0
+        property int __topRightRadius: 0
+        property int __bottomRightRadius: 0
+        property int __bottomLeftRadius: 0
+
+        readonly property real __borderRadiusAdjustment: {
+            if (root.adjustBorderRadius) {
+                if (root.borderMode === 1)
+                    return (root.strokeWidth * 0.5)
+                if (root.borderMode === 2)
+                    return root.strokeWidth
+            }
+            return 0
+        }
+
+        capStyle: root.capStyle
+        strokeStyle: root.strokeStyle
+        joinStyle: root.joinStyle
+
+        strokeWidth: 4
+        strokeColor: "red"
+        fillGradient: root.gradient
+
+        startX: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
+        startY: root.borderOffset
+
+        // Top.
+        PathLine {
+            x: root.width - path.__topRightRadius - root.borderOffset - path.__borderRadiusAdjustment
+            y: root.borderOffset
+        }
+
+        // Top-right.
+        PathArc {
+            x: root.width - root.borderOffset
+            y: path.__topRightRadius + root.borderOffset + path.__borderRadiusAdjustment
+
+            radiusX: root.topRightBevel ? 50000 : path.__topRightRadius + path.__borderRadiusAdjustment
+            radiusY: root.topRightBevel ? 50000 : path.__topRightRadius + path.__borderRadiusAdjustment
+        }
+
+        // Right.
+        PathLine {
+            x: root.width - root.borderOffset
+            y: root.height - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment
+        }
+
+        // Bottom-right.
+        PathArc {
+            x: root.width - path.__bottomRightRadius - root.borderOffset - path.__borderRadiusAdjustment
+            y: root.height - root.borderOffset
+
+            radiusX: root.bottomRightBevel ? 50000 : path.__bottomRightRadius + path.__borderRadiusAdjustment
+            radiusY: root.bottomRightBevel ? 50000 : path.__bottomRightRadius + path.__borderRadiusAdjustment
+        }
+
+        // Bottom.
+        PathLine {
+            x: path.__bottomLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
+            y: root.height - root.borderOffset
+        }
+
+        // Bottom-left.
+        PathArc {
+            x: root.borderOffset
+            y: root.height - path.__bottomLeftRadius - root.borderOffset - path.__borderRadiusAdjustment
+
+            radiusX: root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius + path.__borderRadiusAdjustment
+            radiusY: root.bottomLeftBevel ? 50000 : path.__bottomLeftRadius + path.__borderRadiusAdjustment
+        }
+
+        // Left.
+        PathLine {
+            x: root.borderOffset
+            y: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
+        }
+
+        // Top-left.
+        PathArc {
+            x: path.__topLeftRadius + root.borderOffset + path.__borderRadiusAdjustment
+            y: root.borderOffset
+
+            radiusX: root.topLeftBevel ? 50000 : path.__topLeftRadius + path.__borderRadiusAdjustment
+            radiusY: root.topLeftBevel ? 50000 : path.__topLeftRadius + path.__borderRadiusAdjustment
+        }
+    }
+}

Dependencies/Components/imports/components/RegularPolygonItem.qml

@@ -0,0 +1,452 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Shapes
+
+/*!
+    \qmltype RegularPolygon
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Shape
+
+    \brief A filled regular polygon with an optional border.
+
+    A regular polygon can be just a 2D polygon shaped stroke, a filling, or a stroke with filling.
+    The \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
+    outline. The \l dashPattern and \l dashOffset properties specify the appearance of dashed stroke.
+
+    The area inside the stroke is painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are specified, the gradient is
+    used.
+
+    To create a polygon with a stroke, set the \sideCount property between 3 to 100 and the
+    \l strokeWidth property greater than 0. The \l strokeWidth property specifies the width of the
+    polygon stroke.The default \l sideCount value is 6 and the default \l strokeWidth value is 4.
+    Setting the \l strokeWidth value to a negetive value hides the border.
+
+    The \l radius property specifies whether the polygon corners are rounded. Because this
+    introduces curved edges to the corners, it may be appropriate to set the \c antialiasing
+    property that is inherited from \l Item to improve the appearance of the stroke.
+
+    \section2 Example Usage
+
+    \image studio-regularpolygon.webp
+
+    The QML code looks as follows:
+
+    \code
+    RegularPolygonItem {
+        id: regularPolygon
+        x: 817
+        y: 404
+        width: 133
+        height: 133
+        radius: 10
+        strokeColor: "#262525"
+        fillColor: "#766e6e"
+    }
+
+    RegularPolygonItem {
+        id: regularPolygon1
+        x: 973
+        y: 404
+        width: 133
+        height: 133
+        sideCount: 15
+        gradient: RadialGradient {
+            GradientStop {
+                position: 0
+                color: "#c56060"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#665e5e"
+            }
+            focalY: regularPolygon1.height * 0.5
+            focalX: regularPolygon1.width * 0.5
+            focalRadius: Math.min(regularPolygon1.width, regularPolygon1.height) * 0
+            centerY: regularPolygon1.height * 0.5
+            centerX: regularPolygon1.width * 0.5
+            centerRadius: Math.min(regularPolygon1.width, regularPolygon1.height) * 0.5
+        }
+        strokeColor: "#262525"
+    }
+
+    RegularPolygonItem {
+        id: regularPolygon2
+        x: 817
+        y: 567
+        width: 133
+        height: 133
+        gradient: ConicalGradient {
+            centerY: regularPolygon2.height * 0.5
+            centerX: regularPolygon2.width * 0.5
+            angle: 0
+
+            GradientStop {
+                position: 0
+                color: "#fc8e8e"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#f0b9b9"
+            }
+        }
+        joinStyle: 1
+        strokeStyle: 4
+        strokeColor: "#262525"
+        sideCount: 10
+    }
+
+    RegularPolygonItem {
+        id: regularPolygon3
+        x: 973
+        y: 567
+        width: 133
+        height: 133
+        strokeWidth: -1
+        strokeColor: "#262525"
+        sideCount: 7
+        gradient: RadialGradient {
+            GradientStop {
+                position: 0.21053
+                color: "#60c2c5"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#deb2b2"
+            }
+            focalY: regularPolygon3.height * 0.5
+            focalX: regularPolygon3.width * 0.5
+            focalRadius: Math.min(regularPolygon3.width, regularPolygon3.height) * 0
+            centerY: regularPolygon3.height * 0.5
+            centerX: regularPolygon3.width * 0.5
+            centerRadius: Math.min(regularPolygon3.width, regularPolygon3.height) * 0.5
+        }
+    }
+    \endcode
+
+*/
+
+Shape {
+    id: root
+    width: 200
+    height: 200
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-radius} {10}
+*/
+    property int radius: 10
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-gradient} {regular polygon}
+*/
+    property alias gradient: path.fillGradient
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-joinStyle
+*/
+    //property alias joinStyle: path.joinStyle
+    property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
+    //property alias capStyle: path.capStyle
+    property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {regular polygon}
+*/
+    //property alias strokeStyle: path.strokeStyle
+    property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {regular polygon}
+*/
+    property alias strokeWidth: path.strokeWidth
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {regular polygon}
+*/
+    property alias strokeColor: path.strokeColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {regular polygon}
+*/
+    property alias dashPattern: path.dashPattern
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {regular polygon}
+*/
+    property alias fillColor: path.fillColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {regular polygon}
+*/
+    property alias dashOffset: path.dashOffset
+
+/*!
+    The number of edges on the regular polygon.
+    The minimum number of edges can be 3.
+    The default value is 6.
+*/
+    property int sideCount: 6
+
+    property bool __preferredRendererTypeAvailable: root.preferredRendererType !== "undefined"
+    property bool __curveRendererActive: root.__preferredRendererTypeAvailable
+                                         && root.rendererType === Shape.CurveRenderer
+
+    layer.enabled: root.antialiasing && !root.__curveRendererActive
+    layer.smooth: root.antialiasing && !root.__curveRendererActive
+    layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
+
+    // This is used to make the bounding box of the item a bit bigger so it will draw sharp edges
+    // in case of large stroke width instead of cutting it off.
+    Item {
+        anchors.fill: parent
+        anchors.margins: -root.strokeWidth
+    }
+
+    ShapePath {
+        id: path
+
+        capStyle: root.capStyle
+        strokeStyle: root.strokeStyle
+        joinStyle: root.joinStyle
+
+        strokeWidth: 4
+        strokeColor: "red"
+        startX: 0
+        startY: 0
+    }
+
+    onWidthChanged: root.constructPolygon()
+    onHeightChanged: root.constructPolygon()
+    onSideCountChanged: root.constructPolygon()
+    onRadiusChanged: root.constructPolygon()
+
+    Component.onCompleted: {
+        // If preferredRendererType wasn't set initially make CurveRenderer the default
+        if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
+            root.preferredRendererType = Shape.CurveRenderer
+
+        root.constructPolygon()
+    }
+
+    property real __centerX: root.width / 2
+    property real __centerY: root.height / 2
+
+    function constructPolygon() {
+        root.clearPathElements()
+
+        if (root.radius === 0)
+            root.constructPolygonPath()
+        else
+            root.constructRoundedPolygonPath()
+    }
+
+    function toRadians(degrees) {
+        return degrees * (Math.PI / 180.0)
+    }
+
+    function toDegrees(radians) {
+        return radians * (180.0 / Math.PI)
+    }
+
+    function getPoints() {
+        let sliceAngle = (360.0 / root.sideCount)
+        // The Draftsman's Method
+        let a = root.width / 2 // x-radius
+        let b = root.height / 2 // y-radius
+        let points = []
+
+        // Go clockwise from top center
+        for (var corner = 0; corner < root.sideCount; corner++) {
+            let angleToCorner = root.toRadians(corner * sliceAngle)
+            // Start at top center
+            let x = root.__centerX + a * Math.sin(angleToCorner)
+            let y = root.__centerY - b * Math.cos(angleToCorner)
+
+            points.push(Qt.point(x ,y))
+        }
+
+        return points
+    }
+
+    Component {
+        id: myPathLine
+        PathLine {}
+    }
+
+    Component {
+        id: myPathArc
+        PathArc {}
+    }
+
+    function constructPolygonPath() {
+        let angle = (360.0 / root.sideCount)
+        let points = root.getPoints()
+
+        for (var i = 0; i < points.length; i++) {
+            if (i === 0) {
+                path.startX = points[i].x
+                path.startY = points[i].y
+            } else {
+                let pathLine = myPathLine.createObject(path)
+                pathLine.x = points[i].x
+                pathLine.y = points[i].y
+                path.pathElements.push(pathLine)
+            }
+        }
+
+        // Close the polygon
+        var pathLineClose = myPathLine.createObject(path)
+        pathLineClose.x = points[0].x
+        pathLineClose.y = points[0].y
+        path.pathElements.push(pathLineClose)
+    }
+
+    // https://stackoverflow.com/questions/58541430/find-intersection-point-of-two-vectors-independent-from-direction
+    // This function returns the length of the vector from p to the intersection point of the two lines
+    // both defined by a point and a vector.
+    function intersect(p: point, dir1: vector2d, q: point, dir2: vector2d) : real {
+        let r = dir1.normalized()
+        let s = dir2.normalized()
+
+        let pq  = Qt.vector2d(q.x - p.x, q.y - p.y)
+        let snv = Qt.vector2d(s.y, -s.x);
+
+        return pq.dotProduct(snv) / r.dotProduct(snv)
+    }
+
+    function wrapIndex(index, size) {
+        return (index + size) % size
+    }
+
+    function constructRoundedPolygonPath() {
+        let angle = (360.0 / root.sideCount)
+        let points = root.getPoints()
+
+        // A list of vectors that are the bisectors of the inner angles of the polygon.
+        // This is used to calculate the intersection point of neighboring bisectors for a corner.
+        // The minimum length of the two neighboring corner bisectors intersection point is the
+        // maximum for the center of the circle that make up the corner radius.
+        let bisectors = []
+
+        // Create angle bisectors by using the parallelolgram rule.
+        for (var i = 0; i < points.length; i++) {
+            let a = points[root.wrapIndex(i, points.length)]
+            let b = points[root.wrapIndex(i - 1, points.length)]
+            let c = points[root.wrapIndex(i + 1, points.length)]
+
+            let vAB = Qt.vector2d(b.x - a.x, b.y - a.y).normalized()
+            let vAC = Qt.vector2d(c.x - a.x, c.y - a.y).normalized()
+            let bisector = vAB.plus(vAC).normalized()
+
+            bisectors.push(bisector)
+        }
+
+        for (var i = 0; i < points.length; i++) {
+            let a = points[root.wrapIndex(i, points.length)]
+            let b = points[root.wrapIndex(i - 1, points.length)]
+            let c = points[root.wrapIndex(i + 1, points.length)]
+            let r = root.radius
+
+            let vAB = Qt.vector2d(b.x - a.x, b.y - a.y)
+            let vAC = Qt.vector2d(c.x - a.x, c.y - a.y)
+
+            // Calculate the intersection points of the two neighboring bisectors
+            let tAB = root.intersect(a, bisectors[root.wrapIndex(i, bisectors.length)],
+                                     b, bisectors[root.wrapIndex(i - 1, bisectors.length)])
+            let tAC = root.intersect(a, bisectors[root.wrapIndex(i, bisectors.length)],
+                                     c, bisectors[root.wrapIndex(i + 1, bisectors.length)])
+            let tMax = Math.min(tAB, tAC)
+
+            // Angle between the two vectors AB and AC as radians
+            let alpha = Math.acos(vAB.dotProduct(vAC) / (vAB.length() * vAC.length()))
+
+            // The maximum radius of the circle that can be drawn at the corner. This is another
+            // constraint that Figma uses to calculate the corner radius. The corner radius shouldn't
+            // be bigger than half of the distance between the two neighboring corners.
+            let maxRadius = Math.round(Qt.vector2d(c.x - b.x, c.y - b.y).length() / 2)
+            r = Math.min(r, maxRadius)
+
+            // The optimal length of the corner bisector to place the center of the circle.
+            let cLength = r / (Math.sin(alpha / 2))
+
+            // Clamp c to the maximum value found from the intersection points of the bisectors.
+            let realC = Math.min(cLength, tMax)
+
+            if (realC < cLength)
+                r = realC * Math.sin(alpha / 2)
+
+            let t = Math.sqrt(Math.pow(realC, 2) - Math.pow(r, 2))
+
+            let p1 = vAB.normalized().times(t).plus(Qt.vector2d(a.x, a.y))
+            let p2 = vAC.normalized().times(t).plus(Qt.vector2d(a.x, a.y))
+
+            if (i === 0) {
+                path.startX = p1.x
+                path.startY = p1.y
+            } else {
+                let pathLine = myPathLine.createObject(path)
+                pathLine.x = p1.x
+                pathLine.y = p1.y
+                path.pathElements.push(pathLine)
+            }
+
+            let pathArc = myPathArc.createObject(path)
+            pathArc.x = p2.x
+            pathArc.y = p2.y
+            pathArc.radiusX = r
+            pathArc.radiusY = r
+
+            path.pathElements.push(pathArc)
+        }
+
+        // Close the polygon
+        var pathLineClose = myPathLine.createObject(path)
+        pathLineClose.x = path.startX
+        pathLineClose.y = path.startY
+        path.pathElements.push(pathLineClose)
+    }
+
+    function clearPathElements() {
+        for (var i = 0; i !== path.pathElements.length; ++i)
+            path.pathElements[i].destroy()
+
+        path.pathElements = []
+    }
+}

Dependencies/Components/imports/components/StarItem.qml

@@ -0,0 +1,410 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Shapes
+
+/*!
+    \qmltype Star
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Shape
+
+    \brief A filled star-shaped polygon with an optional border.
+
+    A star can be a star shaped stroke, a filling, or a stroke with filling. The \l strokeColor,
+    \l strokeWidth, and \l strokeStyle properties specify the appearance of the outline. The
+    \l dashPattern and \l dashOffset properties specify the appearance of dashed stroke.
+
+    Set the \l count property between 3 and 60 to specify the number of points of the star. Set the
+    \l ratio between 0.1 and 1 to specify the distance of the inner points of the star from the
+    center.
+
+    The area inside the stroke is painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are specified, the gradient is
+    used.
+
+    To create a star with a stroke, set the \l strokeWidth property to a value greater than 0. The
+    \l strokeWidth property specifies the width of the polygon stroke.The default \l count value is
+    6 and the default \l strokeWidth value is 4. Setting the \l strokeWidth value to a negative
+    value hides the border.
+
+    The \l radius property specifies whether the star corners are rounded. Because this introduces
+    curved edges to the corners, it may be appropriate to set the \c antialiasing property that is
+    inherited from \l Item to improve the appearance of the stroke.
+
+    \section2 Example Usage
+
+    \image studio-star.webp
+
+    The QML code looks as follows:
+
+    \code
+
+    StarItem {
+        id: star
+        x: 621
+        y: 433
+        width: 142
+        height: 142
+        radius: 10
+    }
+
+    StarItem {
+        id: star1
+        x: 786
+        y: 433
+        width: 142
+        height: 142
+        radius: 1
+        gradient: RadialGradient {
+            GradientStop {
+                position: 0
+                color: "#ce9d9d"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#000000"
+            }
+            focalY: star1.height * 0.5
+            focalX: star1.width * 0.5
+            focalRadius: Math.min(star1.width, star1.height) * 0
+            centerY: star1.height * 0.5
+            centerX: star1.width * 0.5
+            centerRadius: Math.min(star1.width, star1.height) * 0.5
+        }
+        count: 7
+    }
+
+    StarItem {
+        id: star2
+        x: 786
+        y: 603
+        width: 142
+        height: 142
+        radius: 1
+        fillColor: "#00ffffff"
+        strokeColor: "#000000"
+        ratio: 0.2
+        count: 3
+    }
+
+    StarItem {
+        id: star3
+        x: 621
+        y: 603
+        width: 142
+        height: 142
+        radius: 1
+        gradient: LinearGradient {
+            y2: star3.height * 1
+            y1: star3.height * 0
+            x2: star3.width * 1
+            x1: star3.width * 0
+
+            GradientStop {
+                position: 0
+                color: "#ff8686"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#5c5e5d"
+            }
+        }
+        strokeColor: "#00ff0000"
+        ratio: 0.6
+        count: 25
+    }
+
+    \endcode
+*/
+
+Shape {
+    id: root
+    width: 200
+    height: 200
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-radius} {10}
+*/
+    property int radius: 10
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-gradient} {star}
+*/
+    property alias gradient: path.fillGradient
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-joinStyle
+*/
+    //property alias joinStyle: path.joinStyle
+    property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
+    //property alias capStyle: path.capStyle
+    property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {star}
+*/
+    //property alias strokeStyle: path.strokeStyle
+    property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {star}
+*/
+    property alias strokeWidth: path.strokeWidth
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {star}
+*/
+    property alias strokeColor: path.strokeColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {star}
+*/
+    property alias dashPattern: path.dashPattern
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {star}
+*/
+    property alias fillColor: path.fillColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {star}
+*/
+    property alias dashOffset: path.dashOffset
+
+/*!
+    The number of points in the star. It supports a minimum of 3 and a maximum of 60 points. Set the
+    count to 3 and the \l ratio to 0.5 to create a triangle.
+
+    The default value is 6.
+*/
+    property int count: 6
+
+/*!
+    The distance of the inner points of the star from the center. This
+    is represented as percentage of the star's diameter.
+
+    The default value is 0.5.
+*/
+    property real ratio: 0.5
+
+    property bool __preferredRendererTypeAvailable: root.preferredRendererType !== "undefined"
+    property bool __curveRendererActive: root.__preferredRendererTypeAvailable
+                                         && root.rendererType === Shape.CurveRenderer
+
+    layer.enabled: root.antialiasing && !root.__curveRendererActive
+    layer.smooth: root.antialiasing && !root.__curveRendererActive
+    layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
+
+    // This is used to make the bounding box of the item a bit bigger so it will draw sharp edges
+    // in case of large stroke width instead of cutting it off.
+    Item {
+        anchors.fill: parent
+        anchors.margins: -root.strokeWidth
+    }
+
+    ShapePath {
+        id: path
+
+        capStyle: root.capStyle
+        strokeStyle: root.strokeStyle
+        joinStyle: root.joinStyle
+
+        strokeWidth: 4
+        strokeColor: "red"
+        startX: 0
+        startY: 0
+    }
+
+    onWidthChanged: root.constructPolygon()
+    onHeightChanged: root.constructPolygon()
+    onCountChanged: root.constructPolygon()
+    onRadiusChanged: root.constructPolygon()
+    onRatioChanged: root.constructPolygon()
+
+    Component.onCompleted: {
+        // If preferredRendererType wasn't set initially make CurveRenderer the default
+        if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
+            root.preferredRendererType = Shape.CurveRenderer
+
+        root.constructPolygon()
+    }
+
+    property real __centerX: root.width / 2
+    property real __centerY: root.height / 2
+
+    Component {
+        id: myPathLine
+        PathLine {}
+    }
+
+    Component {
+        id: myPathArc
+        PathArc {}
+    }
+
+    function constructPolygon() {
+        root.clearPathElements()
+
+        if (root.radius === 0)
+            root.constructPolygonPath()
+        else
+            root.constructRoundedPolygonPath()
+    }
+
+    function toRadians(degrees) {
+        return degrees * (Math.PI / 180.0)
+    }
+
+    function toDegrees(radians) {
+        return radians * (180.0 / Math.PI)
+    }
+
+    function getPoints() {
+        let numPoints =  root.count * 2
+        let sliceAngle = (360.0 / numPoints)
+        // The Draftsman's Method
+        let a = root.width / 2 // x-radius
+        let b = root.height / 2 // y-radius
+        let points = []
+        let r = Math.min(Math.max(root.ratio, 0.001), 1.0)
+
+        for (var corner = 0; corner < numPoints; corner++) {
+            let angleToCorner = root.toRadians(corner * sliceAngle)
+            // Start at top center
+            let x = root.__centerX + a * Math.sin(angleToCorner)
+            let y = root.__centerY - b * Math.cos(angleToCorner)
+
+            // If the corner is an odd number, move the point towards the center by the ratio (0.001 - 1.0)
+            if (corner % 2 === 1) {
+                let vec = Qt.vector2d(x - root.__centerX, y - root.__centerY)
+                let vecLength = vec.length()
+                vec = vec.normalized().times(vecLength * r)
+
+                x = root.__centerX + vec.x
+                y = root.__centerY + vec.y
+            }
+
+            points.push(Qt.point(x ,y))
+        }
+
+        return points
+    }
+
+    function constructPolygonPath() {
+        let angle = (360.0 / root.sideCount)
+        let points = root.getPoints()
+
+        for (var i = 0; i < points.length; i++) {
+            if (i === 0) {
+                path.startX = points[i].x
+                path.startY = points[i].y
+            } else {
+                let pathLine = myPathLine.createObject(path)
+                pathLine.x = points[i].x
+                pathLine.y = points[i].y
+                path.pathElements.push(pathLine)
+            }
+        }
+
+        // Close the polygon
+        var pathLineClose = myPathLine.createObject(path)
+        pathLineClose.x = points[0].x
+        pathLineClose.y = points[0].y
+        path.pathElements.push(pathLineClose)
+    }
+
+    function wrapIndex(index, size) {
+        return (index + size) % size
+    }
+
+    function constructRoundedPolygonPath() {
+        let angle = (360.0 / root.sideCount)
+        let points = root.getPoints()
+
+        for (var i = 0; i < points.length; i++) {
+            let a = points[root.wrapIndex(i, points.length)]
+            let b = points[root.wrapIndex(i - 1, points.length)]
+            let c = points[root.wrapIndex(i + 1, points.length)]
+
+            let vAB = Qt.vector2d(b.x - a.x, b.y - a.y)
+            let vAC = Qt.vector2d(c.x - a.x, c.y - a.y)
+
+            let alpha = Math.acos(vAB.dotProduct(vAC) / (vAB.length() * vAC.length())) // as radians
+
+            let t = root.radius * (1 / Math.tan(alpha / 2))
+
+            let p1 = vAB.normalized().times(t).plus(Qt.vector2d(a.x, a.y))
+            let p2 = vAC.normalized().times(t).plus(Qt.vector2d(a.x, a.y))
+
+
+            if (i === 0) {
+                path.startX = p1.x
+                path.startY = p1.y
+            } else {
+                let pathLine = myPathLine.createObject(path)
+                pathLine.x = p1.x
+                pathLine.y = p1.y
+                path.pathElements.push(pathLine)
+            }
+
+            let pathArc = myPathArc.createObject(path)
+            pathArc.x = p2.x
+            pathArc.y = p2.y
+            pathArc.radiusX = root.radius
+            pathArc.radiusY = root.radius
+
+            if (i % 2 === 1)
+                pathArc.direction = PathArc.Counterclockwise
+
+            path.pathElements.push(pathArc)
+        }
+
+        // Close the polygon
+        var pathLineClose = myPathLine.createObject(path)
+        pathLineClose.x = path.startX
+        pathLineClose.y = path.startY
+        path.pathElements.push(pathLineClose)
+    }
+
+    function clearPathElements() {
+        for (var i = 0; i !== path.pathElements.length; ++i)
+            path.pathElements[i].destroy()
+
+        path.pathElements = []
+    }
+}

Dependencies/Components/imports/components/StraightArrow.qml

@@ -0,0 +1,97 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+
+Item {
+
+    width: 200
+    height: 200
+    id: root
+    property bool flip: false
+    property bool rotate: false
+
+    property int thickness: 45
+
+    property int arrowSize: 80
+
+    property int radius: 5
+    property color color: "#b6b3b3"
+
+    property bool corner: false
+
+    property bool flipCorner: false
+
+    Item {
+        id: content
+        implicitWidth: Math.max(16, childrenRect.width + childrenRect.x)
+        implicitHeight: Math.max(16, childrenRect.height + childrenRect.y)
+        anchors.centerIn: parent
+
+        scale: root.flip ? -1 : 1
+        rotation: root.rotate ? 90 : 0
+
+        TriangleItem {
+            id: triangle
+            x: 0
+            y: 0
+            anchors.verticalCenter: rectangle.verticalCenter
+            rotation: -90
+            strokeWidth: -1
+            width: root.arrowSize
+            height: root.arrowSize
+            radius: root.radius
+            fillColor: root.color
+        }
+
+        RectangleItem {
+            id: rectangle
+            x: root.arrowSize - root.radius * 2
+            //y: ((root.rotate ? root.width : root.height) - root.thickness) / 2
+            width: (root.rotate ? root.height : root.width) - (root.arrowSize - root.radius * 2)
+            height: root.thickness
+            strokeWidth: -1
+            radius: root.radius
+            fillColor: root.color
+        }
+        RectangleItem {
+            id: rectangle1
+            x: 260
+            y: 202
+            width: root.corner ? root.thickness : 0
+            strokeWidth: -1
+            height: root.corner ? (root.rotate ? root.width : root.height) / 2 : 0
+            anchors.bottom: root.flipCorner ? undefined : rectangle.verticalCenter
+            anchors.top: root.flipCorner ? rectangle.verticalCenter : undefined
+            anchors.right: rectangle.right
+            fillColor: root.color
+            visible: root.corner
+        }
+    }
+}

Dependencies/Components/imports/components/SvgPathItem.qml

@@ -0,0 +1,231 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Shapes
+
+/*!
+    \qmltype SvgPathItem
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Shape
+
+    \brief A path defined using an SVG path data string.
+
+    The SvgPathItem type uses an SVG path data string to draw a path as a line.
+
+    The \l strokeColor, \l strokeWidth, and \l strokeStyle, properties specify the appearance of the
+    path. The \l dashPattern and \l dashOffset properties specify the appearance of dashed lines.
+
+    The \l capStyle property specifies whether line ends are square or rounded.
+
+    The \l joinStyle property specifies how to connect two path segments. If the path segments
+    enclose areas, they can be painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are specified, the gradient is
+    used.
+
+    If the path has curves, it may be appropriate to set the \c antialiasing property that is
+    inherited from \l Item to improve its appearance.
+
+    \section2 Example Usage
+
+    \image studio-svgpathitem.webp
+
+    The QML code looks as follows:
+
+    \code
+        SvgPathItem {
+            id: sVGPathItem
+            x: 2
+            y: 3
+            width: 152
+            height: 154
+            strokeWidth: 4
+            strokeColor: "black"
+            path: "M127.99,0 L150.061,124.052 L22.0704,146.823 L0,22.7711 L127.99,0"
+            fillColor: "transparent"
+        }
+
+        SvgPathItem {
+            id: sVGPathItem1
+            x: 56.32
+            y: 44.32
+            width: 150.06
+            height: 146.82
+            strokeWidth: 4
+            strokeColor: "black"
+            path: "M127.99,0 L150.061,124.052 L22.0704,146.823 L0,22.7711 L127.99,0"
+            fillColor: "transparent"
+        }
+
+        SvgPathItem {
+            id: sVGPathItem2
+            x: 3.18
+            y: 27.38
+            width: 55
+            height: 40
+            strokeWidth: 4
+            strokeColor: "black"
+            path: "M0,0 L55,40"
+            fillColor: "transparent"
+        }
+
+        SvgPathItem {
+            id: sVGPathItem3
+            x: 130.21
+            y: 2.41
+            width: 55
+            height: 42
+            strokeWidth: 4
+            strokeColor: "black"
+            path: "M0,0 L55,42"
+            fillColor: "transparent"
+        }
+
+        SvgPathItem {
+            id: sVGPathItem4
+            x: 22
+            y: 148
+            width: 56
+            height: 43
+            strokeWidth: 4
+            strokeColor: "black"
+            path: "M0,0 L54,40"
+            fillColor: "transparent"
+        }
+
+        SvgPathItem {
+            id: sVGPathItem5
+            x: 151.21
+            y: 126.41
+            width: 55
+            height: 42
+            strokeWidth: 4
+            strokeColor: "black"
+            path: "M0,0 L55,42"
+            fillColor: "transparent"
+        }
+        clip: false
+    \endcode
+
+*/
+
+Shape {
+    id: root
+    width: 200
+    height: 200
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-gradient} {SVG Path Item}
+*/
+    property alias gradient: shape.fillGradient
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-joinStyle
+*/
+    //property alias joinStyle: path.joinStyle
+    property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
+    //property alias capStyle: path.capStyle
+    property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {SVG Path Item}
+*/
+    //property alias strokeStyle: path.strokeStyle
+    property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {SVG Path Item}
+*/
+    property alias strokeWidth: shape.strokeWidth
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {SVG Path Item}
+*/
+    property alias strokeColor: shape.strokeColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {SVG Path Item}
+*/
+    property alias dashPattern: shape.dashPattern
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {SVG Path Item}
+*/
+    property alias fillColor: shape.fillColor
+
+/*!
+    \qmlproperty string SvgPathItem::path
+
+    The SVG path data string specifying the path.
+
+    For more information, see \l{https://www.w3.org/TR/SVG/paths.html#PathData} {W3C SVG Path Data}.
+*/
+    property alias path: pathSvg.path
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {SVG Path Item}
+*/
+    property alias dashOffset: shape.dashOffset
+
+    property bool __preferredRendererTypeAvailable: root.preferredRendererType !== undefined
+    property bool __curveRendererActive: root.__preferredRendererTypeAvailable
+                                         && root.rendererType === Shape.CurveRenderer
+
+    layer.enabled: root.antialiasing && !root.__curveRendererActive
+    layer.smooth: root.antialiasing && !root.__curveRendererActive
+    layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
+
+    ShapePath {
+        id: shape
+        strokeWidth: 4
+        strokeColor: "red"
+        capStyle: root.capStyle
+        strokeStyle: root.strokeStyle
+        joinStyle: root.joinStyle
+
+
+        PathSvg {
+            id: pathSvg
+
+            path: "M91,70.6c4.6,0,8.6,2.4,10.9,6.3l19.8,34.2c2.3,3.9,2.3,8.7,0,12.6c-2.3,3.9-6.4,6.3-10.9,6.3H71.2 c-4.6,0-8.6-2.4-10.9-6.3c-2.3-3.9-2.3-8.7,0-12.6l19.8-34.2C82.4,72.9,86.4,70.6,91,70.6z"
+        }
+    }
+
+    Component.onCompleted: {
+        // If preferredRendererType wasn't set initially make CurveRenderer the default
+        if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
+            root.preferredRendererType = Shape.CurveRenderer
+    }
+}

Dependencies/Components/imports/components/TextItem.qml

@@ -0,0 +1,270 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Shapes
+
+/*!
+    \qmltype Text
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Shape
+    \inherits Text
+
+    \brief A filled text with an optional border.
+
+    A text can be a text shaped stroke, a filling, or a stroke with filling. The
+    \l strokeColor, \l strokeWidth, and \l strokeStyle properties specify the appearance of the
+    outline. The \l dashPattern and \l dashOffset properties specify the appearance of a dashed
+    stroke.
+
+    The area inside the text is painted using either a solid fill color, specified using the
+    \l fillColor property, or a gradient, defined using one of the \l ShapeGradient subtypes and set
+    using the \l gradient property. If both a color and a gradient are specified, the gradient is
+    used.
+
+    To create a text with a stroke, set a \l strokeWidth property that is greater than 0. The
+    \l strokeWidth property specifies the width of the text stroke. The default \l strokeWidth
+    value is 4. Setting the \l strokeWidth value to -1 hides the border.
+
+    Text supports only plain strings. The \l font properties are applied to the \l text.
+
+    \section2 Example Usage
+
+    \image studio-text.webp
+
+    The QML code looks as follows:
+
+    \code
+    TextItem {
+        id: _text
+        x: 874
+        y: 213
+        text: qsTr("Qt")
+        font.pixelSize: 120
+        fillColor: "#00ffffff"
+        strokeColor: "#1e8f00"
+        font.bold: true
+        strokeWidth: 2
+    }
+
+    TextItem {
+        id: _text1
+        x: 1033
+        y: 213
+        text: qsTr("Qt")
+        font.pixelSize: 120
+        gradient: LinearGradient {
+            y2: _text1.height * 1
+            y1: _text1.height * 0
+            x2: _text1.width * 1
+            x1: _text1.width * 0
+            GradientStop {
+                position: 0
+                color: "#00d158"
+            }
+
+            GradientStop {
+                position: 0.55263
+                color: "#ffffff"
+            }
+        }
+        strokeWidth: 2
+        strokeColor: "#ff0000"
+        font.bold: true
+    }
+
+    TextItem {
+        id: _text2
+        x: 874
+        y: 402
+        text: qsTr("Qt")
+        font.pixelSize: 120
+        strokeStyle: 3
+        strokeWidth: 2
+        strokeColor: "#474747"
+        font.bold: true
+    }
+
+    TextItem {
+        id: _text3
+        x: 1033
+        y: 402
+        text: qsTr("Qt")
+        font.pixelSize: 120
+        gradient: RadialGradient {
+            focalY: _text3.height * 0.5
+            focalX: _text3.width * 0.5
+            focalRadius: Math.min(_text3.width, _text3.height) * 0
+            centerY: _text3.height * 0.5
+            centerX: _text3.width * 0.5
+            centerRadius: Math.min(_text3.width, _text3.height) * 0.5
+
+            GradientStop {
+                position: 0.10526
+                color: "#00ffab"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#ff000000"
+            }
+        }
+        strokeWidth: -1
+        strokeColor: "#1e8f00"
+        font.bold: true
+    }
+    \endcode
+*/
+
+Shape {
+    id: root
+    width: textMetrics.advanceWidth
+    height: Math.ceil(textMetrics.height) // TODO
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-gradient} {text}
+*/
+    property alias gradient: path.fillGradient
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-joinStyle
+*/
+    //property alias joinStyle: path.joinStyle
+    property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
+    //property alias capStyle: path.capStyle
+    property int capStyle: ShapePath.SquareCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+ /*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {text}
+*/
+    //property alias strokeStyle: path.strokeStyle
+    property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {text}
+*/
+    property alias strokeWidth: path.strokeWidth
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {text}
+*/
+    property alias strokeColor: path.strokeColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {text}
+*/
+    property alias dashPattern: path.dashPattern
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {text}
+*/
+    property alias fillColor: path.fillColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {text}
+*/
+    property alias dashOffset: path.dashOffset
+
+/*!
+    The font properties for the \l text. Change the \l {QFont::family} {family},
+    \l {QFont::letterSpacing} {letterSpacing}, \l {QFont::pixelSize} {pixelSize},
+    \l {QFont::wordSpacing} {wordSpacing}, \l {QFont::weight} {weight} of the \l text using these
+    properties.You can also set wheather the \l text has auto \l {QFont::kerning} {kerning} or if it
+    follows the \l {QtQuick::Text::font.preferShaping} {preferShaping} using the font specific
+    features. Also sets your preferred font \l {QFont::capitalization} {capitalization} method and
+    \l {QFont::styleName} {styleName} for the \l text.
+
+    \sa QFont Text
+*/
+    property alias font: pathText.font
+
+/*!
+    The text to display. Text supports only plain strings.
+
+    \sa QFont Text
+*/
+    property alias text: pathText.text
+
+    property bool __preferredRendererTypeAvailable: root.preferredRendererType !== "undefined"
+    property bool __curveRendererActive: root.__preferredRendererTypeAvailable
+                                         && root.rendererType === Shape.CurveRenderer
+
+    layer.enabled: root.antialiasing && !root.__curveRendererActive
+    layer.smooth: root.antialiasing && !root.__curveRendererActive
+    layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
+
+    // This is used to make the bounding box of the item a bit bigger so it will draw sharp edges
+    // in case of large stroke width instead of cutting it off.
+    Item {
+        anchors.fill: parent
+        anchors.margins: -root.strokeWidth
+    }
+
+    ShapePath {
+        id: path
+
+        capStyle: root.capStyle
+        strokeStyle: root.strokeStyle
+        joinStyle: root.joinStyle
+
+        strokeWidth: 4
+        strokeColor: "red"
+        startX: 0
+        startY: 0
+
+        PathText {
+            id: pathText
+            x: 0
+            y: fontMetrics.height + textMetrics.tightBoundingRect.y - fontMetrics.descent
+            font.family: "Arial"
+        }
+    }
+
+    TextMetrics {
+        id: textMetrics
+        font: pathText.font
+        text: pathText.text
+    }
+
+    FontMetrics {
+        id: fontMetrics
+        font: pathText.font
+    }
+
+    Component.onCompleted: {
+        // If preferredRendererType wasn't set initially make CurveRenderer the default
+        if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
+            root.preferredRendererType = Shape.CurveRenderer
+    }
+}

Dependencies/Components/imports/components/TriangleItem.qml

@@ -0,0 +1,428 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Shapes
+
+/*!
+    \qmltype Triangle
+    \inqmlmodule QtQuick.Studio.Components
+    \since QtQuick.Studio.Components 1.0
+    \inherits Shape
+
+    \brief A triangle.
+
+    The Triangle type can be used to draw triangles with different dimensions and shapes. The type
+    is enclosed in an invisible \l Rectangle type. The size of the triangle is determined by the
+    size of the bounding rectangle. The dimensions of the triangle can be changed to make it
+    elongated or squat with space around it by using the \l leftMargin, \l topMargin, \l rightMargin,
+    and \l bottomMargin properties. The margins are set between the triangle and the edges of the
+    parent rectangle.
+
+    Each Triangle item is painted using either a solid fill color, specified using the \l fillColor
+    property, or a gradient, defined using one of the \l ShapeGradient subtypes and set using the
+    \l gradient property. If both a color and a gradient are specified, the gradient is used.
+
+    An optional border can be added to a triangle with its own color and thickness by setting the
+    \l strokeColor and \l strokeWidth properties. Setting the color to \c transparent creates a
+    border without a fill color.
+
+    \section2 Example Usage
+
+    You can use the Triangle component in \QDS to create triangles in different shapes and colors.
+
+    \image studio-triangle.webp
+
+    The QML code looks as follows:
+
+    \code
+    TriangleItem {
+        id: triangle
+        x: 845
+        y: 265
+        strokeColor: "gray"
+        fillColor: "light gray"
+    }
+
+    TriangleItem {
+        id: squatTriangle
+        x: 1009
+        y: 265
+        bottomMargin: 10
+        topMargin: 30
+        fillColor: "#d3d3d3"
+        strokeColor: "#808080"
+    }
+
+    TriangleItem {
+        id: elongatedTriangle
+        x: 845
+        y: 394
+        rightMargin: 10
+        leftMargin: 10
+        fillColor: "#d3d3d3"
+        strokeColor: "#808080"
+    }
+
+    TriangleItem {
+        id: pear
+        x: 1009
+        y: 394
+        radius: 20
+        fillColor: "light gray"
+        bottomMargin: 10
+        arcRadius: 20
+        strokeColor: "#808080"
+    }
+    \endcode
+*/
+
+Shape {
+    id: root
+
+    width: 100
+    height: 100
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-gradient} {triangle}
+*/
+    property alias gradient: path.fillGradient
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeWidth} {triangle}
+*/
+    property alias strokeWidth: path.strokeWidth
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeColor} {triangle}
+*/
+    property alias strokeColor: path.strokeColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashPattern} {triangle}
+*/
+    property alias dashPattern: path.dashPattern
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-joinStyle
+*/
+    //property alias joinStyle: path.joinStyle
+    property int joinStyle: ShapePath.MiterJoin //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc component-capStyle
+*/
+    //property alias capStyle: path.capStyle
+    property int capStyle: ShapePath.FlatCap //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-strokeStyle} {triangle}
+*/
+    //property alias strokeStyle: path.strokeStyle
+    property int strokeStyle: ShapePath.SolidLine //workaround for regression in Qt 6.6.1 (QDS-11845)
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-fillColor} {triangle}
+*/
+    property alias fillColor: path.fillColor
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-dashOffset} {triangle}
+*/
+    property alias dashOffset: path.dashOffset
+
+    property int pLineXStart
+    property int pLineXEnd
+    property int pLineYStart
+    property int pLineYEnd
+
+    property point topIntersection1
+    property point topIntersection2
+    property point leftIntersection1
+    property point leftIntersection2
+    property point rightIntersection1
+    property point rightIntersection2
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-radius} {5}
+
+    This property can be used together with the \l arcRadius property to determine the shape of the
+    triangle.
+
+    \sa arcRadius
+*/
+    property int radius: 5
+
+/*!
+    \include CommonItemDescriptions.qdocinc {component-radius} {5}
+
+    This property can be used together with the \l radius property to
+    determine the shape of the triangle.
+*/
+    property real arcRadius: root.radius
+
+/*!
+    The left margin between the triangle and the bounding rectangle.
+    Setting the left and right margins makes the triangle thinner and moves it away from the edge.
+
+    \sa rightMargin, topMargin, bottomMargin
+*/
+    property real leftMargin: 0
+
+/*!
+    The top margin between the triangle and the bounding rectangle.
+    Setting the top and bottom margins makes the triangle lower and moves it away from the edge.
+
+    \sa bottomMargin, leftMargin, rightMargin
+*/
+    property real topMargin: 0
+
+/*!
+    The right margin between the triangle and the bounding rectangle.
+    Setting the left and right margins makes the triangle thinner and moves it away from the edge.
+
+    \sa leftMargin, topMargin, bottomMargin
+*/
+    property real rightMargin: 0
+
+/*!
+    \qmlproperty real Triangle::bottomMargin
+
+    The top margin between the triangle and the bounding rectangle.
+    Setting the top and bottom margins makes the triangle shorter and moves it away from the edge.
+
+    \sa topMargin, leftMargin, rightMargin
+*/
+    property real bottomMargin: 0
+
+    property int maxRadius: 0
+
+    property bool __preferredRendererTypeAvailable: root.preferredRendererType !== undefined
+    property bool __curveRendererActive: root.__preferredRendererTypeAvailable
+                                         && root.rendererType === Shape.CurveRenderer
+
+    layer.enabled: root.antialiasing && !root.__curveRendererActive
+    layer.smooth: root.antialiasing && !root.__curveRendererActive
+    layer.samples: root.antialiasing && !root.__curveRendererActive ? 4 : 0
+
+    // This is used to make the bounding box of the item a bit bigger so it will draw sharp edges
+    // in case of large stroke width instead of cutting it off.
+    Item {
+        anchors.fill: parent
+        anchors.margins: -root.strokeWidth
+    }
+
+    ShapePath {
+        id: path
+
+        //property real __width: root.width - root.strokeWidth - root.leftMargin - root.rightMargin
+        //property real __height: root.height - root.strokeWidth - root.topMargin - root.bottomMargin
+        //property real xOffset: root.strokeWidth / 2 + root.leftMargin
+        //property real yOffset: root.strokeWidth / 2 + root.topMargin
+
+        property real __width: root.width - root.leftMargin - root.rightMargin
+        property real __height: root.height - root.topMargin - root.bottomMargin
+        property real xOffset: root.leftMargin
+        property real yOffset: root.topMargin
+
+        strokeWidth: 4
+        strokeColor: "red"
+        capStyle: root.capStyle
+        strokeStyle: root.strokeStyle
+        joinStyle: root.joinStyle
+
+        startX: root.topIntersection1.x + path.xOffset
+        startY: root.topIntersection1.y + path.yOffset
+
+        PathArc {
+            radiusX: Math.max(root.arcRadius, 1)
+            radiusY: Math.max(root.arcRadius, 1)
+
+            x: root.topIntersection2.x + path.xOffset
+            y: root.topIntersection2.y + path.yOffset
+        }
+
+        PathLine {
+            x: root.rightIntersection1.x + path.xOffset
+            y: root.rightIntersection1.y + path.yOffset
+        }
+
+        PathArc {
+            radiusX: Math.max(root.arcRadius, 1)
+            radiusY: Math.max(root.arcRadius, 1)
+
+            x: root.rightIntersection2.x + path.xOffset
+            y: root.rightIntersection2.y + path.yOffset
+        }
+
+        PathLine {
+            x: root.leftIntersection1.x + path.xOffset
+            y: root.leftIntersection1.y + path.yOffset
+        }
+
+        PathArc {
+            radiusX: Math.max(root.arcRadius, 1)
+            radiusY: Math.max(root.arcRadius, 1)
+
+            x: root.leftIntersection2.x + path.xOffset
+            y: root.leftIntersection2.y + path.yOffset
+        }
+
+        PathLine {
+            x: root.topIntersection1.x + path.xOffset
+            y: root.topIntersection1.y + path.yOffset
+        }
+    }
+
+    onWidthChanged: root.calc()
+    onHeightChanged: root.calc()
+
+    onRadiusChanged: root.calc()
+    onArcRadiusChanged: root.calc()
+
+    onTopMarginChanged: root.calc()
+    onBottomMarginChanged: root.calc()
+    onLeftMarginChanged: root.calc()
+    onRightMarginChanged: root.calc()
+
+    Component.onCompleted: {
+        // If preferredRendererType wasn't set initially make CurveRenderer the default
+        if (root.__preferredRendererTypeAvailable && root.preferredRendererType === Shape.UnknownRenderer)
+            root.preferredRendererType = Shape.CurveRenderer
+
+        root.calc()
+    }
+
+    function length(x, y) {
+        return Math.sqrt(x * x + y * y)
+    }
+
+    function normalize(x, y) {
+        var l = length(x, y)
+
+        return {
+            x: x / l,
+            y: y / l
+        }
+    }
+
+    function dotProduct(x1, y1, x2, y2) {
+        return x1 * x2 + y1 * y2;
+    }
+
+    function project(x1, y1, x2, y2) {
+        var normalized = normalize(x1, y1)
+
+        var dot = dotProduct(normalized.x, normalized.y, x2, y2)
+
+        return {
+            x: normalized.x * dot,
+            y: normalized.y * dot
+        }
+    }
+
+    function intersect(x1, y1, x2, y2, x3, y3, x4, y4) {
+        var denom = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
+
+        var ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denom
+        var ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denom
+        return {
+            x: x1 + ua * (x2 - x1),
+            y: y1 + ua * (y2 - y1)
+        };
+    }
+
+    function moveLine(startX, startY, endX, endY) {
+        var angle = Math.atan2(endY - startY, endX - startX)
+        var xOffset = Math.sin(angle) * Math.min(root.radius, root.maxRadius)
+        var yOffset = -Math.cos(angle) * Math.min(root.radius, root.maxRadius)
+
+        return {
+            startX: startX + xOffset,
+            startY: startY + yOffset,
+            endX: endX + xOffset,
+            endY: endY + yOffset
+        };
+    }
+
+    function calc() {
+        var movedLine1 = moveLine(path.__width / 2, 0, 0, path.__height)
+        var movedLine2 = moveLine(path.__width, path.__height, path.__width / 2, 0)
+        var movedLine3 = moveLine(0, path.__height, path.__width, path.__height)
+
+        var lengthLine1 = Math.floor(root.length(movedLine1.endX - movedLine1.startX,
+                                                 movedLine1.endY - movedLine1.startY))
+        var lengthLine2 = Math.floor(root.length(movedLine2.endX - movedLine2.startX,
+                                                 movedLine2.endY - movedLine2.startY))
+        var lengthLine3 = Math.floor(root.length(movedLine3.endX - movedLine3.startX,
+                                                 movedLine3.endY - movedLine3.startY))
+
+        var perimeter = lengthLine1 + lengthLine2 + lengthLine3
+        var area = (path.__height) * (path.__width) * 0.5
+
+        root.maxRadius = area * 2 / perimeter
+
+        var intersectionTop = root.intersect(movedLine1.startX, movedLine1.startY,
+                                             movedLine1.endX, movedLine1.endY,
+                                             movedLine2.startX, movedLine2.startY,
+                                             movedLine2.endX, movedLine2.endY)
+        var intersectionLeft = root.intersect(movedLine1.startX, movedLine1.startY,
+                                              movedLine1.endX, movedLine1.endY,
+                                              movedLine3.startX, movedLine3.startY,
+                                              movedLine3.endX, movedLine3.endY)
+        var intersectionRight = root.intersect(movedLine2.startX, movedLine2.startY,
+                                               movedLine2.endX, movedLine2.endY,
+                                               movedLine3.startX, movedLine3.startY,
+                                               movedLine3.endX, movedLine3.endY)
+
+        var leftBottom = root.project(1, 0, intersectionLeft.x, intersectionLeft.y)
+        var rightBottom = root.project(1, 0, intersectionRight.x, intersectionRight.y)
+
+        root.leftIntersection1 = Qt.point(leftBottom.x, leftBottom.y + path.__height)
+        root.rightIntersection2 = Qt.point(rightBottom.x, rightBottom.y + path.__height)
+
+        var leftTop = root.project(-path.__width / 2 , path.__height,
+                                   intersectionTop.x - path.__width / 2, intersectionTop.y)
+
+        leftBottom = root.project(-path.__width / 2 , path.__height,
+                                  intersectionLeft.x - path.__width / 2, intersectionLeft.y)
+
+        root.leftIntersection2 = Qt.point(leftBottom.x + path.__width / 2, leftBottom.y)
+        root.topIntersection1 = Qt.point(leftTop.x + path.__width / 2, leftTop.y)
+
+        var rightTop = root.project(path.__width / 2 , path.__height,
+                                    intersectionTop.x - path.__width / 2, intersectionTop.y)
+
+        rightBottom = root.project(path.__width / 2 , path.__height,
+                                   intersectionRight.x - path.__width / 2, intersectionRight.y)
+
+        root.topIntersection2 = Qt.point(rightTop.x + path.__width / 2, rightTop.y)
+        root.rightIntersection1 = Qt.point(rightBottom.x + path.__width / 2, rightBottom.y)
+    }
+}

Dependencies/Components/imports/components/plugins.qmltypes

@@ -0,0 +1,13 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by:
+// 'qmlplugindump -nonrelocatable -dependencies dependencies.json QtQuick.Controls 2.15'
+
+Module {
+    dependencies: [
+        "QtQuick 2.11"
+    ]
+}

Dependencies/Components/imports/components/qmldir

@@ -0,0 +1,15 @@
+ArcArrow 1.0 ArcArrow.qml
+ArcItem 1.0 ArcItem.qml
+BorderItem 1.0 BorderItem.qml
+EllipseItem 1.0 EllipseItem.qml
+FlipableItem 1.0 FlipableItem.qml
+GroupItem 1.0 GroupItem.qml
+IsoItem 1.0 IsoItem.qml
+PieItem 1.0 PieItem.qml
+RectangleItem 1.0 RectangleItem.qml
+RegularPolygonItem 1.0 RegularPolygonItem.qml
+StarItem 1.0 StarItem.qml
+StraightArrow 1.0 StraightArrow.qml
+SvgPathItem 1.0 SvgPathItem.qml
+TextItem 1.0 TextItem.qml
+TriangleItem 1.0 TriangleItem.qml

Dependencies/Components/imports/components/qtstudiocomponentsplugin.cpp

@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtQml/qqmlextensionplugin.h>
+
+QT_BEGIN_NAMESPACE
+
+class QtStudioComponentsPlugin: public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtStudioComponentsPlugin(QObject *parent = nullptr);
+    void registerTypes(const char *uri) override;
+};
+
+QtStudioComponentsPlugin::QtStudioComponentsPlugin(QObject *parent)
+    : QQmlExtensionPlugin(parent)
+{
+}
+
+void QtStudioComponentsPlugin::registerTypes(const char *)
+{
+}
+
+QT_END_NAMESPACE
+
+#include "qtstudiocomponentsplugin.moc"

Dependencies/Components/imports/designeffects/CMakeLists.txt

@@ -0,0 +1,40 @@
+qt_add_library(QuickStudioDesignEffects STATIC)
+qt6_add_qml_module(QuickStudioDesignEffects
+    URI "QtQuick.Studio.DesignEffects"
+    VERSION "${PROJECT_VERSION}"
+    DESIGNER_SUPPORTED
+    RESOURCE_PREFIX "/qt-project.org/imports"
+    PAST_MAJOR_VERSIONS 1
+    ${qds_qml_extra_args}
+    PAST_MAJOR_VERSIONS 1
+    QML_FILES
+        DesignBackgroundBlurPrivate.qml
+        DesignDropShadow.qml
+        DesignDropShadowPrivate.qml
+        DesignEffect.qml
+        DesignEffectPrivate.qml
+        DesignInnerShadow.qml
+        DesignInnerShadowPrivate.qml
+        DesignLayerBlurPrivate.qml
+)
+
+set_target_properties(QuickStudioDesignEffects PROPERTIES
+    QT_QMLCACHEGEN_EXECUTABLE qmlcachegen
+)
+
+qt6_add_shaders(QuickStudioDesignEffects "designeffectsshaders"
+    BATCHABLE
+    PRECOMPILE
+    OPTIMIZED
+    PREFIX
+        "/qt-project.org/imports/QtQuick/Studio/DesignEffects"
+    FILES
+        "shaders/dropShadow.frag"
+        "shaders/dropShadowClip.frag"
+        "shaders/gaussianBlur.frag"
+        "shaders/innerShadow.frag"
+        "shaders/innerShadowClip.frag"
+        "shaders/opacityMask.frag"
+)
+
+register_plugin(QuickStudioDesignEffects)

Dependencies/Components/imports/designeffects/DesignBackgroundBlurPrivate.qml

@@ -0,0 +1,177 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+
+Item {
+    id: root
+
+    property real radius: 10
+
+    /*required*/ property Item source
+    /*required*/ property Item background
+
+    readonly property real sourceRotation: root.source.rotation
+
+    readonly property size textureSize: Qt.size(root.targetRect.width,
+                                                root.targetRect.height)
+    readonly property vector2d pixelSize: Qt.vector2d(1.0 / root.textureSize.width,
+                                                      1.0 / root.textureSize.height)
+    readonly property real sigma: root.radius / 2.7
+
+    visible: true
+
+    width: root.source.width
+    height: root.source.height
+
+    rotation: -root.sourceRotation
+
+    property rect targetRect: Qt.rect(0, 0, 0, 0)
+
+    Connections {
+        target: root.background
+        function onXChanged() { root.sizeStuff() }
+        function onYChanged() { root.sizeStuff() }
+        function onWidthChanged() { root.sizeStuff() }
+        function onHeightChanged() { root.sizeStuff() }
+    }
+
+    Connections {
+        target: root.source
+
+        function onXChanged() { root.sizeStuff() }
+        function onYChanged() { root.sizeStuff() }
+        function onWidthChanged() { root.sizeStuff() }
+        function onHeightChanged() { root.sizeStuff() }
+        function onRotationChanged() { root.sizeStuff() }
+    }
+
+    onSourceChanged: root.sizeStuff()
+    onBackgroundChanged: root.sizeStuff()
+
+    function sizeStuff() {
+        if (root.background === null)
+            return
+
+        let tRect = Qt.rect(0, 0, root.source.width, root.source.height)
+        root.targetRect = root.background.mapFromItem(root.source, tRect)
+    }
+
+    //Component.onCompleted: console.log("Background Blur created!")
+
+    // TODO
+    // Check if target and background overlap
+    // Check if target is actually transparent
+
+    ShaderEffectSource {
+        id: shaderEffectSource
+        visible: false
+        width: root.width
+        height: root.height
+        sourceItem: root.background
+        sourceRect: root.targetRect
+    }
+
+    ShaderEffect {
+        id: blurHorizontal
+
+        property real blurKernel: root.radius
+        property real sigma: root.sigma
+        property var src: shaderEffectSource
+        property vector2d pixelSize: root.pixelSize.times(Qt.vector2d(1, 0))
+        property bool useOffscreenColor: false
+        property color offscreenColor: "transparent"
+
+        visible: false
+
+        width: root.textureSize.width
+        height: root.textureSize.height
+        anchors.centerIn: parent
+
+        layer.enabled: true
+        fragmentShader: "shaders/gaussianBlur.frag.qsb"
+    }
+
+    ShaderEffect {
+        id: blurVertical
+
+        property real blurKernel: root.radius
+        property real sigma: root.sigma
+        property var src: blurHorizontal
+        property vector2d pixelSize: root.pixelSize.times(Qt.vector2d(0, 1))
+        property bool useOffscreenColor: false
+        property color offscreenColor: "transparent"
+
+        visible: false
+
+        width: root.textureSize.width
+        height: root.textureSize.height
+        anchors.centerIn: parent
+
+        layer.enabled: true
+        fragmentShader: "shaders/gaussianBlur.frag.qsb"
+    }
+
+    Item {
+        id: wrapper
+        anchors.centerIn: parent
+
+        width: root.textureSize.width
+        height: root.textureSize.height
+
+        visible: false
+        layer.enabled: true
+
+        ShaderEffectSource {
+            id: shaderEffectSource2
+            visible: true
+            anchors.centerIn: parent
+            rotation: root.sourceRotation
+
+            width: root.source.width
+            height: root.source.height
+            sourceItem: root.source
+        }
+    }
+
+    ShaderEffect {
+        id: mask
+
+        property var source: blurVertical
+        property var maskSource: wrapper
+
+        visible: true
+
+        width: root.textureSize.width
+        height: root.textureSize.height
+
+        anchors.centerIn: parent
+        fragmentShader: "shaders/opacityMask.frag.qsb"
+    }
+}

Dependencies/Components/imports/designeffects/DesignDropShadow.qml

@@ -0,0 +1,43 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Controls
+
+QtObject {
+    property real blur: 4
+    property int offsetX: 0
+    property int offsetY: 4
+    property int spread: 0
+    property color color: "#3f000000" // black 25%
+    property bool showBehind: false
+    property bool visible: true
+
+    property string type: "DropShadow"
+}

Dependencies/Components/imports/designeffects/DesignDropShadowPrivate.qml

@@ -0,0 +1,204 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+
+Item {
+    id: root
+
+    property int horizontalOffset: 10
+    property int verticalOffset: 30
+    property int spread: 0
+    property color color: "black"
+    property real radius: 10
+
+    property bool showBehind: false
+
+    required property Item source
+
+    readonly property real sourceRotation: root.source.rotation
+    readonly property real radiusCeiled: Math.ceil(root.radius)
+
+    readonly property size orginialTextureSize: Qt.size(root.width + root.spread * 2,
+                                                        root.height + root.spread * 2)
+    readonly property real sigma: root.radius / 2.7
+
+    visible: true
+
+    width: root.source.width
+    height: root.source.height
+
+    //Component.onCompleted: console.log("Drop Shadow created!")
+
+    onSourceRotationChanged: root.calculateOffset()
+    onRadiusCeiledChanged: root.calculateOffset()
+    onSpreadChanged: root.calculateOffset()
+    onHorizontalOffsetChanged: root.calculateOffset()
+    onVerticalOffsetChanged: root.calculateOffset()
+
+    signal geometryChanged()
+
+    property point __offset: Qt.point(0, 0)
+
+    function calculateOffset() {
+        let mat = Qt.matrix4x4()
+        mat.translate(Qt.vector3d(-root.spread, -root.spread, 0))
+        mat.translate(Qt.vector3d(-root.radiusCeiled, -root.radiusCeiled, 0))
+        mat.rotate(-root.sourceRotation, Qt.vector3d(0, 0, 1))
+        root.__offset = mat.map(Qt.point(root.horizontalOffset, root.verticalOffset))
+        root.__offset = Qt.point(Math.round(root.__offset.x), Math.round(root.__offset.y))
+
+        root.geometryChanged()
+    }
+
+    readonly property bool copyActive: root.source instanceof Rectangle && root.spread !== 0
+
+    Rectangle {
+        id: sourceCopy
+        visible: false
+        width: Math.max(0, root.source.width + root.spread * 2)
+        height: Math.max(0, root.source.height + root.spread * 2)
+        radius: Math.max(0, root.source.radius !== 0 ? root.source.radius + root.spread : 0)
+        color: "black"
+    }
+
+    ShaderEffectSource {
+        id: shaderEffectSource
+        visible: false
+        width: root.orginialTextureSize.width
+        height: root.orginialTextureSize.height
+        sourceItem: root.copyActive ? sourceCopy : root.source
+    }
+
+    ShaderEffect {
+        id: shadow
+
+        property color color: root.color
+        property var src: shaderEffectSource
+
+        visible: false
+
+        width: root.orginialTextureSize.width
+        height: root.orginialTextureSize.height
+
+        layer.enabled: true
+        layer.sourceRect: Qt.rect(-root.radiusCeiled, -root.radiusCeiled,
+                                  root.bluredTextureSize.width, root.bluredTextureSize.height)
+
+        fragmentShader: "shaders/dropShadow.frag.qsb"
+    }
+
+    readonly property size bluredTextureSize: Qt.size(root.orginialTextureSize.width + root.radiusCeiled * 2,
+                                                      root.orginialTextureSize.height + root.radiusCeiled * 2)
+
+    readonly property vector2d bluredPixelSize: Qt.vector2d(1.0 / root.bluredTextureSize.width,
+                                                            1.0 / root.bluredTextureSize.height)
+
+    ShaderEffect {
+        id: blurHorizontal
+
+        property real blurKernel: root.radius
+        property real sigma: root.sigma
+        property var src: shadow
+        property vector2d pixelSize: root.bluredPixelSize.times(Qt.vector2d(1, 0))
+        property bool useOffscreenColor: false
+        property color offscreenColor: "transparent"
+
+        visible: false
+
+        width: root.bluredTextureSize.width
+        height: root.bluredTextureSize.height
+
+        layer.enabled: true
+        layer.smooth: true // Otherwise bluring artifacts
+
+        fragmentShader: "shaders/gaussianBlur.frag.qsb"
+    }
+
+    ShaderEffect {
+        id: blurVertical
+
+        property real blurKernel: root.radius
+        property real sigma: root.sigma
+        property var src: blurHorizontal
+        property vector2d pixelSize: root.bluredPixelSize.times(Qt.vector2d(0, 1))
+        property bool useOffscreenColor: false
+        property color offscreenColor: "transparent"
+
+        visible: root.showBehind
+
+        x: root.showBehind ? root.__offset.x : 0
+        y: root.showBehind ? root.__offset.y : 0
+
+        width: root.bluredTextureSize.width
+        height: root.bluredTextureSize.height
+
+        layer.enabled: !root.showBehind
+        layer.sourceRect: Qt.rect(Math.min(0, -root.__offset.x),
+                                  Math.min(0, -root.__offset.y),
+                                  root.offsetTextureSize.width,
+                                  root.offsetTextureSize.height)
+
+        fragmentShader: "shaders/gaussianBlur.frag.qsb"
+    }
+
+    readonly property size offsetTextureSize: Qt.size(root.bluredTextureSize.width + Math.abs(root.__offset.x),
+                                                      root.bluredTextureSize.height + Math.abs(root.__offset.y))
+
+    ShaderEffectSource {
+        id: originalSource
+        visible: false
+        width: root.offsetTextureSize.width
+        height: root.offsetTextureSize.height
+        sourceItem: root.source
+        sourceRect: Qt.rect(Math.min(0, root.__offset.x),
+                            Math.min(0, root.__offset.y),
+                            root.offsetTextureSize.width,
+                            root.offsetTextureSize.height)
+    }
+
+    ShaderEffect {
+        id: result
+        property var shadow: blurVertical
+        property var original: originalSource
+
+        visible: !root.showBehind
+
+        x: -Math.max(0, -root.__offset.x)
+        y: -Math.max(0, -root.__offset.y)
+        width: root.offsetTextureSize.width
+        height: root.offsetTextureSize.height
+
+        fragmentShader: "shaders/dropShadowClip.frag.qsb"
+    }
+
+    readonly property rect boundingBox: Qt.rect(result.x, result.y, result.width, result.height)
+
+    onBoundingBoxChanged: root.geometryChanged()
+}

Dependencies/Components/imports/designeffects/DesignEffect.qml

@@ -0,0 +1,107 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+
+Item {
+    id: root
+
+    // Use visible property to show and hide the effect.
+    visible: true
+
+    // This is an internal property used to manage the effect. Do not modify.
+    property Item __oldParent: null
+
+    // This is the main source for the effect. Set internally to the current parent item. Do not modify.
+    property Item source: null
+
+    property list<QtObject> effects
+
+    property bool layerBlurVisible: true
+    property real layerBlurRadius: 0
+    property bool backgroundBlurVisible: true
+    property real backgroundBlurRadius: 0
+
+    property Item backgroundLayer: null
+
+    property bool _isEffectItem: true
+
+    onParentChanged: {
+        if (root.__oldParent && root.__oldParent !== root.parent) {
+            root.__oldParent.layer.enabled = false
+            root.__oldParent.layer.effect = null
+            root.source = null
+            root.__oldParent.update()
+            root.__oldParent = null
+        }
+
+        if (root.parent) {
+            root.__oldParent = root.parent
+            if (root.visible) {
+                root.parent.layer.enabled = true
+                root.parent.layer.effect = effectComponent
+            }
+            root.source = root.parent
+        }
+    }
+
+    onVisibleChanged: {
+        if (root.parent == null)
+            return
+
+        if (root.visible) {
+            root.source = root.parent
+            root.parent.layer.enabled = true
+            root.parent.layer.effect = effectComponent
+        } else {
+            root.parent.layer.enabled = false
+            root.parent.layer.effect = null
+            root.source = null
+        }
+        root.parent.update()
+    }
+
+    Component {
+        id: effectComponent
+
+        DesignEffectPrivate {
+            id: effect
+            property bool __effect: true
+            source: root.source
+
+            effects: root.effects
+            layerBlurVisible: root.layerBlurVisible
+            layerBlurRadius: root.layerBlurRadius
+            backgroundBlurVisible: root.backgroundBlurVisible
+            backgroundBlurRadius: root.backgroundBlurRadius
+            background: root.backgroundLayer
+        }
+    }
+}
+

Dependencies/Components/imports/designeffects/DesignEffectPrivate.qml

@@ -0,0 +1,185 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import Qt.labs.qmlmodels
+
+Item {
+    id: root
+
+    required property Item source
+
+    property list<QtObject> effects
+
+    property Item background: null
+
+    property bool layerBlurVisible: true
+    property real layerBlurRadius: 0
+    property bool backgroundBlurVisible: true
+    property real backgroundBlurRadius: 0
+
+    onSourceChanged: root.source.antialiasing = false // Workaround
+
+    width: root.source.width
+    height: root.source.height
+
+    Component.onCompleted: root.calculateBoundingBox()
+
+    function clamp(input: real, min: real, max: real): real {
+
+        if (isNaN(input))
+            return 0
+
+        return Math.max(min, Math.min(input, max))
+    }
+
+    property rect effectBoundingBox: Qt.rect(0, 0, 0, 0)
+
+    function calculateBoundingBox() {
+        let x = 0
+        let y = 0
+        let width = root.width
+        let height = root.height
+
+        for (let i = 0; i < repeater.count; ++i) {
+            let item = repeater.itemAt(i)
+            if (item === null || !(item instanceof DesignDropShadowPrivate))
+                continue
+
+            let childRect = item.boundingBox
+
+            x = Math.min(x, childRect.x)
+            y = Math.min(y, childRect.y)
+            width = Math.max(width, childRect.width)
+            height = Math.max(height, childRect.height)
+
+            width += Math.max(0, -x) // TODO Understand
+            height += Math.max(0, -y)
+        }
+
+        root.effectBoundingBox = Qt.rect(x, y, width, height)
+    }
+
+    DesignLayerBlurPrivate {
+        id: layerBlur
+        visible: root.layerBlurVisible
+        radius: root.clamp(root.layerBlurRadius, 0, 250)
+
+        source: layerBlurSource
+
+        x: root.effectBoundingBox.x - Math.ceil(layerBlur.radius)
+        y: root.effectBoundingBox.y - Math.ceil(layerBlur.radius)
+    }
+
+    ShaderEffectSource {
+        id: layerBlurSource
+        visible: false
+        width: root.effectBoundingBox.width
+        height: root.effectBoundingBox.height
+        sourceItem: wrapper
+        sourceRect: root.effectBoundingBox
+        hideSource: root.layerBlurVisible
+
+        //samples: 4 // Workaround
+        //smooth: true
+    }
+
+    Item {
+        id: wrapper
+        anchors.fill: parent
+
+        DesignBackgroundBlurPrivate {
+            visible: root.backgroundBlurVisible
+                     && root.background !== null
+                     && root.backgroundBlurRadius !== 0
+
+            source: root.source
+
+            background: root.background
+            radius: root.clamp(root.backgroundBlurRadius, 0, 250)
+        }
+
+        ShaderEffectSource {
+            id: shaderEffectSource
+            visible: true
+            width: root.width
+            height: root.height
+            sourceItem: root.source
+            hideSource: true
+            z: 1
+            //samples: 4 // Workaround
+        }
+
+        Repeater {
+            id: repeater
+            model: root.effects
+
+            delegate: DelegateChooser {
+                role: "type"
+
+                DelegateChoice {
+                    roleValue: "DropShadow"
+                    DesignDropShadowPrivate {
+                        required property var modelData
+
+                        source: root.source
+
+                        horizontalOffset: root.clamp(modelData.offsetX, -0xffff, 0xffff)
+                        verticalOffset: root.clamp(modelData.offsetY, -0xffff, 0xffff)
+                        spread: root.clamp(modelData.spread, -2048, 2048)
+                        color: modelData.color
+                        radius: root.clamp(modelData.blur, 0, 250)
+                        showBehind: modelData.showBehind
+                        visible: modelData.visible
+
+                        onGeometryChanged: root.calculateBoundingBox()
+                    }
+                }
+
+                DelegateChoice {
+                    roleValue: "InnerShadow"
+                    DesignInnerShadowPrivate {
+                        required property var modelData
+
+                        source: root.source
+
+                        horizontalOffset: root.clamp(modelData.offsetX, -0xffff, 0xffff)
+                        verticalOffset: root.clamp(modelData.offsetY, -0xffff, 0xffff)
+                        spread: root.clamp(modelData.spread, -2048, 2048)
+                        color: modelData.color
+                        radius: root.clamp(modelData.blur, 0, 250)
+                        visible: modelData.visible
+
+                        z: 10
+                    }
+                }
+            }
+        }
+    }
+}

Dependencies/Components/imports/designeffects/DesignInnerShadow.qml

@@ -0,0 +1,43 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import QtQuick.Controls
+
+QtObject {
+    property real blur: 4
+    property int offsetX: 0
+    property int offsetY: 4
+    property int spread: 0
+    property color color: "#3f000000" // black 25%
+    property bool showBehind: false // This is a dummy property mirroring DropShadow
+    property bool visible: true
+
+    property string type: "InnerShadow"
+}

Dependencies/Components/imports/designeffects/DesignInnerShadowPrivate.qml

@@ -0,0 +1,179 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+
+Item {
+    id: root
+
+    property int horizontalOffset: 10
+    property int verticalOffset: 30
+    property int spread: 0
+    property color color: "black"
+    property real radius: 10
+
+    required property Item source
+
+    readonly property real sourceRotation: root.source.rotation
+
+    readonly property size textureSize: Qt.size(Math.max(root.width, root.width - root.spread * 2) + Math.abs(root.__offset.x),
+                                                Math.max(root.height, root.height - root.spread * 2) + Math.abs(root.__offset.y))
+    readonly property vector2d pixelSize: Qt.vector2d(1.0 / root.textureSize.width,
+                                                      1.0 / root.textureSize.height)
+    readonly property real sigma: root.radius / 2.7
+
+    visible: true
+
+    width: root.source.width
+    height: root.source.height
+
+    //Component.onCompleted: console.log("Inner Shadow created!")
+
+    onSourceRotationChanged: root.calculateOffset()
+    onSpreadChanged: root.calculateOffset()
+    onHorizontalOffsetChanged: root.calculateOffset()
+    onVerticalOffsetChanged: root.calculateOffset()
+
+    property point __offset: Qt.point(0, 0)
+
+    function calculateOffset() {
+        let mat = Qt.matrix4x4()
+        mat.rotate(-root.sourceRotation, Qt.vector3d(0, 0, 1))
+        root.__offset = mat.map(Qt.point(root.horizontalOffset, root.verticalOffset))
+        root.__offset = Qt.point(Math.round(root.__offset.x), Math.round(root.__offset.y))
+    }
+
+    readonly property bool copyActive: root.source instanceof Rectangle && root.spread !== 0
+
+    Rectangle {
+        id: sourceCopy
+        visible: false
+        width: Math.max(0, root.source.width - root.spread * 2)
+        height: Math.max(0, root.source.height - root.spread * 2)
+        radius: Math.max(0, root.source.radius !== 0 ? root.source.radius - root.spread : 0)
+        color: "black"
+    }
+
+    ShaderEffectSource {
+        id: shaderEffectSource
+        visible: false
+        width: root.textureSize.width
+        height: root.textureSize.height
+        sourceItem: root.copyActive ? sourceCopy : root.source
+        sourceRect: Qt.rect(Math.min(0, -root.__offset.x) - Math.max(0, root.spread),
+                            Math.min(0, -root.__offset.y) - Math.max(0, root.spread),
+                            root.textureSize.width,
+                            root.textureSize.height)
+    }
+
+    ShaderEffect {
+        id: shadow
+
+        property color color: root.color
+        property var src: shaderEffectSource
+
+        visible: false
+
+        width: root.textureSize.width
+        height: root.textureSize.height
+
+        layer.enabled: true
+
+        fragmentShader: "shaders/innerShadow.frag.qsb"
+    }
+
+    ShaderEffect {
+        id: blurHorizontal
+
+        property real blurKernel: root.radius
+        property real sigma: root.sigma
+        property var src: shadow
+        property vector2d pixelSize: root.pixelSize.times(Qt.vector2d(1, 0))
+        property bool useOffscreenColor: true
+        property color offscreenColor: root.color
+
+        visible: false
+
+        width: root.textureSize.width
+        height: root.textureSize.height
+
+        layer.enabled: true
+        layer.smooth: true // Otherwise bluring artifacts
+
+        fragmentShader: "shaders/gaussianBlur.frag.qsb"
+    }
+
+    ShaderEffect {
+        id: blurVertical
+
+        property real blurKernel: root.radius
+        property real sigma: root.sigma
+        property var src: blurHorizontal
+        property vector2d pixelSize: root.pixelSize.times(Qt.vector2d(0, 1))
+        property bool useOffscreenColor: true
+        property color offscreenColor: root.color
+
+        visible: false
+
+        width: root.textureSize.width
+        height: root.textureSize.height
+
+        layer.enabled: true
+        layer.smooth: true // Otherwise bluring artifacts
+
+        fragmentShader: "shaders/gaussianBlur.frag.qsb"
+    }
+
+    ShaderEffectSource {
+        id: originalSource
+        visible: false
+        hideSource: true
+        width: root.textureSize.width
+        height: root.textureSize.height
+        sourceItem: root.source
+        sourceRect: Qt.rect(Math.min(0, root.__offset.x) + Math.min(0, root.spread),
+                            Math.min(0, root.__offset.y) + Math.min(0, root.spread),
+                            root.textureSize.width,
+                            root.textureSize.height)
+    }
+
+    ShaderEffect {
+        property var shadow: blurVertical
+        property var original: originalSource
+
+        visible: true
+
+        x: -Math.max(0, -root.__offset.x) + Math.min(0, root.spread)
+        y: -Math.max(0, -root.__offset.y) + Math.min(0, root.spread)
+        width: root.textureSize.width
+        height: root.textureSize.height
+
+        fragmentShader: "shaders/innerShadowClip.frag.qsb"
+    }
+}

Dependencies/Components/imports/designeffects/DesignLayerBlurPrivate.qml

@@ -0,0 +1,102 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Studio Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+
+Item {
+    id: root
+
+    property real radius: 10
+
+    required property Item source
+
+    readonly property real radiusCeiled: Math.ceil(root.radius)
+
+    readonly property size textureSize: Qt.size(root.width + root.radiusCeiled * 2,
+                                                root.height + root.radiusCeiled * 2)
+    readonly property vector2d pixelSize: Qt.vector2d(1.0 / root.textureSize.width,
+                                                      1.0 / root.textureSize.height)
+    readonly property real sigma: root.radius / 2.7
+
+    visible: true
+
+    width: root.source?.width
+    height: root.source?.height
+
+    //Component.onCompleted: console.log("Layer Blur created!")
+
+    ShaderEffectSource {
+        id: shaderEffectSource
+        visible: false
+        width: root.width
+        height: root.height
+        sourceItem: root.source
+        sourceRect: Qt.rect(-root.radiusCeiled, -root.radiusCeiled,
+                            root.textureSize.width, root.textureSize.height)
+    }
+
+    ShaderEffect {
+        id: blurHorizontal
+
+        property real blurKernel: root.radius
+        property real sigma: root.sigma
+        property var src: shaderEffectSource
+        property vector2d pixelSize: root.pixelSize.times(Qt.vector2d(1, 0))
+        property bool useOffscreenColor: false
+        property color offscreenColor: "transparent"
+
+        visible: false
+
+        width: root.textureSize.width
+        height: root.textureSize.height
+
+        layer.enabled: true
+        layer.smooth: true // Otherwise bluring artifacts
+
+        fragmentShader: "shaders/gaussianBlur.frag.qsb"
+    }
+
+    ShaderEffect {
+        id: blurVertical
+
+        property real blurKernel: root.radius
+        property real sigma: root.sigma
+        property var src: blurHorizontal
+        property vector2d pixelSize: root.pixelSize.times(Qt.vector2d(0, 1))
+        property bool useOffscreenColor: false
+        property color offscreenColor: "transparent"
+
+        width: root.textureSize.width
+        height: root.textureSize.height
+
+        visible: true
+
+        fragmentShader: "shaders/gaussianBlur.frag.qsb"
+    }
+}

Dependencies/Components/imports/designeffects/plugins.qmltypes

@@ -0,0 +1,13 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by:
+// 'qmlplugindump -nonrelocatable -dependencies dependencies.json QtQuick.Controls 2.15'
+
+Module {
+    dependencies: [
+        "QtQuick 2.11"
+    ]
+}

Dependencies/Components/imports/designeffects/qmldir

@@ -0,0 +1,9 @@
+DesignBackgroundBlurPrivate 1.0 DesignBackgroundBlurPrivate.qml
+DesignDropShadow 1.0 DesignDropShadow.qml
+DesignDropShadowPrivate 1.0 DesignDropShadowPrivate.qml
+DesignEffect 1.0 DesignEffect.qml
+DesignEffectPrivate 1.0 DesignEffectPrivate.qml
+DesignInnerShadow 1.0 DesignInnerShadow.qml
+DesignInnerShadowPrivate 1.0 DesignInnerShadowPrivate.qml
+DesignLayerBlurPrivate 1.0 DesignLayerBlurPrivate.qml
+

Dependencies/Components/imports/designeffects/qtstudiocomponentsplugin.cpp

@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2024 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+#include <QtQml/qqmlextensionplugin.h>
+
+QT_BEGIN_NAMESPACE
+
+class QtStudioDesignEffectsPlugin: public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)
+
+public:
+    QtStudioDesignEffectsPlugin(QObject *parent = nullptr);
+    void registerTypes(const char *uri) override;
+};
+
+QtStudioDesignEffectsPlugin::QtStudioDesignEffectsPlugin(QObject *parent)
+    : QQmlExtensionPlugin(parent)
+{
+}
+
+void QtStudioDesignEffectsPlugin::registerTypes(const char *)
+{
+}
+
+QT_END_NAMESPACE
+
+#include "qtstudiodesigneffectsplugin.moc"

Dependencies/Components/imports/designeffects/shaders/dropShadow.frag

@@ -0,0 +1,19 @@
+#version 440
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+
+    vec4 color;
+};
+layout(binding = 1) uniform sampler2D src;
+
+void main() {
+    vec4 p = texture(src, qt_TexCoord0);
+
+    if (p.a == 0) // Otherwise background is affected
+        discard;
+
+    fragColor = color * qt_Opacity;
+}

Dependencies/Components/imports/designeffects/shaders/dropShadowClip.frag

@@ -0,0 +1,19 @@
+#version 440
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out  vec4 fragColor;
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+};
+layout(binding = 1) uniform sampler2D shadow;
+layout(binding = 2) uniform sampler2D original;
+
+void main() {
+    vec4 o = texture(original, qt_TexCoord0); // original
+
+    if (o.a != 0.0)
+        discard;
+
+    vec4 s = texture(shadow, qt_TexCoord0); // shadow
+    fragColor = s;
+}

Dependencies/Components/imports/designeffects/shaders/gaussianBlur.frag

@@ -0,0 +1,52 @@
+#version 440
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+
+    float blurKernel;
+    float sigma;
+    vec2 pixelSize;
+    int useOffscreenColor; // bool
+    vec4 offscreenColor;
+};
+layout(binding = 1) uniform sampler2D src;
+
+const float PI = 3.14159265359;
+const float sqrtDoublePI = sqrt(2.0 * PI);
+
+vec4 gaussianBlur(sampler2D tex, int miplevel) {
+    vec4 col = vec4(0.0);
+
+    float sum = 0;
+
+    float k = ceil(blurKernel);
+
+    // Normalize kernel weights
+    for (float i = -k; i <= k; ++i) {
+        sum += exp(-0.5 * pow(i / sigma, 2.0)) / (sqrtDoublePI * sigma);
+    }
+
+    for (float i = -k; i <= k; ++i) {
+        vec2 coord = qt_TexCoord0 + (pixelSize * float(i));
+        float weight = exp(-0.5 * pow(i / sigma, 2.0)) / (sqrtDoublePI * sigma);
+
+        if (useOffscreenColor != 0
+            && (coord.x > 1.0 || coord.y > 1.0
+                || coord.x < 0.0 || coord.y < 0.0)) {
+            col += offscreenColor * weight / sum;
+        } else {
+            col += texture(tex, coord) * weight / sum;
+        }
+    }
+
+    return col;
+}
+
+void main() {
+    vec4 p = (blurKernel > 0) ? gaussianBlur(src, 0)
+                              : texture(src, qt_TexCoord0);
+
+    fragColor = p * qt_Opacity;
+}

Dependencies/Components/imports/designeffects/shaders/innerShadow.frag

@@ -0,0 +1,19 @@
+#version 440
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+
+    vec4 color;
+};
+layout(binding = 1) uniform sampler2D src;
+
+void main() {
+    vec4 p = texture(src, qt_TexCoord0);
+
+    if (p.a != 0)
+        discard;
+
+    fragColor = color * qt_Opacity;
+}

Dependencies/Components/imports/designeffects/shaders/innerShadowClip.frag

@@ -0,0 +1,27 @@
+#version 440
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+layout(std140, binding = 0) uniform buf {
+    mat4 qt_Matrix;
+    float qt_Opacity;
+};
+layout(binding = 1) uniform sampler2D shadow;
+layout(binding = 2) uniform sampler2D original;
+
+void main() {
+    vec4 o = texture(original, qt_TexCoord0); // original
+
+    if (o.a == 0)
+        discard;
+
+    vec4 s = texture(shadow, qt_TexCoord0); // shadow
+
+    if (s.a == 0)
+        discard;
+
+    fragColor = s;
+    //} else {
+    //    fragColor.rgb = mix(s.rgb, o.rgb, (1.0 - s.a));
+    //    fragColor.a = s.a + (o.a * (1.0 - s.a));
+    //}
+}

Dependencies/Components/imports/designeffects/shaders/opacityMask.frag

@@ -0,0 +1,27 @@
+#version 440
+
+layout(location = 0) in vec2 qt_TexCoord0;
+layout(location = 0) out vec4 fragColor;
+
+layout(std140, binding = 0) uniform buf {
+    // qt_Matrix and qt_Opacity must always be both present
+    // if the built-in vertex shader is used.
+    mat4 qt_Matrix;
+    float qt_Opacity;
+};
+
+layout(binding = 1) uniform sampler2D source;
+layout(binding = 2) uniform sampler2D maskSource;
+
+void main()
+{
+    if (texture(maskSource, qt_TexCoord0.st).a == 0.0) {
+        fragColor = vec4(0);
+    } else {
+        fragColor = texture(source, qt_TexCoord0.st);
+    }
+
+    //fragColor = texture(source, qt_TexCoord0.st)
+    //            * (texture(maskSource, qt_TexCoord0.st).a)
+    //            * qt_Opacity;
+}

Dependencies/Components/imports/effects_qt6/BlendEffect.qml

@@ -0,0 +1,37 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import Qt5Compat.GraphicalEffects
+
+FastBlur {
+    id: blend
+    property string mode: "subtract"
+    Component.onCompleted: console.log("Blend is not supported with Qt 6")
+}

Dependencies/Components/imports/effects_qt6/BlendItem.qml

@@ -0,0 +1,65 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import Qt5Compat.GraphicalEffects
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+    property string mode
+    property alias cached: blend.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        z: -1
+        id: stack
+        visible: false
+    }
+
+    FastBlur {
+        id: blend
+        anchors.fill: parent
+    }
+
+    property Item background
+    property Item foreground
+
+    property Item foo: Item {}
+
+    Component.onCompleted: {
+        root.background = stack.children[0]
+        root.foreground = stack.children[1]
+        console.log("Blend is not supported with Qt 6")
+    }
+}
+

Dependencies/Components/imports/effects_qt6/BrightnessContrastEffect.qml

@@ -0,0 +1,35 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import Qt5Compat.GraphicalEffects
+
+BrightnessContrast {
+    id: brightCont
+}

Dependencies/Components/imports/effects_qt6/BrightnessContrastItem.qml

@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import Qt5Compat.GraphicalEffects
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+
+    property alias brightness: brightCont.brightness
+    property alias contrast: brightCont.contrast
+    property alias cached: brightCont.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+        visible: false
+    }
+
+    BrightnessContrast {
+        id: brightCont
+        anchors.fill: stack
+        source: stack
+    }
+}

Dependencies/Components/imports/effects_qt6/CMakeLists.txt

@@ -0,0 +1,63 @@
+qt_add_library(QuickStudioEffects STATIC)
+qt6_add_qml_module(QuickStudioEffects
+    URI "QtQuick.Studio.Effects"
+    VERSION "${PROJECT_VERSION}"
+    RESOURCE_PREFIX "/qt-project.org/imports"
+    DESIGNER_SUPPORTED
+    PAST_MAJOR_VERSIONS 1
+    ${qds_qml_extra_args}
+    NO_LINT
+    NO_CACHEGEN
+    QML_FILES
+        FastBlurItem.qml
+        GlowItem.qml
+        ZoomBlurItem.qml
+        RadialBlurItem.qml
+        DesaturationItem.qml
+        SaturationItem.qml
+        DirectionalBlurItem.qml
+        ColorOverlayItem.qml
+        DropShadowItem.qml
+        ColorizeItem.qml
+        BrightnessContrastItem.qml
+        HueSaturationItem.qml
+        MaskedBlurItem.qml
+        BlendItem.qml
+        OpacityMaskItem.qml
+        MaskItem.qml
+        RotationItem.qml
+        GaussianBlurItem.qml
+        GammaAdjustItem.qml
+        RecursiveBlurItem.qml
+        ThresholdMaskItem.qml
+        LevelAdjustItem.qml
+        InnerShadowItem.qml
+        DisplaceItem.qml
+        BlendEffect.qml
+        BrightnessContrastEffect.qml
+        ColorizeEffect.qml
+        ColorOverlayEffect.qml
+        DesaturationEffect.qml
+        DirectionalBlurEffect.qml
+        DisplaceEffect.qml
+        DropShadowEffect.qml
+        FastBlurEffect.qml
+        GammaAdjustEffect.qml
+        GaussianBlurEffect.qml
+        GlowEffect.qml
+        HueSaturationEffect.qml
+        InnerShadowEffect.qml
+        LevelAdjustEffect.qml
+        MaskedBlurEffect.qml
+        OpacityMaskEffect.qml
+        RadialBlurEffect.qml
+        RecursiveBlurEffect.qml
+        ThresholdMaskEffect.qml
+        ZoomBlurEffect.qml
+)
+
+set_target_properties(QuickStudioEffects PROPERTIES
+    QT_QMLCACHEGEN_EXECUTABLE qmlcachegen
+)
+
+register_plugin(QuickStudioEffects)

Dependencies/Components/imports/effects_qt6/ColorOverlayEffect.qml

@@ -0,0 +1,36 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt5Compat.GraphicalEffects
+
+ColorOverlay {
+    id: colorOverlay
+    color: "#80fff000"
+}

Dependencies/Components/imports/effects_qt6/ColorOverlayItem.qml

@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt5Compat.GraphicalEffects
+
+Item {
+    id: root
+
+    default property alias content: stack.children
+
+    property alias overlayColor: colorOverlay.color
+    property alias cached: colorOverlay.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+
+        visible: false
+    }
+
+    ColorOverlay {
+        id: colorOverlay
+        anchors.fill: stack
+        source: stack
+        color: "#80fff000"
+    }
+}

Dependencies/Components/imports/effects_qt6/ColorizeEffect.qml

@@ -0,0 +1,38 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import Qt5Compat.GraphicalEffects
+
+Colorize {
+    id: colorize
+    hue: 0.5
+    saturation: 0.5
+    lightness: 0.5
+}

Dependencies/Components/imports/effects_qt6/ColorizeItem.qml

@@ -0,0 +1,61 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick
+import Qt5Compat.GraphicalEffects
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+    property alias colorizeHue: colorize.hue
+    property alias colorizeSaturation: colorize.saturation
+    property alias colorizeLightness: colorize.lightness
+    property alias cached: colorize.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+
+        visible: false
+    }
+
+    Colorize {
+        id: colorize
+        anchors.fill: stack
+        source: stack
+        hue: 0.5
+        saturation: 0.5
+        lightness: 0.5
+    }
+}

Dependencies/Components/imports/effects_qt6/DesaturationEffect.qml

@@ -0,0 +1,36 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt5Compat.GraphicalEffects
+
+Desaturate {
+    id: desaturate
+    desaturation: 0.5
+}

Dependencies/Components/imports/effects_qt6/DesaturationItem.qml

@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt5Compat.GraphicalEffects
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+    property alias desaturation: desaturate.desaturation
+    property alias cached: desaturate.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+        visible: false
+    }
+
+    Desaturate {
+        id: desaturate
+        source: stack
+        anchors.fill: stack
+        desaturation: 0.5
+    }
+}

Dependencies/Components/imports/effects_qt6/DirectionalBlurEffect.qml

@@ -0,0 +1,42 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt5Compat.GraphicalEffects
+
+FastBlur {
+    property real directionalBlurAngle: 0
+    property real directionalBlurLength: 0
+    property int directionalBlurSamples: 10
+    property int length: 0
+
+    id: directionalBlur
+    transparentBorder: true
+    Component.onCompleted: console.log("DirectionalBlur is not supported with Qt 6")
+}

Dependencies/Components/imports/effects_qt6/DirectionalBlurItem.qml

@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt5Compat.GraphicalEffects
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+
+    property real directionalBlurAngle: 0
+    property real directionalBlurLength: 0
+    property int directionalBlurSamples: 10
+    property alias directionalBlurBorder: directionalBlur.transparentBorder
+    property alias cached: directionalBlur.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        id: stack
+        implicitWidth: childrenRect.width + childrenRect.x
+        implicitHeight: childrenRect.height + childrenRect.y
+
+        visible: false
+    }
+
+    FastBlur {
+        id: directionalBlur
+        anchors.fill: stack
+        source: stack
+        transparentBorder: true
+    }
+    Component.onCompleted: console.log("DirectionalBlur is not supported with Qt 6")
+}

Dependencies/Components/imports/effects_qt6/DisplaceEffect.qml

@@ -0,0 +1,35 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt5Compat.GraphicalEffects
+
+Displace {
+    id: displace
+}

Dependencies/Components/imports/effects_qt6/DisplaceItem.qml

@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2019 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+import Qt5Compat.GraphicalEffects
+
+Item {
+    id: root
+
+    default property alias contentStack: stack.children
+    property alias displacement: displace.displacement
+    property alias cached: displace.cached
+
+    implicitWidth: Math.max(32, stack.implicitWidth)
+    implicitHeight: Math.max(32, stack.implicitHeight)
+
+    Item {
+        z: -1
+        id: stack
+        implicitWidth: displace.source.width + displace.source.x
+        implicitHeight: displace.source.height + displace.source.y
+        visible: false
+    }
+
+    Displace {
+        id: displace
+        anchors.fill: parent
+        source: root.background
+        displacementSource: root.foreground
+    }
+
+    property Item background
+    property Item foreground
+
+    Component.onCompleted: {
+        root.background = stack.children[0]
+        root.foreground = stack.children[1]
+    }
+}
+