@jxsuite/studio 4.1.0 → 5.1.0

package/src/surfaces/data-actions.json

@@ -0,0 +1,157 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StudioDataActions",
+  "$description": "The actions row a data-domain settings section grows: test a connection, push the schema, open the rows as a grid. It is an ISLAND inside `surfaces/settings-contributed.json` — the generic contributed-section renderer stays extension-agnostic and draws an empty host, and `panels/data-grid.ts` mounts this into it — which is the seam that lets the data surface contribute verbs without the settings machinery learning what a connection is.",
+  "tagName": "div",
+  "attributes": {
+    "part": "data-actions"
+  },
+  "style": {
+    "display": "flex",
+    "flexWrap": "wrap",
+    "alignItems": "center",
+    "gap": "var(--jx-space-2)",
+    "fontFamily": "var(--jx-font-sans)",
+    "fontSize": "var(--jx-text-md)",
+    "& [part=\"result\"]": {
+      "fontSize": "var(--jx-text-sm)",
+      "color": "var(--fg-dim)"
+    },
+    "& [part=\"result\"][data-ok=\"false\"]": {
+      "color": "var(--danger)"
+    },
+    "& [part=\"result\"][data-ok=\"true\"]": {
+      "color": "var(--success, var(--accent))"
+    }
+  },
+  "children": [
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "test-slot",
+        "role": "none"
+      },
+      "style": {
+        "display": "contents"
+      },
+      "$switch": {
+        "$ref": "#/state/testState"
+      },
+      "cases": {
+        "shown": {
+          "tagName": "jx-button",
+          "attributes": {
+            "part": "test"
+          },
+          "$props": {
+            "variant": "secondary",
+            "size": "sm",
+            "disabled": {
+              "$ref": "#/state/testDisabled"
+            }
+          },
+          "onclick": {
+            "$prototype": "Function",
+            "body": [
+              {
+                "operator": "call",
+                "target": {
+                  "$ref": "#/state/test"
+                },
+                "value": []
+              }
+            ]
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "textContent": "${state.testLabel}"
+            }
+          ]
+        }
+      }
+    },
+    {
+      "tagName": "jx-button",
+      "attributes": {
+        "part": "push"
+      },
+      "$props": {
+        "variant": "secondary",
+        "size": "sm"
+      },
+      "onclick": {
+        "$prototype": "Function",
+        "body": [
+          {
+            "operator": "call",
+            "target": {
+              "$ref": "#/state/push"
+            },
+            "value": []
+          }
+        ]
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "textContent": "Push Schema"
+        }
+      ]
+    },
+    {
+      "tagName": "jx-button",
+      "attributes": {
+        "part": "grid"
+      },
+      "$props": {
+        "variant": "secondary",
+        "size": "sm"
+      },
+      "onclick": {
+        "$prototype": "Function",
+        "body": [
+          {
+            "operator": "call",
+            "target": {
+              "$ref": "#/state/openGrid"
+            },
+            "value": []
+          }
+        ]
+      },
+      "children": [
+        {
+          "tagName": "span",
+          "textContent": "Open Data Grid"
+        }
+      ]
+    },
+    {
+      "tagName": "span",
+      "attributes": {
+        "part": "result-slot",
+        "role": "none"
+      },
+      "style": {
+        "display": "contents"
+      },
+      "$switch": {
+        "$ref": "#/state/resultState"
+      },
+      "cases": {
+        "shown": {
+          "$description": "The last test's verdict, and a live region because it arrives after the press that asked for it.",
+          "tagName": "span",
+          "attributes": {
+            "part": "result",
+            "role": "status",
+            "data-ok": "${state.resultOk}",
+            "title": "${state.resultTitle}"
+          },
+          "textContent": "${state.resultText}"
+        }
+      }
+    }
+  ]
+}

package/src/surfaces/data-actions.ts

