@theaiplatform/miniapp-sdk 0.0.0 → 0.0.2

package/examples/wasm-ui/src/lib.rs

@@ -0,0 +1,190 @@
+//! Capability: miniapp-platform
+//!
+//! Clean wasm-bindgen consumer of `@theaiplatform/miniapp-sdk/ui/wasm`.
+
+use std::{
+    cell::{Cell, RefCell},
+    collections::HashSet,
+    rc::Rc,
+};
+
+use js_sys::Function;
+use serde::Deserialize;
+use serde_json::{Value, json};
+use wasm_bindgen::{JsCast, prelude::*};
+use web_sys::Element;
+
+#[wasm_bindgen(module = "@theaiplatform/miniapp-sdk/ui/wasm")]
+extern "C" {
+    type JsMiniAppUiRoot;
+
+    #[wasm_bindgen(js_name = createMiniAppUiRoot, catch)]
+    fn create_miniapp_ui_root(
+        container: &Element,
+        model: &JsValue,
+        dispatch: &Function,
+    ) -> Result<JsMiniAppUiRoot, JsValue>;
+
+    #[wasm_bindgen(method, catch)]
+    fn update(this: &JsMiniAppUiRoot, model: &JsValue) -> Result<(), JsValue>;
+
+    #[wasm_bindgen(method, catch)]
+    fn focus(this: &JsMiniAppUiRoot, control_id: &str) -> Result<(), JsValue>;
+
+    #[wasm_bindgen(method, catch)]
+    fn unmount(this: &JsMiniAppUiRoot) -> Result<(), JsValue>;
+}
+
+#[derive(Deserialize)]
+#[serde(rename_all = "camelCase")]
+struct UiAction {
+    event_id: String,
+    revision: u64,
+    control_id: String,
+    action: String,
+}
+
+fn js_error(message: impl AsRef<str>) -> JsValue {
+    js_sys::Error::new(message.as_ref()).into()
+}
+
+fn model(revision: u64, name: &str, busy: bool) -> Value {
+    json!({
+        "revision": revision,
+        "state": if busy { "loading" } else { "idle" },
+        "rootIds": ["layout"],
+        "nodes": [
+            {
+                "type": "stack",
+                "id": "layout",
+                "gap": "md",
+                "children": ["title", "name", "run", "status"]
+            },
+            {
+                "type": "heading",
+                "id": "title",
+                "level": 1,
+                "text": "Rust/WASM mini-app"
+            },
+            {
+                "type": "input",
+                "id": "name",
+                "label": "Name",
+                "value": name,
+                "action": "name.change",
+                "required": true,
+                "disabled": false,
+                "busy": false,
+                "inputType": "text"
+            },
+            {
+                "type": "button",
+                "id": "run",
+                "label": if busy { "Running…" } else { "Run" },
+                "action": "run",
+                "variant": "default",
+                "disabled": busy,
+                "busy": busy
+            },
+            {
+                "type": "status-bar",
+                "id": "status",
+                "tone": "neutral",
+                "text": "All UI state is controlled by Rust."
+            }
+        ]
+    })
+}
+
+/// Mounted SDK UI retained by Rust. The closure field keeps the JS dispatcher
+/// alive for exactly the lifetime of the imperative root.
+#[wasm_bindgen]
+pub struct MiniApp {
+    root: Option<JsMiniAppUiRoot>,
+    _dispatch: Closure<dyn FnMut(JsValue) -> Result<(), JsValue>>,
+    revision: Rc<Cell<u64>>,
+}
+
+#[wasm_bindgen]
+impl MiniApp {
+    /// Mounts the initial controlled model and installs replay/stale checks on
+    /// every action delivered back from JavaScript.
+    pub fn mount(container: Element) -> Result<MiniApp, JsValue> {
+        let revision = Rc::new(Cell::new(1_u64));
+        let dispatch_revision = Rc::clone(&revision);
+        let received_event_ids = Rc::new(RefCell::new(HashSet::<String>::new()));
+        let dispatch_event_ids = Rc::clone(&received_event_ids);
+        let dispatch =
+            Closure::<dyn FnMut(JsValue) -> Result<(), JsValue>>::new(move |value: JsValue| {
+                let action: UiAction = serde_wasm_bindgen::from_value(value)
+                    .map_err(|error| js_error(format!("Malformed SDK UI action: {error}")))?;
+                if action.revision != dispatch_revision.get() {
+                    return Err(js_error(format!(
+                        "Rejected stale action revision {} for current revision {}",
+                        action.revision,
+                        dispatch_revision.get()
+                    )));
+                }
+                if !dispatch_event_ids
+                    .borrow_mut()
+                    .insert(action.event_id.clone())
+                {
+                    return Err(js_error(format!("Rejected replayed action {}", action.event_id)));
+                }
+
+                // A real mini-app routes the validated action into its Rust
+                // reducer. Reading these fields demonstrates that no React
+                // callback or host object crosses the ABI.
+                let _action_target = (&action.control_id, &action.action);
+                Ok(())
+            });
+        let initial_model = serde_wasm_bindgen::to_value(&model(1, "Ada", false))
+            .map_err(|error| js_error(format!("Could not serialize initial model: {error}")))?;
+        let root =
+            create_miniapp_ui_root(&container, &initial_model, dispatch.as_ref().unchecked_ref())?;
+
+        Ok(MiniApp {
+            root: Some(root),
+            _dispatch: dispatch,
+            revision,
+        })
+    }
+
+    /// Replaces controlled state with a newer model revision.
+    pub fn update(&self, revision: u64, name: &str, busy: bool) -> Result<(), JsValue> {
+        let root = self
+            .root
+            .as_ref()
+            .ok_or_else(|| js_error("The mini-app UI is unmounted"))?;
+        let next_model = serde_wasm_bindgen::to_value(&model(revision, name, busy))
+            .map_err(|error| js_error(format!("Could not serialize updated model: {error}")))?;
+        root.update(&next_model)?;
+        self.revision.set(revision);
+        Ok(())
+    }
+
+    /// Focuses a stable control identifier and maps JavaScript exceptions into
+    /// a normal Rust `Result`.
+    pub fn focus(&self, control_id: &str) -> Result<(), JsValue> {
+        self.root
+            .as_ref()
+            .ok_or_else(|| js_error("The mini-app UI is unmounted"))?
+            .focus(control_id)
+    }
+
+    /// Releases the UI root. Repeated calls are intentionally harmless.
+    pub fn unmount(&mut self) -> Result<(), JsValue> {
+        if let Some(root) = self.root.take() {
+            root.unmount()?;
+        }
+        Ok(())
+    }
+}
+
+impl Drop for MiniApp {
+    fn drop(&mut self) {
+        if let Some(root) = self.root.take() {
+            let _ = root.unmount();
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theaiplatform/miniapp-sdk",
-  "version": "0.0.0",
+  "version": "0.0.2",
   "description": "Public SDK for building portable miniapps that run in The AI Platform.",
   "type": "module",
   "engines": {
@@ -23,10 +23,25 @@
       "types": "./dist/sdk.d.ts",
       "import": "./dist/sdk.js"
     },
+    "./mcp": {
+      "types": "./dist/mcp.d.ts",
+      "import": "./dist/mcp.js"
+    },
     "./web": {
       "types": "./dist/web.d.ts",
       "import": "./dist/web.js"
     },
+    "./ui": {
+      "types": "./dist/ui.d.ts",
+      "import": "./dist/ui.js"
+    },
+    "./ui/wasm": {
+      "types": "./dist/ui/wasm.d.ts",
+      "import": "./dist/ui/wasm.js"
+    },
+    "./ui/styles.css": "./dist/ui/styles.css",
+    "./ui/tailwind.css": "./dist/ui/tailwind.css",
+    "./ui-components.json": "./ui-components.json",
     "./surface": {
       "types": "./dist/surface.d.ts",
       "import": "./dist/surface.js"
@@ -45,7 +60,9 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
+    "examples",
     "config-schema.json",
+    "ui-components.json",
     "README.md",
     "LICENSE.md",
     "THIRD_PARTY_NOTICES.md"
@@ -97,15 +114,47 @@
     "@rsbuild/core": "^2.1.4",
     "@rslib/core": "^0.23.2",
     "@rstest/core": "^0.9.10",
+    "@tailwindcss/postcss": "^4.3.0",
+    "@types/jsdom": "^28.0.3",
     "@types/node": "^25.7.0",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "jsdom": "^29.1.1",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.3.0",
+    "tw-animate-css": "^1.4.0",
     "typescript": "npm:@typescript/typescript6@6.0.2"
   },
   "dependencies": {
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "ajv": "^8.20.0",
-    "saxes": "^6.0.0"
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.14.0",
+    "prism-react-renderer": "^2.4.1",
+    "react-resizable-panels": "^4.11.1",
+    "saxes": "^6.0.0",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3"
   },
   "scripts": {
-    "build": "rm -rf dist && rslib build && node scripts/copy-rspack-loaders.mjs",
+    "build": "rm -rf dist && rslib build && node scripts/copy-rspack-loaders.mjs && node scripts/build-ui-styles.mjs",
     "test": "rstest run",
     "typecheck": "tsc --noEmit"
   },

package/ui-components.json

@@ -0,0 +1,64 @@
+{
+  "version": 1,
+  "package": "@theaiplatform/miniapp-sdk",
+  "import": "@theaiplatform/miniapp-sdk/ui",
+  "styles": {
+    "precompiled": "@theaiplatform/miniapp-sdk/ui/styles.css",
+    "tailwindV4": "@theaiplatform/miniapp-sdk/ui/tailwind.css"
+  },
+  "groups": {
+    "foundations": [
+      "Avatar",
+      "Badge",
+      "Button",
+      "ButtonGroup",
+      "H1",
+      "H2",
+      "H3",
+      "H4",
+      "H5",
+      "H6",
+      "Icon",
+      "Progress",
+      "Separator",
+      "Skeleton",
+      "StatusIndicator"
+    ],
+    "layout": [
+      "Alert",
+      "Card",
+      "Empty",
+      "Item",
+      "ResizablePanelGroup",
+      "ScrollArea",
+      "Table",
+      "Tabs"
+    ],
+    "forms": [
+      "Checkbox",
+      "Field",
+      "Input",
+      "InputGroup",
+      "Label",
+      "NativeSelect",
+      "RadioCard",
+      "RadioGroup",
+      "Select",
+      "Slider",
+      "Textarea",
+      "Toggle",
+      "ToggleGroup"
+    ],
+    "overlays": ["AlertDialog", "Dialog", "Sheet", "Tooltip"],
+    "miniapp": [
+      "CodeBlock",
+      "MiniAppIconButton",
+      "MiniAppMetric",
+      "MiniAppPageHeader",
+      "MiniAppSectionHeader",
+      "MiniAppStatusBar",
+      "MiniAppToolbar"
+    ],
+    "utilities": ["cn"]
+  }
+}