zui 0.0.1

data/Components/Builtins/Video.qml

@@ -0,0 +1,54 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Video {
+  id: videoRoot
+  required property var renderer
+
+  function synchronizeCapabilities() {
+    var mirroredValue = renderer.prop("mirrored", false) === true
+    if (videoRoot["mirrored"] !== undefined)
+      videoRoot["mirrored"] = mirroredValue
+    else if (mirroredValue)
+      renderer.componentError("video_mirroring_unsupported",
+        "The installed Qt version does not support mirrored video output", {})
+  }
+
+  source: String(renderer.prop("source", ""))
+  implicitWidth: Number(renderer.prop("width", 640))
+  implicitHeight: Number(renderer.prop("height", 360))
+  autoPlay: renderer.prop("auto_play", false) === true
+  loops: Number(renderer.prop("loops", 1))
+  volume: Math.max(0, Math.min(1, Number(renderer.prop("volume", 1))))
+  muted: renderer.prop("muted", false) === true
+  playbackRate: Number(renderer.prop("playback_rate", 1))
+  orientation: Number(renderer.prop("orientation", 0))
+  fillMode: {
+    var mode = String(renderer.prop("fill_mode", "contain"))
+    if (mode === "cover") return VideoOutput.PreserveAspectCrop
+    if (mode === "stretch") return VideoOutput.Stretch
+    return VideoOutput.PreserveAspectFit
+  }
+  onPlaying: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "play", {})
+  onPaused: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "pause", {})
+  onStopped: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "stop", {})
+  onErrorOccurred: function(error, message) {
+    renderer.componentError("video_playback_failed", message, { native_code: error, source: String(source) })
+  }
+  onPositionChanged: {
+    if (renderer.subscribed("position")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "position", { value: position, duration: duration })
+  }
+  onDurationChanged: {
+    if (renderer.subscribed("duration")) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "duration", { value: duration })
+  }
+  Component.onCompleted: synchronizeCapabilities()
+  Connections {
+    target: videoRoot.renderer
+    function onNodeChanged() { videoRoot.synchronizeCapabilities() }
+  }
+}

data/Components/Builtins/VideoOutput.qml

@@ -0,0 +1,54 @@
+import QtQuick
+import QtMultimedia
+
+VideoOutput {
+  id: videoRoot
+  property var renderer: null
+  readonly property var sourceItem: renderer ? renderer.findRenderedItem(renderer.prop("source", "")) : null
+  function synchronizeCapabilities() {
+    var mirroredValue = renderer && renderer.prop("mirrored", false) === true
+    if (videoRoot["mirrored"] !== undefined)
+      videoRoot["mirrored"] = mirroredValue
+    else if (mirroredValue)
+      renderer.componentError("video_mirroring_unsupported",
+        "The installed Qt version does not support mirrored video output", {})
+
+    var policy = String(renderer ? renderer.prop("end_of_stream_policy", "clear") : "clear")
+    if (videoRoot["endOfStreamPolicy"] !== undefined)
+      videoRoot["endOfStreamPolicy"] = policy === "keep" ? VideoOutput.KeepLastFrame : VideoOutput.ClearOutput
+    else if (policy === "keep")
+      renderer.componentError("video_end_policy_unsupported",
+        "The installed Qt version does not support keeping the final video frame", {})
+  }
+  implicitWidth: Number(renderer ? renderer.prop("width", 640) : 640)
+  implicitHeight: Number(renderer ? renderer.prop("height", 360) : 360)
+  fillMode: {
+    var mode = String(renderer ? renderer.prop("fill_mode", "contain") : "contain")
+    if (mode === "cover") return VideoOutput.PreserveAspectCrop
+    if (mode === "stretch") return VideoOutput.Stretch
+    return VideoOutput.PreserveAspectFit
+  }
+  orientation: Number(renderer ? renderer.prop("orientation", 0) : 0)
+  function connectSource() {
+    if (!sourceItem) return
+    if (sourceItem.mediaPlayer !== undefined) sourceItem.mediaPlayer.videoOutput = videoRoot
+    else if (sourceItem.captureSession !== undefined) sourceItem.captureSession.videoOutput = videoRoot
+    renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "source_change", { value: renderer.prop("source", "") })
+  }
+  Component.onCompleted: {
+    connectSource()
+    synchronizeCapabilities()
+  }
+  onSourceItemChanged: connectSource()
+  Connections {
+    target: renderer
+    function onNodeChanged() { videoRoot.synchronizeCapabilities() }
+  }
+  Connections {
+    target: videoSink
+    function onVideoFrameChanged() {
+      if (renderer.subscribed("frame"))
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "frame", {})
+    }
+  }
+}

