@react-native-gpui/svg 0.0.0-stage → 15.15.0-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+All notable changes to `@react-native-gpui/svg` are listed here. Each version's section becomes the notes of its GitHub release.
+
+## 15.15.0-alpha.0 - 2026-11-01
+
+- First release, for `react-native-svg` 15.15.x.
+- Renders SVG elements with the desktop renderer.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Streetwriters
+
+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.

package/README.md

@@ -1,3 +1,23 @@
-# Temporary Holding Version
+# @react-native-gpui/svg
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Desktop support for [`react-native-svg`](https://github.com/software-mansion/react-native-svg): SVG elements drawn by the desktop renderer.
+
+Part of [react-native-gpui](https://github.com/streetwriters/react-native-gpui), React Native for macOS, Windows and Linux.
+
+## Install
+
+Install it next to `react-native-svg`:
+
+```sh
+npm install react-native-svg@15.15.x @react-native-gpui/svg
+```
+
+Keep using `react-native-svg` as you do on iOS and Android; its JavaScript API is unchanged. Autolinking builds the desktop side when the app is built.
+
+## Documentation
+
+[Supported libraries](https://streetwriters.github.io/react-native-gpui/docs/supported-libraries)
+
+## License
+
+MIT. See [LICENSE](LICENSE).

package/desktop/CMakeLists.txt

@@ -0,0 +1,8 @@
+# SVG shared Fabric props/shadow-node descriptors are supplied by RN Codegen
+# and react-native-svg's published common C++ shadow-node headers.
+set(_svg_codegen_dir "${RN_GPUI_PROJECT_ROOT}/desktop/autolink/codegen/rnsvg")
+set_property(GLOBAL APPEND PROPERTY RN_GPUI_PACKAGE_MODULE_SOURCES
+  "${CMAKE_CURRENT_LIST_DIR}/cpp/GpuiSvgModule.cpp")
+set_property(GLOBAL APPEND PROPERTY RN_GPUI_PACKAGE_MODULE_INSTALLERS svg)
+set_property(GLOBAL APPEND PROPERTY RN_GPUI_PACKAGE_MODULE_INCLUDE_DIRS
+  "${_svg_codegen_dir}")

package/desktop/Cargo.toml

@@ -0,0 +1,10 @@
+[package]
+name = "rn-gpui-svg"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+react-native-gpui = { version = "0.1" }
+rn-gpui-sys = { version = "0.1" }
+gpui = { version = "0.2" }
+serde_json = "1"

package/desktop/build.rs

@@ -0,0 +1,38 @@
+//! Puts the C++ runtime's shared libraries on this crate's test binary rpath.
+//!
+//! `rn-gpui-svg`'s tests build gpui trees, which link `libjsi.dylib` and the rest
+//! of the Node-API runtime. Core's `build.rs` emits
+//! `cargo:rustc-link-arg=-Wl,-rpath,<dir>` for its own binary — the app — and that
+//! flag is not inherited by a dependency's test binary, so the test process
+//! aborted in dyld with `Library not loaded: @rpath/libjsi.dylib` before running a
+//! single test.
+//!
+//! Core exports the directories it was given as `DEP_RN_GPUI_CORE_RPATHS`, which
+//! is the same variable core's own `build.rs` reads. Re-emitting it here scopes
+//! the flag to this crate's test binary, since `cargo:rustc-link-arg` without a
+//! target suffix applies to the crate's own targets and not to the app that
+//! depends on it.
+
+fn main() {
+    println!("cargo:rerun-if-env-changed=DEP_RN_GPUI_CORE_RPATHS");
+    println!("cargo:rerun-if-changed=build.rs");
+
+    let Ok(dirs) = std::env::var("DEP_RN_GPUI_CORE_RPATHS") else {
+        return;
+    };
+    let dirs = dirs
+        .split('|')
+        .filter(|dir| !dir.is_empty())
+        .collect::<Vec<_>>();
+    if dirs.is_empty() {
+        return;
+    }
+    // MSVC and MinGW have no rpath, and the flag is rejected outright; Windows
+    // finds the DLLs through PATH, which the test runner already arranges.
+    if std::env::var("CARGO_CFG_TARGET_OS").as_deref() == Ok("windows") {
+        return;
+    }
+    for dir in dirs {
+        println!("cargo:rustc-link-arg=-Wl,-rpath,{dir}");
+    }
+}

package/desktop/cpp/GpuiSvgModule.cpp

@@ -0,0 +1,141 @@
+#include "GpuiModules.h"
+#include "MountBatchBuilder.h"
+
+#include <react/renderer/components/rnsvg/Props.h>
+
+#include <folly/json.h>
+#include <string>
+#include <vector>
+
+namespace rngpui {
+using namespace facebook::react;
+
+namespace {
+constexpr const char* kSvgComponents[] = {
+    "RNSVGSvgView",
+    "RNSVGCircle",
+    "RNSVGEllipse",
+    "RNSVGLine",
+    "RNSVGPath",
+    "RNSVGRect",
+    "RNSVGGroup",
+    "RNSVGDefs",
+    "RNSVGClipPath",
+    "RNSVGLinearGradient",
+    "RNSVGRadialGradient",
+    "RNSVGText",
+    "RNSVGTSpan",
+};
+
+template <typename T>
+folly::dynamic svgJsonValue(const T& value) {
+  return value;
+}
+
+folly::dynamic svgJsonValue(const Float& value) {
+  return value;
+}
+folly::dynamic svgJsonValue(const SharedColor& value) {
+  return value ? folly::dynamic(argb(value)) : folly::dynamic(nullptr);
+}
+folly::dynamic svgJsonValue(const std::vector<std::string>& values) {
+  folly::dynamic result = folly::dynamic::array();
+  for (const auto& value : values)
+    result.push_back(value);
+  return result;
+}
+folly::dynamic svgJsonValue(const std::vector<Float>& values) {
+  folly::dynamic result = folly::dynamic::array();
+  for (auto value : values)
+    result.push_back(value);
+  return result;
+}
+
+template <typename T>
+folly::dynamic svgPropsJson(const T& props) {
+  folly::dynamic result = folly::dynamic::object();
+#define RN_GPUI_COPY_SVG_PROP(name)       \
+  if constexpr (requires { props.name; }) \
+  result[#name] = svgJsonValue(props.name)
+  RN_GPUI_COPY_SVG_PROP(name);
+  RN_GPUI_COPY_SVG_PROP(d);
+  RN_GPUI_COPY_SVG_PROP(x);
+  RN_GPUI_COPY_SVG_PROP(y);
+  RN_GPUI_COPY_SVG_PROP(x1);
+  RN_GPUI_COPY_SVG_PROP(y1);
+  RN_GPUI_COPY_SVG_PROP(x2);
+  RN_GPUI_COPY_SVG_PROP(y2);
+  RN_GPUI_COPY_SVG_PROP(cx);
+  RN_GPUI_COPY_SVG_PROP(cy);
+  RN_GPUI_COPY_SVG_PROP(r);
+  RN_GPUI_COPY_SVG_PROP(rx);
+  RN_GPUI_COPY_SVG_PROP(ry);
+  RN_GPUI_COPY_SVG_PROP(width);
+  RN_GPUI_COPY_SVG_PROP(height);
+  RN_GPUI_COPY_SVG_PROP(vbWidth);
+  RN_GPUI_COPY_SVG_PROP(vbHeight);
+  RN_GPUI_COPY_SVG_PROP(minX);
+  RN_GPUI_COPY_SVG_PROP(minY);
+  RN_GPUI_COPY_SVG_PROP(align);
+  RN_GPUI_COPY_SVG_PROP(meetOrSlice);
+  RN_GPUI_COPY_SVG_PROP(opacity);
+  RN_GPUI_COPY_SVG_PROP(color);
+  RN_GPUI_COPY_SVG_PROP(propList);
+  RN_GPUI_COPY_SVG_PROP(fill);
+  RN_GPUI_COPY_SVG_PROP(fillOpacity);
+  RN_GPUI_COPY_SVG_PROP(fillRule);
+  RN_GPUI_COPY_SVG_PROP(stroke);
+  RN_GPUI_COPY_SVG_PROP(strokeOpacity);
+  RN_GPUI_COPY_SVG_PROP(strokeWidth);
+  RN_GPUI_COPY_SVG_PROP(strokeLinecap);
+  RN_GPUI_COPY_SVG_PROP(strokeLinejoin);
+  RN_GPUI_COPY_SVG_PROP(strokeDasharray);
+  RN_GPUI_COPY_SVG_PROP(strokeDashoffset);
+  RN_GPUI_COPY_SVG_PROP(strokeMiterlimit);
+  RN_GPUI_COPY_SVG_PROP(matrix);
+  RN_GPUI_COPY_SVG_PROP(mask);
+  RN_GPUI_COPY_SVG_PROP(clipPath);
+  RN_GPUI_COPY_SVG_PROP(offset);
+  RN_GPUI_COPY_SVG_PROP(stopColor);
+  RN_GPUI_COPY_SVG_PROP(stopOpacity);
+#undef RN_GPUI_COPY_SVG_PROP
+  return result;
+}
+
+folly::dynamic svgPropsJson(const std::string& component, const Props& props) {
+#define RN_GPUI_SVG_PROPS(tag, type)                    \
+  if (component == tag) {                               \
+    if (auto typed = dynamic_cast<const type*>(&props)) \
+      return svgPropsJson(*typed);                      \
+  }
+  RN_GPUI_SVG_PROPS("RNSVGSvgView", RNSVGSvgViewProps)
+  RN_GPUI_SVG_PROPS("RNSVGCircle", RNSVGCircleProps)
+  RN_GPUI_SVG_PROPS("RNSVGEllipse", RNSVGEllipseProps)
+  RN_GPUI_SVG_PROPS("RNSVGLine", RNSVGLineProps)
+  RN_GPUI_SVG_PROPS("RNSVGPath", RNSVGPathProps)
+  RN_GPUI_SVG_PROPS("RNSVGRect", RNSVGRectProps)
+  RN_GPUI_SVG_PROPS("RNSVGGroup", RNSVGGroupProps)
+  RN_GPUI_SVG_PROPS("RNSVGDefs", RNSVGDefsProps)
+  RN_GPUI_SVG_PROPS("RNSVGClipPath", RNSVGClipPathProps)
+  RN_GPUI_SVG_PROPS("RNSVGLinearGradient", RNSVGLinearGradientProps)
+  RN_GPUI_SVG_PROPS("RNSVGRadialGradient", RNSVGRadialGradientProps)
+  RN_GPUI_SVG_PROPS("RNSVGText", RNSVGTextProps)
+  RN_GPUI_SVG_PROPS("RNSVGTSpan", RNSVGTSpanProps)
+#undef RN_GPUI_SVG_PROPS
+  return folly::dynamic::object();
+}
+
+} // namespace
+
+void rn_gpui_install_svg_module() {
+  for (const char* component : kSvgComponents) {
+    registerComponentProps(
+        component, [](const std::string& name, const ShadowView& view) {
+          if (!view.props)
+            return std::string("{}");
+          return folly::toJson(svgPropsJson(name, *view.props));
+        });
+  }
+}
+
+} // namespace rngpui

package/desktop/src/lib.rs

@@ -0,0 +1,465 @@
+use gpui::{div, prelude::*, px, AnyElement, App, Window};
+use react_native_gpui::extensions::{
+    register_component_renderer, ComponentNode, ComponentRenderer,
+};
+use rn_gpui_sys::ffi::RectF;
+use std::collections::HashMap;
+use std::hash::{Hash, Hasher};
+use std::sync::{Arc, Mutex, OnceLock, Weak};
+
+const COMPONENTS: &[&str] = &[
+    "RNSVGSvgView",
+    "RNSVGCircle",
+    "RNSVGEllipse",
+    "RNSVGLine",
+    "RNSVGPath",
+    "RNSVGRect",
+    "RNSVGGroup",
+    "RNSVGDefs",
+    "RNSVGClipPath",
+    "RNSVGLinearGradient",
+    "RNSVGRadialGradient",
+    "RNSVGText",
+    "RNSVGTSpan",
+    "RNSVGMask",
+    "RNSVGSymbol",
+    "RNSVGPattern",
+    "RNSVGMarker",
+    "RNSVGTextPath",
+    "RNSVGUse",
+];
+
+struct SvgRenderer;
+
+impl ComponentRenderer for SvgRenderer {
+    fn render(
+        &self,
+        node: &ComponentNode,
+        window: &mut Window,
+        cx: &mut App,
+    ) -> Option<AnyElement> {
+        if node.component != "RNSVGSvgView" {
+            return Some(div().into_any_element());
+        }
+        // The frame is in unscaled coordinates and this element is painted
+        // scaled, exactly as `ComponentRenderer::render` documents, so the box
+        // has to be scaled the same way core scales the element it would have
+        // built. `size_full()` sized the image to its parent instead: the
+        // document is rasterized at the window's scale factor, and an image
+        // carries no intrinsic size, so every SVG stretched to fill whatever
+        // surrounded it and painted over the text below it.
+        let frame = node.frame;
+        let (scale_x, scale_y) = node.scale;
+        let width = frame.w * scale_x;
+        let height = frame.h * scale_y;
+        let document = svg_document(node, frame, cx);
+        let scale = window.scale_factor();
+        let image = cached_svg_image(document, frame.w, frame.h, scale);
+        Some(
+            gpui::img(image)
+                .w(px(width))
+                .h(px(height))
+                .into_any_element(),
+        )
+    }
+}
+
+pub fn rn_gpui_register() {
+    for component in COMPONENTS {
+        register_component_renderer(*component, Arc::new(SvgRenderer));
+    }
+}
+
+fn svg_document(node: &ComponentNode, frame: RectF, cx: &App) -> String {
+    let props = &node.props;
+    let mut attributes = format!(
+        "xmlns=\"http://www.w3.org/2000/svg\" width=\"{}\" height=\"{}\"",
+        svg_number(frame.w),
+        svg_number(frame.h)
+    );
+    for (name, attribute) in [
+        ("color", "color"),
+        ("fill", "fill"),
+        ("stroke", "stroke"),
+        ("strokeWidth", "stroke-width"),
+        ("fillOpacity", "fill-opacity"),
+        ("strokeOpacity", "stroke-opacity"),
+        ("opacity", "opacity"),
+    ] {
+        if let Some(value) = props.get(name).filter(|value| !value.is_null()) {
+            if let Some(value) = svg_value(value) {
+                attributes.push_str(&format!(" {attribute}=\"{}\"", svg_escape(&value)));
+            }
+        }
+    }
+    if let Some(cap) = props
+        .get("strokeLinecap")
+        .and_then(serde_json::Value::as_i64)
+    {
+        let cap = ["butt", "round", "square"]
+            .get(cap as usize)
+            .copied()
+            .unwrap_or("butt");
+        attributes.push_str(&format!(" stroke-linecap=\"{cap}\""));
+    }
+    if let Some(join) = props
+        .get("strokeLinejoin")
+        .and_then(serde_json::Value::as_i64)
+    {
+        let join = ["miter", "round", "bevel"]
+            .get(join as usize)
+            .copied()
+            .unwrap_or("miter");
+        attributes.push_str(&format!(" stroke-linejoin=\"{join}\""));
+    }
+    if let (Some(width), Some(height)) = (
+        props.get("vbWidth").and_then(serde_json::Value::as_f64),
+        props.get("vbHeight").and_then(serde_json::Value::as_f64),
+    ) {
+        if width > 0.0 && height > 0.0 {
+            let min_x = props
+                .get("minX")
+                .and_then(serde_json::Value::as_f64)
+                .unwrap_or(0.0);
+            let min_y = props
+                .get("minY")
+                .and_then(serde_json::Value::as_f64)
+                .unwrap_or(0.0);
+            attributes.push_str(&format!(
+                " viewBox=\"{} {} {} {}\"",
+                svg_number(min_x as f32),
+                svg_number(min_y as f32),
+                svg_number(width as f32),
+                svg_number(height as f32)
+            ));
+            if let Some(align) = props.get("align").and_then(serde_json::Value::as_str) {
+                let mode = match props
+                    .get("meetOrSlice")
+                    .and_then(serde_json::Value::as_i64)
+                    .unwrap_or(0)
+                {
+                    1 => "slice",
+                    2 => "none",
+                    _ => "meet",
+                };
+                attributes.push_str(&format!(
+                    " preserveAspectRatio=\"{} {}\"",
+                    svg_escape(align),
+                    mode
+                ));
+            }
+        }
+    }
+    let mut document = format!("<svg {attributes}>");
+    for child in &node.children {
+        svg_node(child, cx, &mut document);
+    }
+    document.push_str("</svg>");
+    document
+}
+
+fn svg_node(node: &ComponentNode, cx: &App, output: &mut String) {
+    let props = &node.props;
+    let element = match node.component.as_str() {
+        "RNSVGCircle" => "circle",
+        "RNSVGEllipse" => "ellipse",
+        "RNSVGLine" => "line",
+        "RNSVGPath" => "path",
+        "RNSVGRect" => "rect",
+        "RNSVGGroup" => "g",
+        "RNSVGDefs" => "defs",
+        "RNSVGClipPath" => "clipPath",
+        "RNSVGLinearGradient" => "linearGradient",
+        "RNSVGRadialGradient" => "radialGradient",
+        "RNSVGMask" => "mask",
+        "RNSVGSymbol" => "symbol",
+        "RNSVGPattern" => "pattern",
+        "RNSVGMarker" => "marker",
+        "RNSVGText" => "text",
+        "RNSVGTSpan" => "tspan",
+        "RNSVGTextPath" => "textPath",
+        "RNSVGUse" => "use",
+        _ => "",
+    };
+    if element.is_empty() {
+        for child in &node.children {
+            svg_node(child, cx, output);
+        }
+        return;
+    }
+    let mut attributes = String::new();
+    for name in [
+        "id",
+        "name",
+        "href",
+        "d",
+        "x",
+        "y",
+        "x1",
+        "y1",
+        "x2",
+        "y2",
+        "cx",
+        "cy",
+        "r",
+        "rx",
+        "ry",
+        "width",
+        "height",
+        "color",
+        "fill",
+        "stroke",
+        "strokeWidth",
+        "fillOpacity",
+        "strokeOpacity",
+        "strokeDasharray",
+        "strokeDashoffset",
+        "strokeMiterlimit",
+        "opacity",
+        "fontSize",
+        "fontWeight",
+        "fontFamily",
+        "textLength",
+        "dominantBaseline",
+        "offset",
+        "stopColor",
+        "stopOpacity",
+    ] {
+        if !svg_property_is_set(props, name) {
+            continue;
+        }
+        if let Some(value) = props.get(name) {
+            let attribute = match name {
+                "strokeWidth" => "stroke-width",
+                "fillOpacity" => "fill-opacity",
+                "strokeOpacity" => "stroke-opacity",
+                "strokeDasharray" => "stroke-dasharray",
+                "strokeDashoffset" => "stroke-dashoffset",
+                "strokeMiterlimit" => "stroke-miterlimit",
+                "fontSize" => "font-size",
+                "fontWeight" => "font-weight",
+                "fontFamily" => "font-family",
+                "dominantBaseline" => "dominant-baseline",
+                "stopColor" => "stop-color",
+                "stopOpacity" => "stop-opacity",
+                other => other,
+            };
+            let value = if value.is_null() && matches!(name, "fill" | "stroke") {
+                Some("none".to_owned())
+            } else {
+                svg_value(value)
+            };
+            if let Some(value) = value {
+                attributes.push_str(&format!(" {attribute}=\"{}\"", svg_escape(&value)));
+            }
+        }
+    }
+    if let Some(rule) = props
+        .get("fillRule")
+        .filter(|_| svg_property_is_set(props, "fillRule"))
+        .and_then(serde_json::Value::as_i64)
+    {
+        attributes.push_str(&format!(
+            " fill-rule=\"{}\"",
+            if rule == 0 { "evenodd" } else { "nonzero" }
+        ));
+    }
+    if let Some(cap) = props
+        .get("strokeLinecap")
+        .filter(|_| svg_property_is_set(props, "strokeLinecap"))
+        .and_then(serde_json::Value::as_i64)
+    {
+        let cap = ["butt", "round", "square"]
+            .get(cap as usize)
+            .copied()
+            .unwrap_or("butt");
+        attributes.push_str(&format!(" stroke-linecap=\"{cap}\""));
+    }
+    if let Some(join) = props
+        .get("strokeLinejoin")
+        .filter(|_| svg_property_is_set(props, "strokeLinejoin"))
+        .and_then(serde_json::Value::as_i64)
+    {
+        let join = ["miter", "round", "bevel"]
+            .get(join as usize)
+            .copied()
+            .unwrap_or("miter");
+        attributes.push_str(&format!(" stroke-linejoin=\"{join}\""));
+    }
+    if let Some(matrix) = props.get("matrix").and_then(serde_json::Value::as_array) {
+        if matrix.len() >= 16 {
+            let values = [0, 1, 4, 5, 12, 13].map(|index| matrix[index].as_f64().unwrap_or(0.0));
+            attributes.push_str(&format!(
+                " transform=\"matrix({} {} {} {} {} {})\"",
+                values[0], values[1], values[2], values[3], values[4], values[5]
+            ));
+        }
+    }
+    output.push('<');
+    output.push_str(element);
+    output.push_str(&attributes);
+    output.push('>');
+    for child in &node.children {
+        svg_node(child, cx, output);
+    }
+    output.push_str("</");
+    output.push_str(element);
+    output.push('>');
+}
+
+fn svg_property_is_set(props: &serde_json::Value, name: &str) -> bool {
+    if !matches!(
+        name,
+        "fill"
+            | "fillOpacity"
+            | "fillRule"
+            | "stroke"
+            | "strokeWidth"
+            | "strokeOpacity"
+            | "strokeLinecap"
+            | "strokeLinejoin"
+            | "strokeDasharray"
+            | "strokeDashoffset"
+            | "strokeMiterlimit"
+    ) {
+        return true;
+    }
+    props
+        .get("propList")
+        .and_then(serde_json::Value::as_array)
+        .is_none_or(|properties| {
+            properties
+                .iter()
+                .any(|property| property.as_str() == Some(name))
+        })
+}
+
+fn svg_value(value: &serde_json::Value) -> Option<String> {
+    match value.get("type").and_then(serde_json::Value::as_i64) {
+        Some(1) => {
+            return value
+                .get("brushRef")
+                .and_then(serde_json::Value::as_str)
+                .map(|id| format!("url(#{id})"))
+        }
+        Some(2) => return Some("currentColor".to_owned()),
+        Some(3) => return Some("context-fill".to_owned()),
+        Some(4) => return Some("context-stroke".to_owned()),
+        _ => {}
+    }
+
+    if let Some(number) = value.as_f64() {
+        if number < 0.0 && number.fract() == 0.0 {
+            return Some(format!("#{:06x}", (number as i64 as u32) & 0x00ff_ffff));
+        }
+        if (0x0100_0000..=0xffff_ffff).contains(&(number as u64)) {
+            let argb = number as u32;
+            return Some(format!(
+                "rgba({}, {}, {}, {})",
+                (argb >> 16) & 0xff,
+                (argb >> 8) & 0xff,
+                argb & 0xff,
+                ((argb >> 24) & 0xff) as f32 / 255.0
+            ));
+        }
+        return Some(svg_number(number as f32));
+    }
+    if let Some(value) = value.as_str() {
+        return Some(value.to_owned());
+    }
+    if let Some(value) = value.as_array() {
+        return Some(
+            value
+                .iter()
+                .filter_map(svg_value)
+                .collect::<Vec<_>>()
+                .join(" "),
+        );
+    }
+    value
+        .get("payload")
+        .and_then(svg_value)
+        .or_else(|| value.get("value").and_then(svg_value))
+}
+
+fn svg_escape(value: &str) -> String {
+    value
+        .replace('&', "&amp;")
+        .replace('"', "&quot;")
+        .replace('<', "&lt;")
+        .replace('>', "&gt;")
+}
+
+fn svg_number(value: f32) -> String {
+    if value.fract() == 0.0 {
+        format!("{value:.0}")
+    } else {
+        value.to_string()
+    }
+}
+
+fn cached_svg_image(
+    document: String,
+    width: f32,
+    height: f32,
+    scale: f32,
+) -> std::sync::Arc<gpui::Image> {
+    type SvgCache = HashMap<(u64, u32, u32, u32), Weak<gpui::Image>>;
+    static CACHE: OnceLock<Mutex<SvgCache>> = OnceLock::new();
+    let mut hasher = std::collections::hash_map::DefaultHasher::new();
+    document.hash(&mut hasher);
+    let key = (
+        hasher.finish(),
+        width.to_bits(),
+        height.to_bits(),
+        scale.to_bits(),
+    );
+    let cache = CACHE.get_or_init(|| Mutex::new(HashMap::new()));
+    let mut cache = cache
+        .lock()
+        .unwrap_or_else(|poisoned| poisoned.into_inner());
+    if let Some(image) = cache.get(&key).and_then(Weak::upgrade) {
+        return image;
+    }
+    let image = std::sync::Arc::new(gpui::Image::from_bytes(
+        gpui::ImageFormat::Svg,
+        document.into_bytes(),
+    ));
+    cache.insert(key, std::sync::Arc::downgrade(&image));
+    if cache.len() > 512 {
+        cache.retain(|_, image| image.strong_count() > 0);
+    }
+    image
+}
+
+#[cfg(test)]
+mod svg_paint_tests {
+    use super::{svg_property_is_set, svg_value};
+    use serde_json::json;
+
+    #[test]
+    fn brushes_keep_current_color_and_reference_semantics() {
+        assert_eq!(
+            svg_value(&json!({"type": 2})).as_deref(),
+            Some("currentColor")
+        );
+        assert_eq!(
+            svg_value(&json!({"type": 1, "brushRef": "gradient"})).as_deref(),
+            Some("url(#gradient)")
+        );
+        assert_eq!(
+            svg_value(&json!({"type": 0, "payload": 0xff64d2ff_u32})).as_deref(),
+            Some("rgba(100, 210, 255, 1)")
+        );
+    }
+
+    #[test]
+    fn default_black_fill_does_not_override_inherited_none() {
+        let child = json!({"fill": {"type": 0, "payload": 0xff000000_u32}, "strokeLinecap": 0, "propList": []});
+        assert!(!svg_property_is_set(&child, "fill"));
+        assert!(!svg_property_is_set(&child, "strokeLinecap"));
+        let group = json!({"fill": null, "stroke": {"type": 2}, "propList": ["fill", "stroke"]});
+        assert!(svg_property_is_set(&group, "fill"));
+        assert!(svg_property_is_set(&group, "stroke"));
+    }
+}

package/package.json

@@ -1,6 +1,32 @@
 {
   "name": "@react-native-gpui/svg",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "15.15.0-alpha.0",
+  "description": "GPUI Fabric renderer adapter for react-native-svg",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/streetwriters/react-native-gpui.git",
+    "directory": "modules/svg"
+  },
+  "homepage": "https://streetwriters.github.io/react-native-gpui/",
+  "bugs": {
+    "url": "https://github.com/streetwriters/react-native-gpui/issues"
+  },
+  "files": [
+    "desktop",
+    "react-native.config.js",
+    "CHANGELOG.md",
+    "!**/*.test.js",
+    "!**/*.test.mjs",
+    "!**/*.test.ts",
+    "!**/*.test.cjs"
+  ],
+  "peerDependencies": {
+    "react-native": "0.87.x",
+    "react-native-svg": "15.15.x"
+  },
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,51 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      desktop: {
+        cmake: 'desktop',
+        crate: 'rn-gpui-svg',
+        componentCodegenPackage: 'react-native-svg',
+        componentSourcePackage: 'react-native-svg',
+        componentDescriptors: [
+          'RNSVGCircleComponentDescriptor',
+          'RNSVGClipPathComponentDescriptor',
+          'RNSVGDefsComponentDescriptor',
+          'RNSVGFeBlendComponentDescriptor',
+          'RNSVGFeColorMatrixComponentDescriptor',
+          'RNSVGFeCompositeComponentDescriptor',
+          'RNSVGFeFloodComponentDescriptor',
+          'RNSVGFeGaussianBlurComponentDescriptor',
+          'RNSVGFeMergeComponentDescriptor',
+          'RNSVGFeOffsetComponentDescriptor',
+          'RNSVGFilterComponentDescriptor',
+          'RNSVGEllipseComponentDescriptor',
+          'RNSVGForeignObjectComponentDescriptor',
+          'RNSVGGroupComponentDescriptor',
+          'RNSVGLinearGradientComponentDescriptor',
+          'RNSVGLineComponentDescriptor',
+          'RNSVGMarkerComponentDescriptor',
+          'RNSVGMaskComponentDescriptor',
+          'RNSVGPathComponentDescriptor',
+          'RNSVGPatternComponentDescriptor',
+          'RNSVGRadialGradientComponentDescriptor',
+          'RNSVGRectComponentDescriptor',
+          'RNSVGSymbolComponentDescriptor',
+          'RNSVGTextComponentDescriptor',
+          'RNSVGTextPathComponentDescriptor',
+          'RNSVGTSpanComponentDescriptor',
+          'RNSVGUseComponentDescriptor',
+          'RNSVGSvgViewComponentDescriptor',
+        ],
+        componentHeaders: [
+          'react/renderer/components/rnsvg/ComponentDescriptors.h',
+          'react/renderer/components/rnsvg/RNSVGComponentDescriptors.h',
+        ],
+        componentIncludeDirs: ['common/cpp'],
+        componentSources: [
+          'common/cpp/react/renderer/components/rnsvg/RNSVGShadowNodes.cpp',
+          'common/cpp/react/renderer/components/rnsvg/RNSVGLayoutableShadowNode.cpp',
+        ],
+      },
+    },
+  },
+};