Merge pull request #23 from stlab/worktree-spectrum-supprt

feat(begin): integrate Adobe Spectrum Web Components

Author: sean-parent

.cargo/config.toml

@@ -0,0 +1,2 @@
+[alias]
+xtask = "run --package xtask --"

.vscode/tasks.json

@@ -78,6 +78,20 @@
             },
             "isBackground": true
         },
+        {
+            "label": "begin: fetch assets",
+            "type": "shell",
+            "command": "cargo",
+            "args": ["xtask", "fetch-assets"],
+            "options": {
+                "cwd": "${workspaceFolder}"
+            },
+            "problemMatcher": ["$rustc"],
+            "presentation": {
+                "reveal": "always",
+                "panel": "dedicated"
+            }
+        },
         // ============ Build Tasks ============
         {
             "label": "cargo build",

Cargo.lock

@@ -26,8 +26,8 @@ members = [
     "cel-rs-macros",
     "property-model",
     "begin",
+    "xtask",
 ]
-
 [lib]
 name = "cel_rs"
 path = "src/lib.rs"

Cargo.toml

@@ -0,0 +1,11 @@
+[d3]
+version = "7.9.0"
+url = "https://cdn.jsdelivr.net/npm/d3@7.9.0/dist/d3.min.js"
+file = "d3.v7.min.js"
+
+[spectrum-web-components]
+# 0.45.4 does not exist on npm; 0.45.0 is the latest 0.45.x release.
+# URL uses esm.sh bundled endpoint for a self-contained single-file ESM bundle.
+version = "0.45.0"
+url = "https://esm.sh/@spectrum-web-components/bundle@0.45.0/es2022/elements.bundle.mjs"
+file = "swc.js"

begin/assets/swc.js

@@ -6,6 +6,7 @@ use property_model::{Method, Sheet};
 use crate::bridge::{Labels, to_graph_data};
 use crate::graph_view::GraphView;
 use crate::inspector::Inspector;
+use crate::spectrum::SpTheme;
 
 /// Builds the `a × b = c` demo sheet with three bidirectional methods.
 ///
@@ -55,7 +56,8 @@ pub fn make_demo_sheet() -> (Sheet, Labels) {
     (sheet, labels)
 }
 
-/// Root component: two-panel layout with the D3 graph on the left and the Inspector on the right.
+/// Root component: Spectrum theme wrapper, two-panel layout with the D3 graph on the
+/// left and the Inspector on the right.
 #[component]
 pub fn App() -> Element {
     let (initial_sheet, initial_labels) = make_demo_sheet();
@@ -68,11 +70,16 @@ pub fn App() -> Element {
         document::Link { rel: "stylesheet", href: asset!("/assets/graph.css") }
         document::Script { src: asset!("/assets/d3.v7.min.js") }
         document::Script { src: asset!("/assets/graph.js") }
+        document::Script { r#type: "module", src: asset!("/assets/swc.js") }
 
-        div {
-            style: "position: fixed; inset: 0; display: flex; overflow: hidden;",
-            GraphView { data: graph_data }
-            Inspector { sheet, labels }
+        SpTheme {
+            color: "light".to_string(),
+            scale: "medium".to_string(),
+            div {
+                style: "position: fixed; inset: 0; display: flex; overflow: hidden;",
+                GraphView { data: graph_data }
+                Inspector { sheet, labels }
+            }
         }
     }
 }

begin/assets/versions.toml

@@ -4,21 +4,24 @@ use dioxus::prelude::*;
 use property_model::{CellId, Sheet};
 
 use crate::bridge::Labels;
+use crate::spectrum::{SpDivider, SpFieldLabel, SpHeading, SpTextfield};
 
 /// Sidebar panel showing all cells with labels, current values, and text inputs for writing.
 ///
 /// Editing an input field immediately writes the parsed value to the sheet and propagates
-/// constraints. If propagation fails (for example, division by zero), the input field shows
-/// a red border until the user blurs. The input is not reset while the field is focused;
-/// it syncs back to the computed value on blur, keeping non-edited cells up to date.
+/// constraints. If parsing or propagation fails (for example, non-numeric input or division
+/// by zero), `SpTextfield` renders in its invalid state until the user blurs. The input is
+/// not reset while the field is focused; it syncs back to the computed value on blur,
+/// keeping non-edited cells up to date.
 #[component]
 pub fn Inspector(sheet: Signal<Sheet>, labels: Signal<Labels>) -> Element {
     let ids: Vec<CellId> = labels.read().cells.keys().copied().collect();
 
     rsx! {
         div {
-            style: "width: 260px; min-width: 260px; height: 100%; overflow-y: auto; border-left: 1px solid #ddd; padding: 12px; box-sizing: border-box; font-family: monospace; font-size: 13px;",
-            h3 { style: "margin: 0 0 12px 0; font-size: 14px;", "Cells" }
+            style: "width: 260px; min-width: 260px; height: 100%; overflow-y: auto; padding: 12px; box-sizing: border-box;",
+            SpHeading { "Cells" }
+            SpDivider {}
             for id in ids {
                 CellRow { key: "{id:?}", id, sheet, labels }
             }
@@ -59,41 +62,55 @@ fn CellRow(id: CellId, sheet: Signal<Sheet>, labels: Signal<Labels>) -> Element
         }
     });
 
+    let field_id = format!("cell-{id:?}");
+
     rsx! {
         div {
-            style: "margin-bottom: 10px;",
-            div { style: "font-weight: bold; margin-bottom: 2px;", "{label}" }
-            div { style: "color: #888; margin-bottom: 4px; font-size: 11px;", "{value}" }
-            input {
-                r#type: "text",
-                value: "{input}",
-                style: if *has_error.read() {
-                    "width: 100%; box-sizing: border-box; font-family: monospace; font-size: 12px; border-color: #c00;"
-                } else {
-                    "width: 100%; box-sizing: border-box; font-family: monospace; font-size: 12px;"
+            style: "margin-bottom: 8px;",
+            SpFieldLabel { for_: field_id.clone(), "{label}" }
+            SpTextfield {
+                id: field_id,
+                value: input.read().clone(),
+                invalid: *has_error.read(),
+                // Dioxus's event serializer only reads event.target.value for
+                // HTMLInputElement — custom elements (sp-textfield) always give "".
+                // Use dioxus.send() in JS and eval.recv() to read the live value.
+                oninput: move |_: FormEvent| {
+                    spawn(async move {
+                        let mut eval = document::eval(&format!(
+                            r#"dioxus.send(document.getElementById("cell-{id:?}").value)"#
+                        ));
+                        let Ok(val) = eval.recv::<String>().await else { return; };
+                        // Discard the result if the user blurred while the round-trip was
+                        // in flight; blur already cleared the error and use_effect will
+                        // restore the last valid computed value.
+                        if !*is_focused.read() {
+                            return;
+                        }
+                        input.set(val.clone());
+                        let mut sheet_w = sheet.write();
+                        let labels_r = labels.read();
+                        if let Some(meta) = labels_r.cells.get(&id) {
+                            if (meta.write_str)(&mut sheet_w, &val).is_ok() {
+                                let result = if sheet_w.is_source(id) {
+                                    sheet_w.propagate_without_replan()
+                                } else {
+                                    sheet_w.propagate()
+                                };
+                                has_error.set(result.is_err());
+                            } else {
+                                has_error.set(true);
+                            }
+                        }
+                    });
                 },
                 onfocus: move |_| is_focused.set(true),
                 onblur: move |_| {
                     is_focused.set(false);
                     has_error.set(false);
                 },
-                oninput: move |e| {
-                    let s = e.value();
-                    input.set(s.clone());
-                    let mut sheet_w = sheet.write();
-                    let labels_r = labels.read();
-                    if let Some(meta) = labels_r.cells.get(&id)
-                        && (meta.write_str)(&mut sheet_w, &s).is_ok()
-                    {
-                        let result = if sheet_w.is_source(id) {
-                            sheet_w.propagate_without_replan()
-                        } else {
-                            sheet_w.propagate()
-                        };
-                        has_error.set(result.is_err());
-                    }
-                },
             }
         }
+        SpDivider {}
     }
 }

begin/src/app.rs

@@ -3,6 +3,7 @@ mod app;
 mod bridge;
 mod graph_view;
 mod inspector;
+mod spectrum;
 
 fn main() {
     dioxus::launch(app::App);

begin/src/inspector.rs

@@ -0,0 +1,95 @@
+//! Dioxus element bindings and component wrappers for Spectrum Web Components.
+//!
+//! Import with `use crate::spectrum::*;` to bring component wrappers into scope.
+//! Callers only need the `SpXxx` component functions.
+
+#![allow(non_snake_case)]
+
+use dioxus::prelude::*;
+
+// ─── Component wrappers ─────────────────────────────────────────────────────
+// PascalCase functions are Dioxus components; RSX resolves them via function
+// call, not as element bindings. Each wraps one SWC custom element.
+//
+// Hyphenated identifiers in RSX (e.g. `sp-theme`) are parsed as custom-element
+// string literals by the RSX macro (ElementName::Custom), so no element module
+// declaration is required — the tag name is emitted verbatim.
+
+/// Provides Spectrum token context for all descendant SWC components.
+///
+/// Must be the root ancestor of any `SpXxx` component. Maps to `<sp-theme>`.
+#[component]
+pub fn SpTheme(color: String, scale: String, children: Element) -> Element {
+    rsx! {
+        sp-theme {
+            "color": "{color}",
+            "scale": "{scale}",
+            {children}
+        }
+    }
+}
+
+/// Single-line text input.
+///
+/// Maps to `<sp-textfield>`. Fires standard DOM `input`, `focus`, and `blur`
+/// events. Setting `invalid` to `true` renders the SWC error state (red ring
+/// and `aria-invalid`).
+#[component]
+pub fn SpTextfield(
+    id: String,
+    value: String,
+    invalid: bool,
+    oninput: EventHandler<FormEvent>,
+    onfocus: EventHandler<FocusEvent>,
+    onblur: EventHandler<FocusEvent>,
+) -> Element {
+    rsx! {
+        sp-textfield {
+            "id": "{id}",
+            "value": "{value}",
+            // Boolean attribute: omit entirely when false; presence = invalid.
+            "invalid": if invalid { "true" },
+            oninput: move |e| oninput.call(e),
+            onfocus: move |e| onfocus.call(e),
+            onblur: move |e| onblur.call(e),
+        }
+    }
+}
+
+/// Label associated with a form control.
+///
+/// Maps to `<sp-field-label>`. The `for_` prop sets the `for` HTML attribute
+/// linking the label to an input by id.
+#[component]
+pub fn SpFieldLabel(for_: String, children: Element) -> Element {
+    rsx! {
+        sp-field-label {
+            "for": "{for_}",
+            {children}
+        }
+    }
+}
+
+/// Horizontal visual separator.
+///
+/// Maps to `<sp-divider>` with `size="s"` (small).
+#[component]
+pub fn SpDivider() -> Element {
+    rsx! {
+        sp-divider {
+            "size": "s",
+        }
+    }
+}
+
+/// Section heading.
+///
+/// Maps to `<sp-heading>`.
+#[component]
+pub fn SpHeading(children: Element) -> Element {
+    rsx! {
+        sp-heading {
+            {children}
+        }
+    }
+}