zui 0.0.1

data/Components/Builtins/SearchableDropdown.qml

@@ -0,0 +1,21 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.SearchableDropdown {
+  required property var renderer
+      label: renderer.escapeAutoText(renderer.prop("label", "")); value: String(renderer.prop("value", "")); options: renderer.prop("options", [])
+      placeholderText: String(renderer.prop("placeholder", "Search...")); emptyText: String(renderer.prop("empty_text", "No matches"))
+      triggerLabel: String(renderer.prop("trigger_label", "")); width: Number(renderer.prop("width", 240))
+      foreground: renderer.prop("foreground", renderer.foreground); background: renderer.prop("background", Color.popups.background)
+      popupBorder: renderer.prop("popup_border", Color.popups.border); accent: renderer.prop("accent", Color.accent)
+      fontFamily: String(renderer.prop("font_family", renderer.fontFamily)); rowHeight: Number(renderer.prop("row_height", Style.spacing.controlHeight))
+      popupRowHeight: Number(renderer.prop("popup_row_height", Style.spacing.popupRowHeight)); popupMinHeight: Number(renderer.prop("popup_min_height", Style.spacing.searchablePopupMinHeight))
+      showLabel: renderer.prop("show_label", true) !== false; hasCursor: renderer.prop("cursor", false) === true
+      onChanged: function(value) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: value }) }
+      onOptionHovered: function(value) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { value: value }) }
+    }

data/Components/Builtins/SectionHeader.qml

@@ -0,0 +1,14 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.PanelSectionHeader {
+  required property var renderer
+  text: renderer.escapeAutoText(renderer.prop("text", ""))
+  foreground: renderer.foreground
+  fontFamily: renderer.fontFamily
+}

data/Components/Builtins/SelectableText.qml

@@ -0,0 +1,33 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+TextEdit {
+  required property var renderer
+      text: String(renderer.prop("text", ""))
+      readOnly: true
+      selectByMouse: true
+      persistentSelection: true
+      color: renderer.prop("color", renderer.foreground)
+      selectionColor: renderer.prop("selection_color", Color.accent)
+      selectedTextColor: renderer.prop("selected_text_color", Color.background)
+      font.family: renderer.fontFamily
+      font.pixelSize: Number(renderer.prop("size", Style.font.body))
+      font.bold: renderer.prop("bold", false) === true
+      width: Number(renderer.prop("width", implicitWidth))
+      wrapMode: renderer.prop("wrap", true) !== false ? TextEdit.Wrap : TextEdit.NoWrap
+      textFormat: {
+        var format = String(renderer.prop("format", "plain"))
+        if (format === "rich") return TextEdit.RichText
+        if (format === "markdown") return TextEdit.MarkdownText
+        return TextEdit.PlainText
+      }
+      onSelectedTextChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "selection", {
+        start: selectionStart, end: selectionEnd, text: selectedText
+      })
+      onLinkActivated: function(link) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "link", { value: link }) }
+    }

data/Components/Builtins/SelectionRectangle.qml

@@ -0,0 +1,17 @@
+import QtQuick
+import QtQuick.Controls as QQC
+
+QQC.SelectionRectangle {
+  id: selectionRoot
+  property var renderer: null
+  target: renderer ? renderer.findRenderedItem(renderer.prop("target", "")) : null
+  enabled: renderer && renderer.prop("enabled", true) !== false
+  selectionMode: {
+    var mode = String(renderer ? renderer.prop("mode", "auto") : "auto")
+    if (mode === "drag") return QQC.SelectionRectangle.Drag
+    if (mode === "press_and_hold") return QQC.SelectionRectangle.PressAndHold
+    return QQC.SelectionRectangle.Auto
+  }
+  onActiveChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "active_change", { value: active, dragging: dragging })
+  onDraggingChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "selection_change", { active: active, dragging: dragging })
+}

data/Components/Builtins/Separator.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.PanelSeparator {
+  required property var renderer
+  foreground: renderer.foreground
+  strength: Number(renderer.prop("strength", 0.12))
+}

data/Components/Builtins/SequentialAnimation.qml

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

data/Components/Builtins/Settings.qml