@@ -0,0 +1,115 @@
+/// <reference lib="dom" />
+/**
+ * The data section's actions row, as a mounted document.
+ *
+ * This is the adapter. `panels/data-grid.ts` is the flow — which section keys are data-domain,
+ * whether the platform serves the data routes, what a test returned, what a push does — and this is
+ * the row it draws into `surfaces/settings-contributed.json`'s actions host.
+ *
+ * **The seam did not move; what fills it did.** The generic contributed-section renderer stays
+ * extension-agnostic: it draws an empty host and hands it to whoever contributed the actions. That
+ * host used to be lit-rendered on every redraw, so it is now MOUNTED once per host and projected on
+ * every redraw — which is also what stops a redraw arriving mid-test from replacing the row and
+ * losing the button the reader has their pointer on.
+ *
+ * @docs studio/data/grid
+ */
+
+import { reactive } from "../reactivity";
+import { mountSurface, registerSurface } from "../ui/surface";
+import dataActionsDoc from "./data-actions.json";
+import type { JxDocument } from "@jxsuite/schema/types";
+import type { SurfaceHandle } from "../ui/surface";
+
+registerSurface("data-actions", dataActionsDoc as unknown as JxDocument);
+
+/** Everything the row draws. */
+export interface DataActionsView {
+  /** Only the connections section can test a connection; the data section has none to name. */
+  testState: "hidden" | "shown";
+  /** "Test Connection", or "Testing…" while one is in flight. */
+  testLabel: string;
+  testDisabled: boolean;
+  resultState: "hidden" | "shown";
+  /** `"true"` or `"false"` — a word, because a document switches and styles on words. */
+  resultOk: string;
+  /** "main: connected", or "main: could not reach the host". */
+  resultText: string;
+  /** The failure in full, when the sentence was shortened. */
+  resultTitle: string;
+}
+
+/** What a press asks the flow to do. */
+export interface DataActionsCallbacks {
+  test: () => void;
+  push: () => void;
+  openGrid: () => void;
+}
+
+export interface DataActionsSurfaceHandle {
+  ready: Promise<HTMLElement>;
+  update: (view: DataActionsView) => void;
+  dispose: () => void;
+}
+
+interface DataActionsScope extends Record<string, unknown>, DataActionsView, DataActionsCallbacks {}
+
+/** Write a projection into the scope. */
+function project(scope: DataActionsScope, view: DataActionsView): void {
+  scope.testState = view.testState;
+  scope.testLabel = view.testLabel;
+  scope.testDisabled = view.testDisabled;
+  scope.resultState = view.resultState;
+  scope.resultOk = view.resultOk;
+  scope.resultText = view.resultText;
+  scope.resultTitle = view.resultTitle;
+}
+
+/**
+ * Mount the actions row into `host`.
+ *
+ * @param {HTMLElement} host - The section document's actions island
+ * @param {DataActionsView} view - What to draw right now
+ * @param {DataActionsCallbacks} actions - What each press does
+ * @returns {DataActionsSurfaceHandle}
+ */
+export function mountDataActionsSurface(
+  host: HTMLElement,
+  view: DataActionsView,
+  actions: DataActionsCallbacks,
+): DataActionsSurfaceHandle {
+  const scope = reactive<DataActionsScope>({
+    openGrid: actions.openGrid,
+    push: actions.push,
+    resultOk: "false",
+    resultState: "hidden",
+    resultText: "",
+    resultTitle: "",
+    test: actions.test,
+    testDisabled: false,
+    testLabel: "Test Connection",
+    testState: "hidden",
+  }) as DataActionsScope;
+  project(scope, view);
+
+  let mounted: SurfaceHandle | null = null;
+  let disposed = false;
+  const ready = mountSurface("data-actions", scope, host).then((surface) => {
+    if (disposed) {
+      surface.dispose();
+      return surface.root as HTMLElement;
+    }
+    mounted = surface;
+    return surface.root as HTMLElement;
+  });
+
+  return {
+    dispose() {
+      disposed = true;
+      mounted?.dispose();
+      mounted = null;
+    },
+    ready,
+    update: (next) => project(scope, next),
+  };
+}

package/src/surfaces/dialog.json

