@@ -0,0 +1,142 @@
+(function () {
+    // Small demo: create/update/remove a composition border using runtime helpers
+    // Falls back to warnings if the runtime bindings are not exposed to JS.
+
+    function resolveCreateFn() {
+        if (typeof NSWinRT !== 'undefined' && typeof NSWinRT.createCompositionBorder === 'function') return NSWinRT.createCompositionBorder;
+        if (typeof runtime_create_border_instance === 'function') return runtime_create_border_instance;
+        if (typeof NSWinRT !== 'undefined' && typeof NSWinRT.createBorder === 'function') return NSWinRT.createBorder;
+        return null;
+    }
+
+    function resolveSetFn() {
+        if (typeof runtime_set_border === 'function') return runtime_set_border;
+        if (typeof NSWinRT !== 'undefined' && typeof NSWinRT.setBorder === 'function') return NSWinRT.setBorder;
+        return null;
+    }
+
+    function resolveFreeFn() {
+        if (typeof runtime_free_border_instance === 'function') return runtime_free_border_instance;
+        if (typeof NSWinRT !== 'undefined' && typeof NSWinRT.freeBorder === 'function') return NSWinRT.freeBorder;
+        return null;
+    }
+
+    function createJSBorder(element) {
+        const createFn = resolveCreateFn();
+        const setFn = resolveSetFn();
+        const freeFn = resolveFreeFn();
+
+        if (!createFn) {
+            console.warn('Border demo: runtime_create_border_instance not available.');
+            return null;
+        }
+
+        // If the runtime provides the new higher-level helper, use it and
+        // return the proxy object directly (it auto-finalizes on GC).
+        if (typeof NSWinRT !== 'undefined' && typeof NSWinRT.createCompositionBorder === 'function') {
+            try {
+                return NSWinRT.createCompositionBorder(element);
+            } catch (e) {
+                console.warn('createCompositionBorder failed:', e);
+            }
+        }
+
+        // Many WinRT proxies expose an internal numeric handle as `__handle`.
+        const elHandle = (element && typeof element === 'object' && typeof element.__handle === 'number')
+            ? element.__handle
+            : element;
+
+        const id = createFn(elHandle);
+        if (!id) {
+            console.warn('Border demo: create returned falsy id');
+            return null;
+        }
+
+        const holder = { id, element };
+
+        // Install shared finalizer registry on window so GC will free the native instance.
+        if (typeof FinalizationRegistry === 'function') {
+            if (!window.__ns_border_finalizer) {
+                window.__ns_border_finalizer = new FinalizationRegistry(function (id) {
+                    try {
+                        const f = resolveFreeFn();
+                        if (f) f(id);
+                    } catch (e) {}
+                });
+            }
+            window.__ns_border_finalizer.register(holder, id);
+        }
+
+        holder.update = function (left, top, right, bottom, color, r_tl, r_tr, r_br, r_bl) {
+            const f = resolveSetFn();
+            if (!f) { console.warn('Border demo: runtime_set_border not available'); return; }
+            f(id, left, top, right, bottom, color, r_tl, r_tr, r_br, r_bl);
+        };
+
+        holder.free = function () {
+            const f = resolveFreeFn();
+            if (f) f(id);
+        };
+
+        return holder;
+    }
+
+    function runDemo() {
+        try {
+            const window = Windows.UI.Xaml.Window.Current;
+            const panel = new Windows.UI.Xaml.Controls.StackPanel();
+            panel.Orientation = Windows.UI.Xaml.Controls.Orientation.Vertical;
+
+            const sample = new Windows.UI.Xaml.Controls.Border();
+            sample.Width = 320;
+            sample.Height = 160;
+            sample.Margin = new Windows.UI.Xaml.Thickness(20);
+            sample.Background = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.AliceBlue);
+
+            panel.Children.Append(sample);
+
+            const status = new Windows.UI.Xaml.Controls.TextBlock();
+            status.Text = 'Border demo: initializing...';
+            status.Margin = new Windows.UI.Xaml.Thickness(20, 6, 20, 20);
+            panel.Children.Append(status);
+
+            window.Content = panel;
+            window.Activate();
+
+            const holder = createJSBorder(sample);
+            if (!holder) {
+                status.Text = 'Border demo: runtime bindings not available.';
+                return;
+            }
+
+            status.Text = 'Border demo: created instance ' + holder.id;
+
+            // initial border: 4px all sides, blue, radius 8
+            holder.update(4, 4, 4, 4, 0xFF0078D7, 8, 8, 8, 8);
+
+            // update after 2s
+            setTimeout(function () {
+                holder.update(8, 2, 8, 2, 0xFF00C853, 16, 8, 12, 4);
+                status.Text = 'Border demo: updated';
+            }, 2000);
+
+            // drop after 6s so runtime finalizer/unloaded handlers perform cleanup
+            setTimeout(function () {
+                window.__demo_border_holder = null;
+                status.Text = 'Border demo: dropped holder (runtime will clean up)';
+            }, 6000);
+
+            // keep a debug reference so you can inspect it in devtools
+            window.__demo_border_holder = holder;
+        } catch (e) {
+            console.warn('Border demo failed:', e && e.message ? e.message : e);
+        }
+    }
+
+    // Auto-run when loaded
+    if (typeof document === 'undefined') {
+        try { runDemo(); } catch (e) {}
+    } else {
+        document.addEventListener('DOMContentLoaded', runDemo);
+    }
+})();
@@ -1,4 +1,4 @@
-use std::ffi::{c_char, CStr, CString};
+use std::ffi::{c_char, CStr, CString, c_void};
 use std::sync::{Once, OnceLock};
 use std::sync::Arc;
 use runtime::Runtime;