@@ -0,0 +1,10 @@
+import QtQuick
+import QtCore
+
+Item {
+  id:settingsRoot;property var renderer:null;property int handledSyncRevision:-1
+  function load(){if(!renderer)return;var defaults=renderer.prop("values",{});var result={};for(var key in defaults)result[key]=nativeSettings.value(key,defaults[key]);renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"loaded",{values:result})}
+  function synchronize(){if(!renderer)return;var values=renderer.prop("values",{});for(var key in values){var previous=nativeSettings.value(key);if(previous!==values[key]){nativeSettings.setValue(key,values[key]);renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"change",{key:key,value:values[key],previous:previous})}}var revision=Number(renderer.prop("sync_revision",0));if(revision!==handledSyncRevision){handledSyncRevision=revision;nativeSettings.sync();renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,"synced",{revision:revision})}}
+  Settings{id:nativeSettings;category:String(renderer?renderer.prop("category",""):"");location:renderer&&String(renderer.prop("file_name",""))!==""?renderer.assetUrl(renderer.prop("file_name","")):""}
+  Component.onCompleted:{load();synchronize()}Connections{target:renderer;function onNodeChanged(){settingsRoot.synchronize()}}
+}

data/Components/Builtins/ShaderEffect.qml

@@ -0,0 +1,115 @@
+import QtQuick
+
+Item {
+  id: shaderRoot
+  required property var renderer
+  property real elapsedTime: Number(renderer.prop("time", 0))
+  property int frameNumber: 0
+  implicitWidth: Number(renderer.prop("width", 240))
+  implicitHeight: Number(renderer.prop("height", 160))
+
+  function shaderUrl(value, fallback) {
+    var name = String(value || "")
+    if (name === "") name = String(renderer.prop("shader", fallback || ""))
+    var builtins = ["passthrough", "grayscale", "wave", "pixelate", "vignette"]
+    if (builtins.indexOf(name) >= 0) return Qt.resolvedUrl("Shaders/" + name + ".frag.qsb")
+    return renderer.assetUrl(name)
+  }
+
+  function sourceRectangle() {
+    var value = renderer.prop("source_rect", {})
+    return Qt.rect(Number(value.x || 0), Number(value.y || 0), Number(value.width === undefined ? width : value.width), Number(value.height === undefined ? height : value.height))
+  }
+
+  Loader {
+    id: sourceLoader
+    anchors.fill: parent
+    source: renderer.node && renderer.node.children && renderer.node.children.length > 0 ? Qt.resolvedUrl("../../ControlNode.qml") : ""
+    onLoaded: renderer.configureFace(item, renderer.node.children[0])
+  }
+
+  ShaderEffectSource {
+    id: sourceTexture
+    sourceItem: sourceLoader
+    sourceRect: shaderRoot.sourceRectangle()
+    textureSize: Qt.size(Number(renderer.prop("texture_width", 0)), Number(renderer.prop("texture_height", 0)))
+    format: {
+      var value = String(renderer.prop("texture_format", "rgba8"))
+      if (value === "rgba16f") return ShaderEffectSource.RGBA16F
+      if (value === "rgba32f") return ShaderEffectSource.RGBA32F
+      return ShaderEffectSource.RGBA8
+    }
+    samples: Number(renderer.prop("texture_samples", 0))
+    wrapMode: {
+      var value = String(renderer.prop("texture_wrap", "clamp"))
+      if (value === "repeat") return ShaderEffectSource.Repeat
+      if (value === "repeat_horizontal") return ShaderEffectSource.RepeatHorizontally
+      if (value === "repeat_vertical") return ShaderEffectSource.RepeatVertically
+      return ShaderEffectSource.ClampToEdge
+    }
+    textureMirroring: {
+      var value = String(renderer.prop("texture_mirroring", "none"))
+      if (value === "horizontal") return ShaderEffectSource.MirrorHorizontally
+      if (value === "vertical") return ShaderEffectSource.MirrorVertically
+      return ShaderEffectSource.NoMirroring
+    }
+    mipmap: renderer.prop("mipmap", false) === true
+    live: renderer.prop("live", true) !== false
+    recursive: renderer.prop("recursive", false) === true
+    hideSource: true
+  }
+
+  ShaderEffect {
+    id: nativeShader
+    anchors.fill: parent
+    property var source: sourceTexture
+    property real time: shaderRoot.elapsedTime
+    property vector2d resolution: Qt.vector2d(width, height)
+    property vector2d mouse: Qt.vector2d(Number(renderer.prop("mouse_x", 0)), Number(renderer.prop("mouse_y", 0)))
+    property real intensity: Number(renderer.prop("intensity", 1))
+    property real amount: Number(renderer.prop("amount", 1))
+    property real radius: Number(renderer.prop("radius", 1))
+    property real progress: Number(renderer.prop("progress", 0))
+    property real frequency: Number(renderer.prop("frequency", 1))
+    property real amplitude: Number(renderer.prop("amplitude", 0.02))
+    property color color: renderer.prop("color", "white")
+    property color color2: renderer.prop("color2", "black")
+    property vector4d parameters: {
+      var values = renderer.prop("parameters", [])
+      return Qt.vector4d(Number(values[0] || 0), Number(values[1] || 0), Number(values[2] || 0), Number(values[3] || 0))
+    }
+    fragmentShader: shaderRoot.shaderUrl(renderer.prop("fragment_shader", ""), "passthrough")
+    vertexShader: renderer.assetUrl(renderer.prop("vertex_shader", ""))
+    blending: renderer.prop("blending", true) !== false
+    supportsAtlasTextures: renderer.prop("supports_atlas", false) === true
+    mesh: Qt.size(Math.max(1, Number(renderer.prop("mesh_width", 1))), Math.max(1, Number(renderer.prop("mesh_height", 1))))
+    cullMode: {
+      var value = String(renderer.prop("cull_mode", "none"))
+      if (value === "back") return ShaderEffect.BackFaceCulling
+      if (value === "front") return ShaderEffect.FrontFaceCulling
+      return ShaderEffect.NoCulling
+    }
+    onStatusChanged: {
+      if (renderer.subscribed("status")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "status", { value: status, log: log })
+      if (status === ShaderEffect.Error) renderer.componentError("shader_load_failed", log, { fragment_shader: String(fragmentShader), vertex_shader: String(vertexShader) })
+    }
+  }
+
+  Timer {
+    interval: Math.max(1, Math.round(1000 / Math.max(1, Number(renderer.prop("fps", 60)))))
+    repeat: true
+    running: renderer.prop("running", false) === true
+    onTriggered: {
+      shaderRoot.elapsedTime += interval / 1000
+      shaderRoot.frameNumber += 1
+      if (renderer.subscribed("frame")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "frame", { frame: shaderRoot.frameNumber, time: shaderRoot.elapsedTime })
+    }
+  }
+
+  MouseArea {
+    anchors.fill: parent
+    hoverEnabled: renderer.subscribed("hover")
+    onClicked: function(mouse) { if (renderer.subscribed("click")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", { x: mouse.x, y: mouse.y }) }
+    onPositionChanged: function(mouse) { if (renderer.subscribed("hover")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { x: mouse.x, y: mouse.y }) }
+  }
+}

data/Components/Builtins/ShaderEffectSource.qml

@@ -0,0 +1,61 @@
+import QtQuick
+
+Item {
+  id: effectSourceRoot
+  required property var renderer
+  implicitWidth: Number(renderer.prop("width", 240))
+  implicitHeight: Number(renderer.prop("height", 160))
+
+  function rectangle() {
+    var value = renderer.prop("source_rect", {})
+    return Qt.rect(Number(value.x || 0), Number(value.y || 0), Number(value.width === undefined ? width : value.width), Number(value.height === undefined ? height : value.height))
+  }
+
+  Loader {
+    id: sourceLoader
+    anchors.fill: parent
+    source: renderer.node && renderer.node.children && renderer.node.children.length > 0 ? Qt.resolvedUrl("../../ControlNode.qml") : ""
+    onLoaded: renderer.configureFace(item, renderer.node.children[0])
+  }
+
+  ShaderEffectSource {
+    id: nativeSource
+    anchors.fill: parent
+    sourceItem: sourceLoader
+    sourceRect: effectSourceRoot.rectangle()
+    textureSize: Qt.size(Number(renderer.prop("texture_width", 0)), Number(renderer.prop("texture_height", 0)))
+    format: {
+      var value = String(renderer.prop("format", "rgba8"))
+      if (value === "rgba16f") return ShaderEffectSource.RGBA16F
+      if (value === "rgba32f") return ShaderEffectSource.RGBA32F
+      return ShaderEffectSource.RGBA8
+    }
+    samples: Number(renderer.prop("samples", 0))
+    wrapMode: {
+      var value = String(renderer.prop("wrap_mode", "clamp"))
+      if (value === "repeat") return ShaderEffectSource.Repeat
+      if (value === "repeat_horizontal") return ShaderEffectSource.RepeatHorizontally
+      if (value === "repeat_vertical") return ShaderEffectSource.RepeatVertically
+      return ShaderEffectSource.ClampToEdge
+    }
+    textureMirroring: {
+      var value = String(renderer.prop("texture_mirroring", "none"))
+      if (value === "horizontal") return ShaderEffectSource.MirrorHorizontally
+      if (value === "vertical") return ShaderEffectSource.MirrorVertically
+      return ShaderEffectSource.NoMirroring
+    }
+    mipmap: renderer.prop("mipmap", false) === true
+    live: renderer.prop("live", true) !== false
+    recursive: renderer.prop("recursive", false) === true
+    hideSource: renderer.prop("hide_source", true) !== false
+    smooth: renderer.prop("smooth", true) !== false
+  }
+
+  Connections {
+    target: renderer
+    function onNodeChanged() {
+      if (!nativeSource.live) nativeSource.scheduleUpdate()
+      if (renderer.subscribed("update")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "update", {})
+    }
+  }
+}

data/Components/Builtins/Shaders/grayscale.frag

@@ -0,0 +1,14 @@
+#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 amount;
+};
+layout(binding = 1) uniform sampler2D source;
+void main() {
+    vec4 pixel = texture(source, qt_TexCoord0);
+    float luminance = dot(pixel.rgb, vec3(0.2126, 0.7152, 0.0722));
+    fragColor = vec4(mix(pixel.rgb, vec3(luminance), clamp(amount, 0.0, 1.0)), pixel.a) * qt_Opacity;
+}

data/Components/Builtins/Shaders/passthrough.frag

@@ -0,0 +1,11 @@
+#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 source;
+void main() {
+    fragColor = texture(source, qt_TexCoord0) * qt_Opacity;
+}

data/Components/Builtins/Shaders/pixelate.frag

@@ -0,0 +1,16 @@
+#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 amount;
+    vec2 resolution;
+};
+layout(binding = 1) uniform sampler2D source;
+void main() {
+    float pixels = max(amount, 1.0);
+    vec2 cells = max(resolution / pixels, vec2(1.0));
+    vec2 uv = (floor(qt_TexCoord0 * cells) + vec2(0.5)) / cells;
+    fragColor = texture(source, uv) * qt_Opacity;
+}

