zui 0.0.1

data/Desktop.qml

@@ -0,0 +1,76 @@
+import QtQuick
+import QtQuick.Controls as QQC
+import "Theme"
+
+QQC.ApplicationWindow {
+  id: window
+
+  readonly property string activeSurface: applicationSurface()
+  readonly property var windowOptions: service.optionsFor(activeSurface)
+
+  function option(name, fallback) {
+    var value = windowOptions ? windowOptions[name] : undefined
+    return value === undefined || value === null ? fallback : value
+  }
+
+  function applicationSurface() {
+    if (service.rootId("main") !== "") return "main"
+    var names = Object.keys(service.surfaces)
+    return names.length > 0 ? names[0] : ""
+  }
+
+  visible: option("visible", true) !== false
+  title: String(option("title", zuiApplicationName))
+  width: Number(option("width", 760))
+  height: Number(option("height", 520))
+  minimumWidth: Number(option("min_width", 320))
+  minimumHeight: Number(option("min_height", 220))
+  maximumWidth: Number(option("max_width", 16777215))
+  maximumHeight: Number(option("max_height", 16777215))
+  visibility: option("fullscreen", false) === true
+    ? Window.FullScreen
+    : (option("maximized", false) === true ? Window.Maximized : Window.Windowed)
+  color: option("color", Color.background)
+
+  Service {
+    id: service
+    transport: zuiProcess
+    projectDir: zuiProjectDir
+    componentDir: zuiComponentDir
+    runtimeExecutable: zuiRubyExecutable
+    program: zuiRubyProgram
+    rubyLoadPath: zuiRubyLoadPath
+  }
+
+  ControlNode {
+    id: renderer
+    anchors.fill: parent
+    anchors.margins: Number(window.option("padding", 20))
+    visible: window.activeSurface !== "" && service.rootId(window.activeSurface) !== ""
+    bridge: service
+    surfaceName: window.activeSurface
+    controlId: service.rootId(surfaceName)
+    foreground: Color.foreground
+    fontFamily: Style.font.family
+  }
+
+  Column {
+    anchors.centerIn: parent
+    spacing: Style.spacing.sm
+    visible: !renderer.visible
+    QQC.BusyIndicator { anchors.horizontalCenter: parent.horizontalCenter; running: !service.ready && service.lastError === "" }
+    Text {
+      anchors.horizontalCenter: parent.horizontalCenter
+      text: service.lastError !== "" ? service.lastError : "Starting Zui…"
+      color: Color.foreground
+      font.family: Style.font.family
+      font.pixelSize: Style.font.body
+    }
+  }
+
+  onClosing: function(close) {
+    service.stopping = true
+    if (zuiProcess.running) zuiProcess.stop()
+    close.accepted = true
+  }
+}

data/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Adam Moussa Ali
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

data/README.md

