@ashley-shrok/viewmodel-shell 0.2.0 → 0.3.1

package/README.md

@@ -1,6 +1,8 @@
 # @ashley-shrok/viewmodel-shell
 
-Server-driven UI framework. The server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to DOM. The browser never owns application state — every interaction dispatches a semantic action to a single POST endpoint and the server returns the next state plus a fresh view.
+A server-driven UI framework where the wire format is structured enough that agents can build full-stack apps without ever opening a browser and all UI tests are pure unit tests with no browser runtime.
+
+The server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to DOM. The browser never owns application state — every interaction dispatches a semantic action to a single POST endpoint and the server returns the next state plus a fresh view.
 
 The frontend is backend-agnostic: it speaks a small JSON contract over a single POST endpoint that takes `multipart/form-data` (with `_action` and `_state` fields). A .NET reference backend ships in the repo, but any language can produce the same contract.
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ashley-shrok/viewmodel-shell",
-  "version": "0.2.0",
-  "description": "Server-driven UI framework. Server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to DOM. Backend-agnostic — a .NET reference backend ships with the repo, but any language can produce the JSON contract.",
+  "version": "0.3.1",
+  "description": "A server-driven UI framework where the wire format is structured enough that agents can build full-stack apps without ever opening a browser and all UI tests are pure unit tests with no browser runtime. Server returns a JSON tree of typed nodes; a thin TypeScript adapter renders it to DOM. Backend-agnostic — a .NET reference backend ships with the repo, but any language can produce the JSON contract.",
   "type": "module",
   "license": "MIT",
   "author": "ashley-shrok",

package/src/browser.ts

@@ -266,6 +266,33 @@ export class BrowserAdapter implements Adapter {
       if (n.value) ta.value = n.value;
       if (n.required) ta.required = true;
       wrapper.appendChild(ta);
+    } else if (n.inputType === "code") {
+      // Monospaced editable text. Tab inserts a literal tab instead of moving
+      // focus. Apps wanting syntax highlighting attach their own library
+      // (CodeMirror, Monaco) using the .vms-field--code-{language} class hook.
+      wrapper.classList.add("vms-field--code");
+      if (n.language) wrapper.classList.add(`vms-field--code-${n.language}`);
+      const ta = document.createElement("textarea");
+      ta.className = "vms-field__input vms-field__input--code";
+      ta.id = `vms-${n.name}`;
+      ta.name = n.name;
+      ta.spellcheck = false;
+      ta.autocapitalize = "off";
+      ta.autocomplete = "off";
+      ta.setAttribute("autocorrect", "off");
+      if (n.placeholder) ta.placeholder = n.placeholder;
+      if (n.value) ta.value = n.value;
+      if (n.required) ta.required = true;
+      ta.addEventListener("keydown", (e) => {
+        if (e.key === "Tab") {
+          e.preventDefault();
+          const start = ta.selectionStart ?? 0;
+          const end   = ta.selectionEnd   ?? 0;
+          ta.value = ta.value.slice(0, start) + "\t" + ta.value.slice(end);
+          ta.selectionStart = ta.selectionEnd = start + 1;
+        }
+      });
+      wrapper.appendChild(ta);
     } else {
       const inp = document.createElement("input");
       inp.className = "vms-field__input";

package/src/index.ts

@@ -73,12 +73,18 @@ export interface FieldNode {
     | "text" | "email" | "password" | "number"
     | "date" | "time" | "datetime-local"
     | "textarea" | "hidden" | "file"
-    | "select" | "select-multiple" | "checkbox";
+    | "select" | "select-multiple" | "checkbox"
+    | "code";
   label?: string;
   placeholder?: string;
   value?: string;
   required?: boolean;
   options?: Array<{ value: string; label: string }>;
+  /** Optional language hint for `inputType: "code"`. Emitted as a class
+   *  (`vms-field--code-{language}`) so apps can attach a syntax-highlighter
+   *  library (CodeMirror, Monaco, etc.) — the framework only ships
+   *  monospaced editable text, no coloring. */
+  language?: string;
   /** Dispatched when Enter is pressed (text-like inputs only). Adapter merges { [name]: value } into context. */
   action?: ActionEvent;
 }

package/styles/default.css

@@ -100,6 +100,18 @@
 textarea.vms-field__input { min-height: 80px; }
 select.vms-field__input  { cursor: pointer; padding-right: 2.25rem; }
 
+/* Code editor field — monospaced, tab-aware, no spell-check chrome.
+   Apps add syntax highlighting via .vms-field--code-{language} hooks. */
+.vms-field__input--code {
+  font-family: var(--vms-font-body);
+  font-size: 13px;
+  line-height: 1.5;
+  tab-size: 2;
+  min-height: 140px;
+  white-space: pre;
+  overflow: auto;
+}
+
 /* Form-collected checkbox (FieldNode inputType="checkbox") — inline label. */
 .vms-field--checkbox { flex-direction: row; align-items: center; gap: 0.5rem; }
 .vms-field--checkbox .vms-field__input {