data/Components/Builtins/Shaders/vignette.frag

@@ -0,0 +1,18 @@
+#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 intensity;
+    float radius;
+    vec4 color;
+};
+layout(binding = 1) uniform sampler2D source;
+void main() {
+    vec4 pixel = texture(source, qt_TexCoord0);
+    float distanceFromCenter = length(qt_TexCoord0 - vec2(0.5));
+    float edge = smoothstep(max(radius, 0.001), max(radius, 0.001) + 0.35, distanceFromCenter);
+    pixel.rgb = mix(pixel.rgb, color.rgb, clamp(edge * intensity, 0.0, 1.0));
+    fragColor = pixel * qt_Opacity;
+}

data/Components/Builtins/Shaders/wave.frag

@@ -0,0 +1,18 @@
+#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 time;
+    vec2 resolution;
+    float frequency;
+    float amplitude;
+};
+layout(binding = 1) uniform sampler2D source;
+void main() {
+    vec2 uv = qt_TexCoord0;
+    float aspect = resolution.y > 0.0 ? resolution.x / resolution.y : 1.0;
+    uv.x += sin((uv.y * frequency * 6.2831853) + time) * amplitude / max(aspect, 0.001);
+    fragColor = texture(source, uv) * qt_Opacity;
+}

data/Components/Builtins/Shape.qml