@@ -213,6 +213,68 @@ pub extern "C" fn runtime_pump_timers() {
     });
 }
 
+/// Attach a (cached) container visual to the supplied `UIElement` pointer and
+/// return the raw visual pointer as an `i64`. Returns 0 on error.
+#[no_mangle]
+pub extern "C" fn runtime_attach_border_container(element: *mut c_void) -> i64 {
+    if element.is_null() { return 0; }
+    let result = std::panic::catch_unwind(|| {
+        match runtime::composition_border::ensure_container_for_element(element) {
+            Ok(ptr) => ptr,
+            Err(err) => {
+                eprintln!("[NativeScript] runtime_attach_border_container error: {:?}", err);
+                0
+            }
+        }
+    });
+    match result {
+        Ok(v) => v,
+        Err(_) => 0,
+    }
+}
+
+/// Create a border helper instance attached to `element` and return an opaque id.
+#[no_mangle]
+pub extern "C" fn runtime_create_border_instance(element: *mut c_void) -> i64 {
+    if element.is_null() { return 0; }
+    match runtime::composition_border::create_border_instance(element) {
+        Ok(id) => id,
+        Err(err) => {
+            eprintln!("[NativeScript] runtime_create_border_instance error: {:?}", err);
+            0
+        }
+    }
+}
+
+/// Set border on previously created instance. Returns 1 on success, 0 on failure.
+#[no_mangle]
+pub extern "C" fn runtime_set_border(
+    instance_id: i64,
+    left: f32,
+    top: f32,
+    right: f32,
+    bottom: f32,
+    color: u32,
+    radius_tl: f32,
+    radius_tr: f32,
+    radius_br: f32,
+    radius_bl: f32,
+) -> i32 {
+    match runtime::composition_border::set_border(instance_id, left, top, right, bottom, color, radius_tl, radius_tr, radius_br, radius_bl) {
+        Ok(()) => 1,
+        Err(err) => {
+            eprintln!("[NativeScript] runtime_set_border error: {:?}", err);
+            0
+        }
+    }
+}
+
+/// Free a border instance previously created.
+#[no_mangle]
+pub extern "C" fn runtime_free_border_instance(instance_id: i64) {
+    let _ = runtime::composition_border::free_border_instance(instance_id);
+}
+
 /// Free a string previously returned by `runtime_devtools_start`.
 #[cfg(feature = "devtools")]
 #[no_mangle]
 
@@ -40,8 +40,14 @@ features = [
     "Win32_UI_Shell",
     "Win32_UI_WindowsAndMessaging",
     "Data_Json",
+    "UI_Composition",
+    "Foundation_Numerics",
+    "Graphics_Imaging",
 ]
 
+[features]
+default = []
+
 [dev-dependencies]
 criterion = "0.5"