Export template source from 2f96d311e60b625d14b2815cc789bc3d010332db:quixos-instance/packages/web-studio-canvas-editor

src/editor.css

@@ -0,0 +1,11 @@
+section {
+  padding: 12px;
+  color: #214f65;
+  background: #eef8fc;
+}
+h2 {
+  font: 600 18px system-ui;
+}
+label {
+  display: block;
+}

src/editor.tsx

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { useInterface, useMutationFeedback } from "@quixos/camino-react";
+import { LocalInput } from "@quixos/camino-react/ui";
+import { interfaces, type Modules } from "./gen/client.js";
+import "./editor.css";
+const names = { name: interfaces.WebStudioCanvas.name };
+export const Editor: Modules["Editor"] = ({ subject, input }) => {
+  const operations = useInterface(names, subject);
+  const [draft, setDraft] = useState("");
+  const feedback = useMutationFeedback();
+  return (
+    <section>
+      <h2>{input.body.root.name}</h2>
+      <label>
+        Name
+        <LocalInput value={draft} onChange={(e) => setDraft(e.target.value)} />
+      </label>
+      <button
+        disabled={operations.status !== "ready"}
+        onClick={() => {
+          if (operations.status === "ready") feedback.track(operations.value.name.set(draft));
+        }}
+      >
+        Save name
+      </button>
+      <p>{input.body.root.placements.entries.length} placements in this view</p>
+      <ul>
+        {input.body.root.placements.entries.map(({ node }, i) => (
+          <li key={i}>
+            {node.presentation} · {node.subject._camino.ref.object}
+          </li>
+        ))}
+      </ul>
+      {feedback.message && <p role="alert">{feedback.message}</p>}
+    </section>
+  );
+};