@@ -0,0 +1,53 @@
+import QtQuick
+import QtQuick.Shapes
+
+Item {
+  id: shapeRoot
+  required property var renderer
+  implicitWidth: Number(renderer.prop("width", 120))
+  implicitHeight: Number(renderer.prop("height", 120))
+
+  function capStyle() {
+    var cap = String(renderer.prop("cap", "square"))
+    if (cap === "round") return ShapePath.RoundCap
+    if (cap === "flat") return ShapePath.FlatCap
+    return ShapePath.SquareCap
+  }
+
+  function joinStyle() {
+    var join = String(renderer.prop("join", "miter"))
+    if (join === "round") return ShapePath.RoundJoin
+    if (join === "bevel") return ShapePath.BevelJoin
+    return ShapePath.MiterJoin
+  }
+
+  Shape {
+    id: nativeShape
+    anchors.fill: parent
+    antialiasing: renderer.prop("antialiasing", true) !== false
+    asynchronous: renderer.prop("asynchronous", false) === true
+    preferredRendererType: String(renderer.prop("preferred_renderer", "geometry")) === "curve" ? Shape.CurveRenderer : Shape.GeometryRenderer
+    containsMode: String(renderer.prop("contains_mode", "bounding_rect")) === "fill" ? Shape.FillContains : Shape.BoundingRectContains
+    transform: Scale { xScale: Number(renderer.prop("scale", 1)); yScale: Number(renderer.prop("scale", 1)) }
+    ShapePath {
+      strokeColor: renderer.prop("stroke", "transparent")
+      fillColor: renderer.prop("fill", "transparent")
+      strokeWidth: Number(renderer.prop("stroke_width", 1))
+      capStyle: shapeRoot.capStyle()
+      joinStyle: shapeRoot.joinStyle()
+      fillRule: String(renderer.prop("fill_rule", "winding")) === "odd_even" ? ShapePath.OddEvenFill : ShapePath.WindingFill
+      strokeStyle: Array.isArray(renderer.prop("dash_pattern", [])) && renderer.prop("dash_pattern", []).length > 0 ? ShapePath.DashLine : ShapePath.SolidLine
+      dashPattern: renderer.prop("dash_pattern", [])
+      dashOffset: Number(renderer.prop("dash_offset", 0))
+      PathSvg { path: String(renderer.prop("path", "")) }
+    }
+    onStatusChanged: if (renderer.subscribed("status")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "status", { value: status, renderer: rendererType })
+  }
+
+  MouseArea {
+    anchors.fill: parent
+    hoverEnabled: renderer.subscribed("hover")
+    onClicked: function(mouse) { if (renderer.subscribed("click")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "click", { x: mouse.x, y: mouse.y, contains: nativeShape.contains(Qt.point(mouse.x, mouse.y)) }) }
+    onPositionChanged: function(mouse) { if (renderer.subscribed("hover")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "hover", { x: mouse.x, y: mouse.y, contains: nativeShape.contains(Qt.point(mouse.x, mouse.y)) }) }
+  }
+}