data/Components/Builtins/WebView.qml

@@ -0,0 +1,57 @@
+import QtQuick
+import QtWebEngine
+
+WebEngineView {
+  id: webRoot
+  property var renderer: null
+  property int handledCommandRevision: -1
+  implicitWidth: Number(renderer ? renderer.prop("width", 800) : 800)
+  implicitHeight: Number(renderer ? renderer.prop("height", 600) : 600)
+  url: renderer ? renderer.assetUrl(renderer.prop("url", "about:blank")) : "about:blank"
+  zoomFactor: Number(renderer ? renderer.prop("zoom_factor", 1) : 1)
+  backgroundColor: renderer ? renderer.prop("background_color", "white") : "white"
+  activeFocusOnPress: !renderer || renderer.prop("active_focus_on_press", true) !== false
+  settings.javascriptEnabled: !renderer || renderer.prop("javascript_enabled", true) !== false
+  settings.localStorageEnabled: !renderer || renderer.prop("local_storage_enabled", true) !== false
+  settings.autoLoadImages: !renderer || renderer.prop("auto_load_images", true) !== false
+  settings.fullScreenSupportEnabled: renderer && renderer.prop("full_screen_support", false) === true
+
+  function send(name, payload) {
+    if (renderer && renderer.subscribed(name)) renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, name, payload || {})
+  }
+  function handleCommand() {
+    if (!renderer) return
+    var revision = Number(renderer.prop("command_revision", 0))
+    if (revision === handledCommandRevision) return
+    handledCommandRevision = revision
+    var command = String(renderer.prop("command", ""))
+    if (command === "back" && canGoBack) goBack()
+    else if (command === "forward" && canGoForward) goForward()
+    else if (command === "reload") reload()
+    else if (command === "stop") stop()
+  }
+  function loadHtmlIfNeeded() {
+    if (!renderer) return
+    var markup = String(renderer.prop("html", ""))
+    if (markup !== "") loadHtml(markup, String(renderer.prop("base_url", "")))
+  }
+
+  onLoadingChanged: function(request) {
+    if (request.status === WebEngineLoadingInfo.LoadStartedStatus) send("load_start", { url: String(request.url) })
+    else if (request.status === WebEngineLoadingInfo.LoadSucceededStatus) send("load_success", { url: String(request.url) })
+    else if (request.status === WebEngineLoadingInfo.LoadFailedStatus) {
+      var payload = { url: String(request.url), native_code: request.errorCode }
+      if (renderer) renderer.componentError("web_load_failed", request.errorString, payload)
+      send("load_failure", { url: String(request.url), code: request.errorCode, message: request.errorString })
+    }
+  }
+  onLoadProgressChanged: send("load_progress", { value: loadProgress })
+  onUrlChanged: send("url_change", { value: String(url), can_go_back: canGoBack, can_go_forward: canGoForward })
+  onTitleChanged: send("title_change", { value: title })
+  onNavigationRequested: function(request) { send("navigation", { url: String(request.url), navigation_type: request.navigationType, main_frame: request.isMainFrame }) }
+  onFullScreenRequested: function(request) { send("full_screen", { value: request.toggleOn }); request.accept() }
+  onPermissionRequested: function(permission) { send("permission", { origin: String(permission.origin), type: permission.permissionType }) }
+  onNewWindowRequested: function(request) { send("new_window", { url: String(request.requestedUrl), disposition: request.destination }) }
+  Component.onCompleted: { loadHtmlIfNeeded(); handleCommand() }
+  Connections { target: renderer; function onNodeChanged() { webRoot.loadHtmlIfNeeded(); webRoot.handleCommand() } }
+}