@@ -0,0 +1,289 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StudioDialog",
+  "$description": "Studio's confirm, save-or-discard and prompt dialogs: one jx-dialog whose body is projected from the adapter's scope. `message` is a sentence; `choice` is a `jx-select` over the options; `field` is the prompt's jx-textfield with its refusal. The four answers call the host's functions, and the host decides when the dialog closes.",
+  "tagName": "jx-dialog",
+  "$props": {
+    "headline": {
+      "$ref": "#/state/headline"
+    },
+    "confirmLabel": {
+      "$ref": "#/state/confirmLabel"
+    },
+    "secondaryLabel": {
+      "$ref": "#/state/secondaryLabel"
+    },
+    "cancelLabel": {
+      "$ref": "#/state/cancelLabel"
+    },
+    "destructive": {
+      "$ref": "#/state/destructive"
+    },
+    "size": {
+      "$ref": "#/state/size"
+    }
+  },
+  "attributes": {
+    "headline": "${state.headline}",
+    "confirm-label": "${state.confirmLabel || null}",
+    "secondary-label": "${state.secondaryLabel || null}",
+    "cancel-label": "${state.cancelLabel || null}",
+    "part": "dialog-host"
+  },
+  "onconfirm": {
+    "$prototype": "Function",
+    "body": [
+      {
+        "operator": "call",
+        "target": {
+          "$ref": "#/state/confirm"
+        },
+        "value": []
+      }
+    ]
+  },
+  "onsecondary": {
+    "$prototype": "Function",
+    "body": [
+      {
+        "operator": "call",
+        "target": {
+          "$ref": "#/state/secondary"
+        },
+        "value": []
+      }
+    ]
+  },
+  "oncancel": {
+    "$prototype": "Function",
+    "body": [
+      {
+        "operator": "call",
+        "target": {
+          "$ref": "#/state/cancel"
+        },
+        "value": []
+      }
+    ]
+  },
+  "onclose": {
+    "$prototype": "Function",
+    "body": [
+      {
+        "operator": "call",
+        "target": {
+          "$ref": "#/state/closed"
+        },
+        "value": []
+      }
+    ]
+  },
+  "style": {
+    "& [part=\"message\"]": {
+      "margin": "0 0 var(--jx-space-3)"
+    },
+    "& [part=\"message\"]:last-child": {
+      "margin": "0"
+    },
+    "& [part=\"island\"]:empty": {
+      "display": "none"
+    },
+    "& [part=\"message-slot\"], & [part=\"choice-slot\"], & [part=\"field-slot\"]": {
+      "display": "contents"
+    },
+    "& [part=\"choice-row\"]": {
+      "display": "flex",
+      "flexDirection": "column",
+      "gap": "var(--jx-space-1)",
+      "margin": "0 0 var(--jx-space-3)"
+    },
+    "& [part=\"choice-label\"]": {
+      "fontSize": "var(--jx-text-sm)",
+      "color": "var(--jx-fg-dim)"
+    },
+    "& jx-textfield": {
+      "width": "100%"
+    }
+  },
+  "children": [
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "message-slot",
+        "role": "none"
+      },
+      "$switch": {
+        "$ref": "#/state/hasMessage"
+      },
+      "cases": {
+        "true": {
+          "tagName": "p",
+          "attributes": {
+            "part": "message"
+          },
+          "textContent": "${state.message}"
+        }
+      }
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "island"
+      }
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "choice-slot",
+        "role": "none"
+      },
+      "$switch": {
+        "$ref": "#/state/hasChoice"
+      },
+      "cases": {
+        "true": {
+          "tagName": "div",
+          "attributes": {
+            "part": "choice-row"
+          },
+          "children": [
+            {
+              "tagName": "span",
+              "attributes": {
+                "part": "choice-label"
+              },
+              "textContent": "${state.choiceLabel}"
+            },
+            {
+              "tagName": "jx-select",
+              "$props": {
+                "label": {
+                  "$ref": "#/state/choiceLabel"
+                },
+                "options": {
+                  "$ref": "#/state/options"
+                },
+                "value": {
+                  "$ref": "#/state/chosen"
+                }
+              },
+              "attributes": {
+                "part": "choice"
+              },
+              "onchange": {
+                "$prototype": "Function",
+                "body": [
+                  {
+                    "operator": "call",
+                    "target": {
+                      "$ref": "#/state/pick"
+                    },
+                    "value": [
+                      {
+                        "$ref": "event#/target/value"
+                      }
+                    ]
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      }
+    },
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "field-slot",
+        "role": "none"
+      },
+      "$switch": {
+        "$ref": "#/state/hasField"
+      },
+      "cases": {
+        "true": {
+          "tagName": "jx-textfield",
+          "$props": {
+            "label": {
+              "$ref": "#/state/headline"
+            },
+            "value": {
+              "$ref": "#/state/value"
+            },
+            "placeholder": {
+              "$ref": "#/state/placeholder"
+            },
+            "invalid": {
+              "$ref": "#/state/invalid"
+            },
+            "error": {
+              "$ref": "#/state/error"
+            },
+            "multiline": {
+              "$ref": "#/state/multiline"
+            },
+            "rows": {
+              "$ref": "#/state/rows"
+            },
+            "mono": {
+              "$ref": "#/state/mono"
+            }
+          },
+          "attributes": {
+            "part": "field"
+          },
+          "oninput": {
+            "$prototype": "Function",
+            "body": [
+              {
+                "operator": "call",
+                "target": {
+                  "$ref": "#/state/input"
+                },
+                "value": [
+                  {
+                    "$ref": "event#/target/value"
+                  }
+                ]
+              }
+            ]
+          },
+          "onkeydown": {
+            "$prototype": "Function",
+            "body": [
+              {
+                "$switch": {
+                  "$ref": "#/state/singleLine"
+                },
+                "cases": {
+                  "true": [
+                    {
+                      "$switch": {
+                        "$ref": "event#/key"
+                      },
+                      "cases": {
+                        "Enter": [
+                          {
+                            "preventDefault": true
+                          },
+                          {
+                            "operator": "call",
+                            "target": {
+                              "$ref": "#/state/confirm"
+                            },
+                            "value": []
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              }
+            ]
+          },
+          "$description": "The prompt's one field. `multiline` is what makes it a paste box rather than a line: an import the author copied out of a `_redirects` file is column-aligned, so it also asks for `mono`. A multiline field takes Enter as a newline, which is why the Enter-confirms handler below is guarded on it — a paste box whose second line submits the dialog cannot be typed into."
+        }
+      }
+    }
+  ]
+}