data/Components/Builtins/Skeleton.qml

@@ -0,0 +1,78 @@
+import QtQuick
+import "../../Theme"
+
+Item {
+  id: skeletonRoot
+
+  required property var renderer
+  readonly property string variant: String(renderer.prop("variant", "rectangle"))
+  readonly property int lineCount: variant === "text"
+    ? Math.max(1, Number(renderer.prop("lines", 3))) : 1
+  readonly property real lineHeight: variant === "text"
+    ? Number(renderer.prop("line_height", 14)) : Number(renderer.prop("height", 72))
+  readonly property real lineSpacing: Number(renderer.prop("spacing", Style.spacing.sm))
+  readonly property color baseColor: renderer.prop("base_color",
+    Qt.rgba(renderer.foreground.r, renderer.foreground.g, renderer.foreground.b, 0.12))
+  readonly property color highlightColor: renderer.prop("highlight_color",
+    Qt.rgba(renderer.foreground.r, renderer.foreground.g, renderer.foreground.b, 0.28))
+  readonly property bool shimmerRunning: renderer.prop("animated", true) !== false
+    && visible && enabled
+  property real shimmerProgress: -1
+
+  implicitWidth: Number(renderer.prop("width", variant === "circle" ? 64 : 320))
+  implicitHeight: variant === "text"
+    ? lineCount * lineHeight + Math.max(0, lineCount - 1) * lineSpacing
+    : Number(renderer.prop("height", variant === "circle" ? implicitWidth : 72))
+  enabled: renderer.prop("enabled", true) !== false
+  opacity: Number(renderer.prop("opacity", enabled ? 1 : 0.5))
+  Accessible.name: String(renderer.prop("accessible_name", "Loading content"))
+  Accessible.role: Accessible.Indicator
+
+  Repeater {
+    model: skeletonRoot.lineCount
+
+    Rectangle {
+      required property int index
+      x: 0
+      y: index * (skeletonRoot.lineHeight + skeletonRoot.lineSpacing)
+      width: skeletonRoot.variant === "text" && index === skeletonRoot.lineCount - 1
+        ? skeletonRoot.width * Math.max(0, Math.min(1, Number(renderer.prop("last_line_width", 0.68))))
+        : skeletonRoot.width
+      height: skeletonRoot.variant === "circle" ? skeletonRoot.height : skeletonRoot.lineHeight
+      radius: skeletonRoot.variant === "circle" ? Math.min(width, height) / 2
+        : Number(renderer.prop("radius", Style.cornerRadius))
+      color: skeletonRoot.baseColor
+      clip: true
+
+      Rectangle {
+        width: Math.max(24, parent.width * 0.7)
+        height: parent.height
+        x: {
+          var travel = parent.width + width
+          var offset = skeletonRoot.shimmerProgress * travel
+          return String(renderer.prop("direction", "left_to_right")) === "right_to_left"
+            ? parent.width - offset : offset - width
+        }
+        gradient: Gradient {
+          orientation: Gradient.Horizontal
+          GradientStop { position: 0; color: "transparent" }
+          GradientStop { position: 0.5; color: skeletonRoot.highlightColor }
+          GradientStop { position: 1; color: "transparent" }
+        }
+      }
+    }
+  }
+
+  NumberAnimation on shimmerProgress {
+    from: 0
+    to: 1
+    duration: Number(renderer.prop("duration", 1200))
+    loops: Animation.Infinite
+    running: skeletonRoot.shimmerRunning
+  }
+
+  onShimmerRunningChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    "animation_change", { running: shimmerRunning })
+  onVisibleChanged: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId,
+    visible ? "show" : "hide", {})
+}

data/Components/Builtins/Slider.qml

@@ -0,0 +1,21 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.PanelSlider {
+  required property var renderer
+      value: Number(renderer.prop("value", 0)); minimum: Number(renderer.prop("minimum", 0)); maximum: Number(renderer.prop("maximum", 1))
+      step: Number(renderer.prop("step", 0.05)); integer: renderer.prop("integer", false) === true; tickCount: Number(renderer.prop("ticks", 0))
+      implicitWidth: Number(renderer.prop("width", 200)); trackColor: renderer.prop("track_color", "#333")
+      fillColor: renderer.prop("fill_color", renderer.foreground); knobColor: renderer.prop("knob_color", renderer.foreground)
+      trackHeight: Number(renderer.prop("track_height", Math.max(4, Math.round(Style.spacing.controlHeight * 0.11))))
+      knobSize: Number(renderer.prop("knob_size", Math.max(14, Math.round(Style.spacing.controlHeight * 0.38))))
+      tickColor: renderer.prop("tick_color", Color.background)
+      onReleased: function(value) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "change", { value: value }) }
+      onMoved: function(value) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "input", { value: value }) }
+      onRightClicked: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "right_click", {})
+    }

data/Components/Builtins/SmoothedAnimation.qml

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