data/Components/Builtins/WeekNumberColumn.qml

@@ -0,0 +1,13 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "../../Theme"
+
+QQC.WeekNumberColumn {
+  id: weekRoot
+  property var renderer: null
+  implicitWidth: Number(renderer ? renderer.prop("width", 44) : 44); implicitHeight: Number(renderer ? renderer.prop("height", 280) : 280)
+  month: Number(renderer ? renderer.prop("month", new Date().getMonth() + 1) : new Date().getMonth() + 1) - 1
+  year: Number(renderer ? renderer.prop("year", new Date().getFullYear()) : new Date().getFullYear())
+  locale: Qt.locale(String(renderer ? renderer.prop("locale", Qt.locale().name) : Qt.locale().name))
+  delegate: Rectangle { required property var model; color: renderer.prop("background", "transparent"); Text { anchors.fill: parent; text: model.weekNumber; color: renderer.prop("foreground", renderer.prop("muted", renderer.foreground)); font.family: renderer.prop("font_family", renderer.fontFamily); font.pixelSize: Number(renderer.prop("font_size", Style.font.body)); horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter } TapHandler { onTapped: renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "week_click", { value: model.weekNumber }) } }
+}

data/Components/Builtins/WidgetButton.qml

@@ -0,0 +1,26 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+ZuiControls.WidgetButton {
+  required property var renderer
+      text: renderer.escapeAutoText(renderer.prop("text", "")); tooltipText: renderer.escapeAutoText(renderer.prop("tooltip", "")); active: renderer.prop("active", false) === true
+      dimmed: renderer.prop("dimmed", false) === true; concealed: renderer.prop("concealed", false) === true
+      interactive: renderer.prop("interactive", true) !== false; pressable: renderer.prop("pressable", true) !== false
+      fontFamily: String(renderer.prop("font_family", renderer.fontFamily)); fontSize: Number(renderer.prop("font_size", Style.font.body))
+      foreground: renderer.prop("foreground", renderer.foreground); activeColor: renderer.prop("active_color", Color.urgent)
+      horizontalMargin: Number(renderer.prop("horizontal_margin", 8.5)); verticalPadding: Number(renderer.prop("vertical_padding", 6))
+      fixedWidth: Number(renderer.prop("fixed_width", -1)); fixedHeight: Number(renderer.prop("fixed_height", -1)); textRotation: Number(renderer.prop("text_rotation", 0))
+      keepSpace: renderer.prop("keep_space", false) === true; useActiveColor: renderer.prop("use_active_color", true) !== false
+      maintainIndicatorReveal: renderer.prop("maintain_indicator_reveal", false) === true
+      labelVisible: renderer.prop("label_visible", true) !== false; hasVisualContent: renderer.prop("has_visual_content", text !== "") === true
+      onPressed: function(button) {
+        var eventName = button === Qt.RightButton ? "right_click" : (button === Qt.MiddleButton ? "middle_click" : "click")
+        renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, eventName, { button: button })
+      }
+      onWheelMoved: function(delta) { renderer.bridge.sendEvent(renderer.surfaceName, renderer.controlId, "wheel", { delta: delta }) }
+    }

data/Components/Builtins/Window.qml

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

data/Components/Builtins/WindowCapture.qml