@@ -0,0 +1,112 @@
+# Zui
+
+Zui is a platform-neutral Ruby framework for native desktop interfaces powered by Qt and QML.
+Ruby owns the application, component tree, state, events, bindings, animation descriptions, and
+business logic. QML is the rendering backend, not application code.
+
+This repository is the reusable core. Distribution integrations live at its edges:
+
+- Linux and Windows desktop applications use the standalone Qt host.
+- macOS applications use the same host inside a standard application bundle.
+- Omarchy plugins and applications use the separate
+  [`omarchy-ui`](https://github.com/AdamMusa/omarchy-ui) adapter.
+
+Zui ships a standard Qt `ApplicationWindow`, a bidirectional `QProcess` bridge, its own neutral
+theme and controls, and the full built-in component catalog. It has no runtime dependency on
+Quickshell or an Omarchy installation.
+
+## Core API
+
+```ruby
+require "zui"
+
+Zui.app do
+  state :count, 0
+
+  app :main, title: "Counter", width: 640, height: 420 do
+    column spacing: 16 do
+      label { "Count: #{state.count}" }
+      button "Increment" do
+        state.count += 1
+      end
+    end
+  end
+end
+```
+
+## Developer workflow
+
+```bash
+gem install zui
+zui new telemetry-console
+cd telemetry-console
+zui run main.rb
+zui bundle
+```
+
+Build and install the gem directly from a checkout:
+
+```bash
+gem build zui.gemspec
+gem install ./zui-0.0.1.gem
+```
+
+`zui run` uses the bundled host for supported release targets. If a matching host is not
+bundled, Zui builds and caches it from the checked-in C++ source with CMake and Qt 6.8 or newer.
+
+`zui bundle` produces an application directory on Linux and Windows and a standard `.app` bundle
+on macOS. Each package includes the application, Zui Ruby runtime, QML renderer, component catalog,
+theme, controls, and native host. Ruby and the required Qt runtime libraries must be available on
+the destination machine; native installers can add them with the platform's normal deployment
+tools.
+
+See [Platform support](docs/platforms.md) for host requirements and bundle layouts.
+
+Zui has no separate validation command. `run` opens the app directly, and
+`bundle` packages the project directly. Ruby, DSL, protocol, resource, and QML
+errors are reported by the operation that actually encounters them.
+
+## Reusable application UI
+
+Application UI modules are scoped to one builder instead of being mixed into Zui globally:
+
+```ruby
+module TelemetryConsole
+  module UI
+    def dashboard
+      card { text "System online" }
+    end
+  end
+
+  def self.build
+    Zui::Application.new(ui: UI) do
+      app(:main, title: "Telemetry Console") { dashboard }
+    end
+  end
+
+  def self.run = build.run
+end
+
+TelemetryConsole.run
+```
+
+This keeps `main.rb` at one domain-level call and prevents components from one application leaking
+into another application's DSL.
+
+## Architecture
+
+```text
+Ruby application
+  → Zui DSL/state/events
+  → versioned JSON protocol
+  → native Qt host and process transport
+  → platform-neutral QML renderer
+  → Qt Quick / Controls / Multimedia / optional modules
+```
+
+Every declared component renders as that component or reports an explicit component error. Zui
+does not silently substitute images, alternate controls, or application-specific fallbacks.
+
+## License
+
+MIT

data/Service.qml

@@ -0,0 +1,430 @@
+import QtQuick
+
+Item {
+  id: root
+
+  required property var transport
+  property string projectDir: ""
+  property string componentDir: ""
+  property string runtimeExecutable: ""
+  property string program: ""
+  property string rubyLoadPath: ""
+
+  property bool ready: false
+  property bool stopping: false
+  property string lastError: ""
+  property var surfaces: ({})
+  property var surfaceOptions: ({})
+  property var nodeIndex: ({})
+  property var componentDefinitions: ({})
+  property int revision: 0
+  property int restartDelayMs: 500
+  property int eventSequence: 0
+  readonly property int maxStringLength: 16384
+  readonly property int maxCollectionItems: 256
+
+  property var allowedTypes: ({})
+  property var allowedProperties: ({})
+
+  signal effectReceived(string name, var payload)
+
+  function reportComponentError(surfaceName, controlId, componentType, code, message) {
+    var location = String(surfaceName || "") + "/" + String(controlId || "")
+    var detail = String(componentType || "component") + " error at " + location
+    if (code) detail += " [" + String(code) + "]"
+    if (message) detail += ": " + String(message)
+    lastError = detail.slice(0, 512)
+    console.warn("zui component:", lastError)
+  }
+
+  function validId(value) {
+    return typeof value === "string"
+      && value.length > 0
+      && value.length <= 128
+      && /^[a-zA-Z0-9_.:-]+$/.test(value)
+  }
+
+  function plainObject(value) {
+    return value !== null && typeof value === "object" && !Array.isArray(value)
+  }
+
+  function boundedValue(value, depth) {
+    if (depth > 8) return false
+    if (value === null || typeof value === "number" || typeof value === "boolean") return true
+    if (typeof value === "string") return value.length <= maxStringLength
+    if (Array.isArray(value)) {
+      if (value.length > maxCollectionItems) return false
+      for (var i = 0; i < value.length; i++) if (!boundedValue(value[i], depth + 1)) return false
+      return true
+    }
+    if (plainObject(value)) {
+      var keys = Object.keys(value)
+      if (keys.length > maxCollectionItems) return false
+      for (var k = 0; k < keys.length; k++) {
+        if (keys[k].length > 128 || !boundedValue(value[keys[k]], depth + 1)) return false
+      }
+      return true
+    }
+    return false
+  }
+
+  function validateNode(node, index, depth, count) {
+    if (!plainObject(node) || depth > 32 || count.value >= 2000) return false
+    if (!allowedTypes[String(node.type || "")] || !validId(node.id)) return false
+    if (index[node.id] !== undefined) return false
+
+    var props = node.props === undefined ? {} : node.props
+    if (!plainObject(props)) return false
+    var whitelist = allowedProperties[node.type]
+    for (var key in props) {
+      if (!whitelist[key]) return false
+      var value = props[key]
+      if (!boundedValue(value, 0)) return false
+    }
+
+    var children = node.children === undefined ? [] : node.children
+    if (!Array.isArray(children)) return false
+    if (!componentDefinitions[node.type].container && children.length !== 0)
+      return false
+    var subscriptions = node.events === undefined ? [] : node.events
+    if (!Array.isArray(subscriptions)) return false
+    for (var e = 0; e < subscriptions.length; e++) {
+      var eventName = String(subscriptions[e])
+      if (eventName !== "mount" && eventName !== "unmount" && componentDefinitions[node.type].events.indexOf(eventName) < 0)
+        return false
+    }
+
+    index[node.id] = node
+    count.value += 1
+    for (var i = 0; i < children.length; i++)
+      if (!validateNode(children[i], index, depth + 1, count)) return false
+    return true
+  }
+
+  function validateComponents(components) {
+    if (!plainObject(components)) return false
+    var names = Object.keys(components)
+    if (names.length === 0 || names.length > 256) return false
+    var validated = ({})
+    for (var i = 0; i < names.length; i++) {
+      var name = names[i]
+      var definition = components[name]
+      if (!/^[a-z][a-z0-9_]*$/.test(name) || !plainObject(definition)) return false
+      if (!/^[A-Z][A-Za-z0-9]*\.qml$/.test(String(definition.qml || ""))) return false
+      if (!Array.isArray(definition.properties) || !Array.isArray(definition.events)
+          || !plainObject(definition.property_map || {}) || !plainObject(definition.event_map || {})) return false
+      var propertyMap = ({})
+      for (var p = 0; p < definition.properties.length; p++) {
+        var propertyName = String(definition.properties[p])
+        if (!/^[a-z][a-z0-9_]*$/.test(propertyName)) return false
+        propertyMap[propertyName] = true
+      }
+      validated[name] = {
+        qml: definition.qml,
+        properties: propertyMap,
+        events: definition.events,
+        propertyMap: definition.property_map || {},
+        eventMap: definition.event_map || {},
+        container: definition.container === true,
+        autoBind: definition.auto_bind !== false
+      }
+    }
+    componentDefinitions = validated
+    return true
+  }
+
+  function installRender(message) {
+    if (!plainObject(message.surfaces)) return reject("render surfaces must be an object")
+    if (message.surface_options !== undefined && !validateSurfaceOptions(message.surface_options))
+      return reject("invalid surface options")
+    if (!validateComponents(message.components)) return reject("invalid component registry")
+    var dynamicTypes = ({})
+    var dynamicProperties = ({})
+    for (var componentName in componentDefinitions) {
+      dynamicTypes[componentName] = true
+      dynamicProperties[componentName] = componentDefinitions[componentName].properties
+    }
+    allowedTypes = dynamicTypes
+    allowedProperties = dynamicProperties
+    var nextIndex = ({})
+    var count = { value: 0 }
+    var names = Object.keys(message.surfaces)
+    if (names.length === 0 || names.length > 32) return reject("invalid surface count")
+
+    for (var i = 0; i < names.length; i++) {
+      if (!validId(names[i]) || !validateNode(message.surfaces[names[i]], nextIndex, 0, count))
+        return reject("invalid control tree")
+    }
+
+    surfaces = message.surfaces
+    surfaceOptions = message.surface_options || ({})
+    nodeIndex = nextIndex
+    revision += 1
+    lastError = ""
+  }
+
+  function validateSurfaceOptions(options) {
+    if (!plainObject(options)) return false
+    var allowed = {
+      title: true, width: true, height: true, min_width: true, min_height: true,
+      max_width: true, max_height: true, color: true, visible: true,
+      maximized: true, fullscreen: true
+    }
+    for (var surfaceName in options) {
+      if (!validId(surfaceName) || !plainObject(options[surfaceName])) return false
+      for (var key in options[surfaceName]) {
+        if (!allowed[key]) return false
+        var value = options[surfaceName][key]
+        if (value !== null && typeof value !== "string" && typeof value !== "number" && typeof value !== "boolean")
+          return false
+      }
+    }
+    return true
+  }
+
+  function applyPatch(message) {
+    if (!validId(message.id))
+      return reject("invalid patch")
+    var node = nodeIndex[message.id]
+    if (!node) return reject("patch target rejected")
+
+    if (message.op === "replace_children") {
+      if (!componentDefinitions[node.type].container || !Array.isArray(message.children))
+        return reject("children patch rejected")
+      var removed = ({})
+      function markRemoved(child) {
+        removed[child.id] = true
+        var nested = Array.isArray(child.children) ? child.children : []
+        for (var r = 0; r < nested.length; r++) markRemoved(nested[r])
+      }
+      var oldChildren = Array.isArray(node.children) ? node.children : []
+      for (var oldIndex = 0; oldIndex < oldChildren.length; oldIndex++) markRemoved(oldChildren[oldIndex])
+
+      var childrenIndex = ({})
+      for (var existingId in nodeIndex)
+        if (!removed[existingId] && existingId !== node.id) childrenIndex[existingId] = nodeIndex[existingId]
+      var count = { value: Object.keys(childrenIndex).length }
+      for (var childIndex = 0; childIndex < message.children.length; childIndex++)
+        if (!validateNode(message.children[childIndex], childrenIndex, 0, count)) return reject("invalid children patch")
+
+      var containerReplacement = ({ type: node.type, id: node.id, props: node.props || {}, children: message.children })
+      if (node.events !== undefined) containerReplacement.events = node.events
+      childrenIndex[node.id] = containerReplacement
+      nodeIndex = childrenIndex
+      revision += 1
+      return true
+    }
+
+    if (message.op === "animate") {
+      if (!Array.isArray(message.tracks) || message.tracks.length === 0 || message.tracks.length > 64)
+        return reject("animation tracks rejected")
+      var animatedProps = ({})
+      var validatedTracks = []
+      var sourceProps = node.props || {}
+      for (var trackIndex = 0; trackIndex < message.tracks.length; trackIndex++) {
+        var track = message.tracks[trackIndex]
+        if (!plainObject(track) || typeof track.property !== "string"
+            || !allowedProperties[node.type][track.property] || !validAnimation(track))
+          return reject("animation track rejected")
+        var targetValue = track.to
+        if (targetValue !== null && typeof targetValue !== "string" && typeof targetValue !== "number")
+          return reject("animation target rejected")
+        animatedProps[track.property] = targetValue
+        validatedTracks.push(track)
+      }
+      var animatedReplacement = ({ type: node.type, id: node.id })
+      var finalProps = ({})
+      for (var sourceKey in sourceProps) finalProps[sourceKey] = sourceProps[sourceKey]
+      for (var animatedKey in animatedProps) finalProps[animatedKey] = animatedProps[animatedKey]
+      animatedReplacement.props = finalProps
+      if (node.children !== undefined) animatedReplacement.children = node.children
+      if (node.events !== undefined) animatedReplacement.events = node.events
+      animatedReplacement.transitions = validatedTracks
+      var animatedIndex = ({})
+      for (var animatedId in nodeIndex) animatedIndex[animatedId] = nodeIndex[animatedId]
+      animatedIndex[node.id] = animatedReplacement
+      nodeIndex = animatedIndex
+      revision += 1
+      return true
+    }
+
+    if (message.op !== "set" || typeof message.property !== "string") return reject("invalid patch")
+    if (!allowedProperties[node.type][message.property]) return reject("patch target rejected")
+    var value = message.value
+    if (!boundedValue(value, 0)) return reject("patch value rejected")
+
+    var animation = message.animation
+    if (animation !== undefined && !validAnimation(animation)) return reject("patch animation rejected")
+
+    var replacement = ({ type: node.type, id: node.id })
+    var props = ({})
+    var oldProps = node.props || {}
+    for (var key in oldProps) props[key] = oldProps[key]
+    props[message.property] = value
+    replacement.props = props
+    if (node.children !== undefined) replacement.children = node.children
+    if (node.events !== undefined) replacement.events = node.events
+    if (animation !== undefined) {
+      replacement.transition = {
+        property: message.property,
+        from: oldProps[message.property],
+        to: value,
+        duration: animation.duration,
+        delay: animation.delay,
+        easing: animation.easing,
+        sequence: revision + 1
+      }
+    }
+
+    var nextIndex = ({})
+    for (var id in nodeIndex) nextIndex[id] = nodeIndex[id]
+    nextIndex[node.id] = replacement
+    nodeIndex = nextIndex
+    revision += 1
+  }
+
+  function validAnimation(animation) {
+    if (!plainObject(animation)
+        || typeof animation.duration !== "number" || animation.duration < 0 || animation.duration > 60000
+        || typeof animation.delay !== "number" || animation.delay < 0 || animation.delay > 60000
+        || typeof animation.easing !== "string") return false
+    var easings = ["linear", "in_quad", "out_quad", "in_out_quad", "in_cubic", "out_cubic", "in_out_cubic",
+      "in_back", "out_back", "in_out_back", "in_elastic", "out_elastic", "in_out_elastic",
+      "in_bounce", "out_bounce", "in_out_bounce"]
+    return easings.indexOf(animation.easing) >= 0
+  }
+
+  function handleLine(line) {
+    var raw = String(line || "").trim()
+    if (raw === "" || raw.length > 1048576) return reject("invalid message size")
+
+    var message
+    try { message = JSON.parse(raw) }
+    catch (error) { return reject("invalid JSON from Ruby") }
+    if (!plainObject(message) || message.v !== 1 || typeof message.type !== "string")
+      return reject("invalid protocol envelope")
+
+    if (message.type === "ready") {
+      ready = true
+      restartDelayMs = 500
+      lastError = ""
+    } else if (message.type === "render") {
+      installRender(message)
+    } else if (message.type === "patch") {
+      applyPatch(message)
+    } else if (message.type === "effect") {
+      handleEffect(message)
+    } else if (message.type === "ack") {
+      // Acknowledgements are consumed by benchmarks and future diagnostics.
+    } else if (message.type === "handler_error" || message.type === "runtime_error" || message.type === "protocol_error") {
+      lastError = String(message.message || message.code || "Ruby runtime error").slice(0, 512)
+    } else {
+      reject("unknown message type")
+    }
+  }
+
+  function handleEffect(message) {
+    if (typeof message.name !== "string" || message.name.length > 64
+        || !plainObject(message.payload || {}) || !boundedValue(message.payload || {}, 0))
+      return reject("invalid effect")
+    var payload = message.payload || {}
+    effectReceived(message.name, payload)
+  }
+
+  function reject(reason) {
+    lastError = String(reason || "protocol error").slice(0, 512)
+    console.warn("zui bridge:", lastError)
+    return false
+  }
+
+  function rootId(surfaceName) {
+    var surface = surfaces[String(surfaceName || "")]
+    return surface && validId(surface.id) ? surface.id : ""
+  }
+
+  function optionsFor(surfaceName) {
+    var options = surfaceOptions[String(surfaceName || "")]
+    return plainObject(options) ? options : ({})
+  }
+
+  function nodeFor(controlId) {
+    return nodeIndex[String(controlId || "")] || null
+  }
+
+  function componentSource(typeName) {
+    var definition = componentDefinitions[String(typeName || "")]
+    return definition ? componentDir + "/" + definition.qml : ""
+  }
+
+  function componentDefinition(typeName) {
+    return componentDefinitions[String(typeName || "")] || null
+  }
+
+  function sendEvent(surfaceName, controlId, eventName, payload) {
+    if (!transport.running || !validId(controlId) || !/^[a-z][a-z0-9_]{0,63}$/.test(eventName)
+        || !plainObject(payload || {}) || !boundedValue(payload || {}, 0)) return false
+    var target = nodeIndex[String(controlId)]
+    var definition = target ? componentDefinitions[String(target.type)] : null
+    var subscriptions = target && Array.isArray(target.events) ? target.events : []
+    if (!definition || subscriptions.indexOf(eventName) < 0) return false
+    eventSequence += 1
+    transport.write(JSON.stringify({
+      v: 1,
+      type: "event",
+      surface: String(surfaceName || ""),
+      id: String(controlId),
+      event: eventName,
+      seq: eventSequence,
+      payload: plainObject(payload) ? payload : {}
+    }) + "\n")
+    return true
+  }
+
+  function startRuby() {
+    if (stopping || projectDir === "" || program === "" || transport.running) return
+    transport.start(runtimeExecutable, program, projectDir, rubyLoadPath)
+  }
+
+  onProjectDirChanged: Qt.callLater(startRuby)
+  onProgramChanged: Qt.callLater(startRuby)
+  Component.onCompleted: Qt.callLater(startRuby)
+
+  Component.onDestruction: {
+    stopping = true
+    restartTimer.stop()
+    if (transport.running) transport.stop()
+  }
+
+  Connections {
+    target: transport
+    function onLineReceived(line) { root.handleLine(line) }
+    function onErrorLineReceived(line) {
+      var message = String(line || "").trim()
+      if (message !== "") console.warn("zui ruby:", message)
+    }
+    function onExited(exitCode) {
+      root.ready = false
+      if (root.stopping || root.projectDir === "") return
+      root.lastError = exitCode === 0
+        ? "Zui runtime stopped"
+        : "Zui runtime crashed (exit " + exitCode + ")"
+      restartTimer.interval = root.restartDelayMs
+      restartTimer.start()
+      root.restartDelayMs = Math.min(30000, root.restartDelayMs * 2)
+    }
+  }
+
+  Timer {
+    interval: 100
+    repeat: true
+    running: transport.running
+    onTriggered: transport.write('{"v":1,"type":"tick"}\n')
+  }
+
+  Timer {
+    id: restartTimer
+    interval: 500
+    repeat: false
+    onTriggered: root.startRuby()
+  }
+}

data/Theme/Border.qml

@@ -0,0 +1,22 @@
+pragma Singleton
+import QtQuick
+
+QtObject {
+  function none() {
+    return ({ color: "transparent", widths: ({ top: 0, right: 0, bottom: 0, left: 0 }) })
+  }
+
+  function widths(value) {
+    if (typeof value === "object") return value
+    var width = Number(value || 0)
+    return ({ top: width, right: width, bottom: width, left: width })
+  }
+
+  function flat(color, width) {
+    return ({ color: color, widths: widths(width), gradient: ({ enabled: false, colors: [] }) })
+  }
+
+  function controlSpec(_kind, color, _accent) {
+    return flat(color, 1)
+  }
+}

data/Theme/Color.qml

@@ -0,0 +1,22 @@
+pragma Singleton
+import QtQuick
+
+QtObject {
+  readonly property color background: "#0b1118"
+  readonly property color foreground: "#edf5f7"
+  readonly property color accent: "#59e1ff"
+  readonly property color muted: "#78909c"
+  readonly property color urgent: "#ff5d7a"
+  readonly property color border: "#29404c"
+
+  readonly property QtObject popups: QtObject {
+    readonly property color background: "#111c26"
+    readonly property color border: "#2c4654"
+  }
+
+  readonly property QtObject tooltip: QtObject {
+    readonly property color background: "#172631"
+    readonly property color text: "#f4fbfd"
+    readonly property color border: "#355363"
+  }
+}