@@ -0,0 +1,11 @@
+import QtQuick
+import QtMultimedia
+
+Item {
+  id:windowRoot;property var renderer:null;property alias windowCapture:nativeCapture;property int handledCommandRevision:-1
+  function selectedWindow(){var windows=nativeCapture.capturableWindows();var requested=renderer?renderer.prop("window",0):0;if(typeof requested==="number"){if(requested>=0&&requested<windows.length)return windows[requested]}else{for(var i=0;i<windows.length;i++)if(String(windows[i].id)===String(requested)||windows[i].description===String(requested))return windows[i]}if(renderer)renderer.componentError("window_not_found","The declared window does not exist",{window:String(requested)});return undefined}
+  function synchronizeWindow(){var selected=selectedWindow();if(selected!==undefined)nativeCapture.window=selected}
+  function command(){if(!renderer)return;var revision=Number(renderer.prop("command_revision",0));if(revision===handledCommandRevision)return;handledCommandRevision=revision;var value=String(renderer.prop("command",""));if(value==="start")nativeCapture.start();else if(value==="stop")nativeCapture.stop()}
+  WindowCapture{id:nativeCapture;active:renderer&&renderer.prop("active",false)===true&&windowRoot.selectedWindow()!==undefined;onActiveChanged:if(renderer)renderer.bridge.sendEvent(renderer.surfaceName,renderer.controlId,active?"start":"stop",{});onErrorOccurred:function(error,errorString){renderer.componentError("window_capture_failed",errorString,{native_code:error})}}
+  Component.onCompleted:{synchronizeWindow();command()} Connections{target:renderer;function onNodeChanged(){windowRoot.synchronizeWindow();windowRoot.command()}}
+}

data/Components/Builtins/Wrap.qml

@@ -0,0 +1,18 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import QtQuick.Layouts
+import QtMultimedia
+import QtQuick.VectorImage
+import "../../Theme"
+import "../../Controls" as ZuiControls
+
+Flow {
+  required property var renderer
+      width: Number(renderer.prop("width", 420))
+      height: renderer.prop("height", null) === null ? childrenRect.height : Number(renderer.prop("height", childrenRect.height))
+      spacing: Number(renderer.prop("spacing", Style.spacing.controlGap))
+      flow: String(renderer.prop("orientation", "horizontal")) === "vertical" ? Flow.TopToBottom : Flow.LeftToRight
+      layoutDirection: String(renderer.prop("layout_direction", "left_to_right")) === "right_to_left"
+        ? Qt.RightToLeft : Qt.LeftToRight
+      Repeater { model: renderer.node.children || []; delegate: renderer.childDelegateComponent }
+    }

data/Components/Builtins/XAnimator.qml

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

data/Components/Builtins/YAnimator.qml

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

data/Components/README.md

@@ -0,0 +1,45 @@
+# QML component adapters
+
+`Builtins/` contains the framework-owned renderer for each Ruby component. Every built-in
+widget has one file—for example, `Builtins/Button.qml`, `Builtins/Icon.qml`, and
+`Builtins/Text.qml`. `ControlNode.qml` only selects a renderer and provides shared lifecycle,
+event, animation, and recursive-child infrastructure.
+
+Applications can extend the framework without modifying `ControlNode.qml` or `Service.qml`.
+Register an adapter before declaring surfaces:
+
+```ruby
+register_component :sparkline,
+  qml: "Sparkline.qml",
+  properties: %i[values color],
+  events: %i[click]
+```
+
+Then place `Sparkline.qml` in this directory and render it with:
+
+```ruby
+component :sparkline, values: [2, 8, 5, 12], color: "#f44"
+```
+
+An adapter is a QML `Item` with any of these framework-injected properties it needs:
+`bridge`, `surfaceName`, `controlId`, and `node`. Events are sent with
+`bridge.sendEvent(surfaceName, controlId, "click", payload)`.
+
+The registry only accepts local adapter basenames and declares every allowed property and
+event. QML source is never accepted from the runtime JSON stream as executable text.
+
+## Animation
+
+Reactive patches can carry native QML transitions:
+
+```ruby
+bind(chart, :opacity, animation: animation(duration: 240, easing: :out_cubic)) do
+  state.visible ? 1.0 : 0.0
+end
+```
+
+The bridge validates the transition, preserves the previous value, and runs a QML
+`PropertyAnimation` against the adapter property. For an animatable custom property, expose
+a QML property with the same name as the registered Ruby property. Adapters remain free to
+use QML `Behavior`, `Transition`, `SequentialAnimation`, `ParallelAnimation`, states,
+shaders, particles, and any other native QML animation internally.