@jxsuite/studio 4.1.0 → 5.1.0

package/dist/chunks/cf-account-picker-qwkm9zrf.js

@@ -0,0 +1,495 @@
+import {
+  getPlatform2,
+  hasPlatform2
+} from "./studio-6nzaktvy.js";
+import"./studio-7r42c6ca.js";
+import"./studio-yxa81f45.js";
+import {
+  reactive
+} from "./studio-p1dw8wfw.js";
+import"./studio-1k325pwf.js";
+import {
+  REGION_ATTR,
+  overlayRegion,
+  registerSurface,
+  mountSurface,
+  whenReady,
+  layerHost2
+} from "./studio-vfq8qpjt.js";
+import {
+  showModal,
+  close2
+} from "./studio-kkqkcp3d.js";
+import"./studio-qk4bfsq2.js";
+import"./studio-y9zedyjn.js";
+import"./studio-6xa21ej9.js";
+import"./studio-hhvs4sdg.js";
+import {
+  notifyCredentialsChanged
+} from "./studio-3rz5md06.js";
+// src/surfaces/cf-account-picker.json
+var cf_account_picker_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioCfAccountPicker",
+  $description: "The Cloudflare account picker: which of the accounts this grant reaches should publishing and the assistant run against. A `jx-dialog`, so the platform owns modality, Escape, focus restoration and the backdrop — which is what retired the `sp-dialog-wrapper` this surface used to open by hand, along with the focus trap and the `aria-modal` slot `showDialog` wrapped around it. There is no confirming button: each row commits itself, because a picker whose answer is one of N rows has N answers rather than one. The adapter (`surfaces/cf-account-picker.ts`) hands in rows that are already strings and booleans — nothing here knows what `cf_account_required` is, which call refused, or whether the list came back empty because the grant reaches nothing or because Cloudflare could not be reached.",
+  tagName: "jx-dialog",
+  $props: {
+    headline: "Choose a Cloudflare account",
+    confirmLabel: "",
+    cancelLabel: "Cancel",
+    size: "sm"
+  },
+  attributes: {
+    part: "cf-accounts"
+  },
+  oncancel: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/closed"
+        },
+        value: []
+      }
+    ]
+  },
+  onclose: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/closed"
+        },
+        value: []
+      }
+    ]
+  },
+  style: {
+    $description: "The picker's own look. Four `.cf-account-picker*` rules in `styles/shell.css` become the parts below and one of them does not come with them: `min-width: 320px` was this surface sizing its own box, and `jx-dialog` is what sizes a dialog now — `sm` is `min(90vw, 24rem)`, which is wider than the 320px it asked for. The row shape came from `.prefs-account`, which the lit template BORROWED from Preferences › Accounts; it is copied here rather than shared, because a class in a stylesheet is a thing two surfaces can drift apart on and `preferences-dialog.ts` still draws its own rows from it. Three token repairs travel with them: `--spectrum-font-size-75` and `--spectrum-font-size-50` resolve only inside `<sp-theme>`, and a document mounted in the dialog layer is outside it, so every one of them would silently have taken its hard-coded fallback.",
+    '& [part="picker"]': {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--jx-space-4)"
+    },
+    '& [part="intro"], & [part="empty"]': {
+      $description: "The lede and the two absences read as the same secondary line, so they are one rule: the sentence over the list and the sentence drawn instead of it are the same voice.",
+      margin: "0",
+      fontSize: "var(--jx-text-md)",
+      color: "var(--fg-dim)"
+    },
+    '& [part="error"]': {
+      $description: "A commit the broker refused, said above the list the reader is still looking at. It is not an announcement of the same thing twice: the list survives a refusal, because listing again is not what would fix an account Cloudflare will not accept, so the reason has to sit beside the rows that are still on offer.",
+      margin: "0",
+      fontSize: "var(--jx-text-md)",
+      color: "var(--danger)"
+    },
+    '& [part="fail"]': {
+      $description: "The one state that offers a verb of its own. Retrying is right for a listing that never landed and wrong for a grant that genuinely reaches nothing, so the button lives in this branch rather than under both.",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      gap: "var(--jx-space-3)"
+    },
+    '& [part="list"]': {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--jx-space-2)"
+    },
+    '& [part="row"]': {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: "var(--jx-space-4)",
+      padding: "var(--jx-space-3)",
+      border: "1px solid var(--border)",
+      borderRadius: "var(--radius)"
+    },
+    '& [part="text"]': {
+      $description: "`min-width: 0` so a long account name ellipses inside the row instead of pushing its own button off the end of it.",
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--jx-space-1)",
+      minWidth: "0"
+    },
+    '& [part="name"]': {
+      color: "var(--fg)"
+    },
+    '& [part="detail"]': {
+      $description: "The account id under the name. Two Cloudflare accounts may carry the same name and the id is what is stored, so the row shows both rather than the half a reader would have to guess from.",
+      fontSize: "var(--jx-text-sm)",
+      color: "var(--fg-dim)"
+    }
+  },
+  children: [
+    {
+      tagName: "div",
+      attributes: {
+        part: "picker"
+      },
+      children: [
+        {
+          tagName: "p",
+          attributes: {
+            part: "intro"
+          },
+          textContent: "Your Cloudflare login reaches more than one account. Publishing and the assistant both run against the one you pick; you can change it in Preferences › Accounts."
+        },
+        {
+          tagName: "div",
+          attributes: {
+            part: "body-slot",
+            role: "none"
+          },
+          style: {
+            display: "contents"
+          },
+          $switch: {
+            $ref: "#/state/listState"
+          },
+          cases: {
+            loading: {
+              tagName: "p",
+              attributes: {
+                part: "empty"
+              },
+              textContent: "Reading your Cloudflare accounts…"
+            },
+            empty: {
+              tagName: "p",
+              attributes: {
+                part: "empty"
+              },
+              textContent: "This Cloudflare login reaches no accounts. Create one at dash.cloudflare.com, then try again."
+            },
+            failed: {
+              tagName: "div",
+              attributes: {
+                part: "fail"
+              },
+              children: [
+                {
+                  tagName: "p",
+                  attributes: {
+                    part: "empty"
+                  },
+                  textContent: "${state.failureMessage}"
+                },
+                {
+                  tagName: "jx-button",
+                  attributes: {
+                    part: "retry"
+                  },
+                  $props: {
+                    size: "sm"
+                  },
+                  onclick: {
+                    $prototype: "Function",
+                    body: [
+                      {
+                        operator: "call",
+                        target: {
+                          $ref: "#/state/retry"
+                        },
+                        value: []
+                      }
+                    ]
+                  },
+                  children: [
+                    {
+                      tagName: "span",
+                      textContent: "Try again"
+                    }
+                  ]
+                }
+              ]
+            },
+            listed: {
+              tagName: "div",
+              attributes: {
+                part: "listed",
+                role: "none"
+              },
+              style: {
+                display: "contents"
+              },
+              children: [
+                {
+                  tagName: "div",
+                  attributes: {
+                    part: "error-slot",
+                    role: "none"
+                  },
+                  style: {
+                    display: "contents"
+                  },
+                  $switch: {
+                    $ref: "#/state/hasFailure"
+                  },
+                  cases: {
+                    true: {
+                      tagName: "p",
+                      attributes: {
+                        part: "error"
+                      },
+                      textContent: "${state.failure}"
+                    }
+                  }
+                },
+                {
+                  tagName: "div",
+                  attributes: {
+                    part: "list"
+                  },
+                  children: [
+                    {
+                      $prototype: "Array",
+                      items: {
+                        $ref: "#/state/rows"
+                      },
+                      key: {
+                        $ref: "$map/item/id"
+                      },
+                      map: {
+                        tagName: "div",
+                        attributes: {
+                          part: "row",
+                          "data-account": "${$map.item.id}"
+                        },
+                        children: [
+                          {
+                            tagName: "div",
+                            attributes: {
+                              part: "text"
+                            },
+                            children: [
+                              {
+                                tagName: "span",
+                                attributes: {
+                                  part: "name"
+                                },
+                                textContent: "${$map.item.name}"
+                              },
+                              {
+                                tagName: "span",
+                                attributes: {
+                                  part: "detail"
+                                },
+                                textContent: "${$map.item.id}"
+                              }
+                            ]
+                          },
+                          {
+                            tagName: "jx-button",
+                            attributes: {
+                              part: "choose"
+                            },
+                            $props: {
+                              size: "sm",
+                              variant: "accent",
+                              disabled: {
+                                $ref: "$map/item/busy"
+                              }
+                            },
+                            onclick: {
+                              $prototype: "Function",
+                              body: [
+                                {
+                                  operator: "call",
+                                  target: {
+                                    $ref: "#/state/choose"
+                                  },
+                                  value: [
+                                    {
+                                      $ref: "$map/item/id"
+                                    }
+                                  ]
+                                }
+                              ]
+                            },
+                            children: [
+                              {
+                                tagName: "span",
+                                textContent: "${$map.item.label}"
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ]
+};
+
+// src/surfaces/cf-account-picker.ts
+registerSurface("cf-account-picker", cf_account_picker_default);
+function derive(view) {
+  const busy = view.choosing !== "";
+  return {
+    ...view,
+    failureMessage: `Cloudflare could not be reached: ${view.failure}`,
+    hasFailure: view.failure !== "",
+    listState: view.loading ? "loading" : view.accounts.length > 0 ? "listed" : view.failure !== "" ? "failed" : "empty",
+    rows: view.accounts.map((account) => ({
+      busy,
+      id: account.id,
+      label: view.choosing === account.id ? "Selecting…" : "Use this account",
+      name: account.name
+    }))
+  };
+}
+function openCfAccountPickerSurface(options) {
+  const slot = document.createElement("div");
+  slot.style.pointerEvents = "auto";
+  slot.setAttribute(REGION_ATTR, overlayRegion("dialog", "cf-accounts"));
+  options.layer.append(slot);
+  let closed = false;
+  const finish = () => {
+    if (closed) {
+      return;
+    }
+    closed = true;
+    options.onClosed();
+  };
+  const scope = reactive({
+    ...derive({ accounts: [], choosing: "", failure: "", loading: true }),
+    choose: (id) => {
+      options.onChoose(id);
+    },
+    closed: finish,
+    retry: () => {
+      options.onRetry();
+    }
+  });
+  let mounted = null;
+  const ready = mountSurface("cf-account-picker", scope, slot).then(async (surface) => {
+    mounted = surface;
+    const element = surface.root;
+    if (closed) {
+      surface.dispose();
+      return element;
+    }
+    await whenReady(element);
+    if (closed) {
+      return element;
+    }
+    showModal(element);
+    return element;
+  });
+  const handle = {
+    close() {
+      if (closed) {
+        return;
+      }
+      const element = mounted?.root;
+      if (element instanceof HTMLElement) {
+        close2(element);
+      }
+      mounted?.dispose();
+      mounted = null;
+      slot.remove();
+      finish();
+    },
+    host: slot,
+    ready,
+    update(patch) {
+      Object.assign(scope, derive({
+        accounts: patch.accounts ?? scope.accounts,
+        choosing: patch.choosing ?? scope.choosing,
+        failure: patch.failure ?? scope.failure,
+        loading: patch.loading ?? scope.loading
+      }));
+    }
+  };
+  return handle;
+}
+
+// src/ui/cf-account-picker.ts
+function canPick() {
+  if (!hasPlatform2()) {
+    return false;
+  }
+  const platform = getPlatform2();
+  return Boolean(platform.cfAccounts && platform.cfSelectAccount);
+}
+function reasonOf(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function openCfAccountPicker() {
+  if (!canPick()) {
+    return Promise.resolve(null);
+  }
+  return new Promise((resolve) => {
+    let accounts = [];
+    let choosing = "";
+    let settled = false;
+    const finish = (account) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      handle.close();
+      resolve(account);
+    };
+    async function load() {
+      handle.update({ failure: "", loading: true });
+      let failure = "";
+      try {
+        accounts = await getPlatform2().cfAccounts?.() ?? [];
+      } catch (error) {
+        accounts = [];
+        failure = reasonOf(error);
+      }
+      if (settled) {
+        return;
+      }
+      handle.update({ accounts, failure, loading: false });
+    }
+    async function choose(id) {
+      const account = accounts.find((candidate) => candidate.id === id);
+      if (!account || choosing !== "") {
+        return;
+      }
+      choosing = id;
+      handle.update({ choosing: id, failure: "" });
+      try {
+        await getPlatform2().cfSelectAccount?.({ id: account.id, name: account.name });
+      } catch (error) {
+        choosing = "";
+        if (!settled) {
+          handle.update({ choosing: "", failure: reasonOf(error) });
+        }
+        return;
+      }
+      notifyCredentialsChanged();
+      finish(account);
+    }
+    const handle = openCfAccountPickerSurface({
+      layer: layerHost2("dialog"),
+      onChoose: (id) => {
+        choose(id);
+      },
+      onClosed: () => {
+        finish(null);
+      },
+      onRetry: () => {
+        load();
+      }
+    });
+    load();
+  });
+}
+export {
+  openCfAccountPicker
+};
+
+//# debugId=F399CF3E875B329F64756E2164756E21
+//# sourceMappingURL=cf-account-picker-qwkm9zrf.js.map

package/dist/chunks/cf-settings-71bv5zn9.js

@@ -0,0 +1,20 @@
+import {
+  getCfToken2,
+  setCfToken2,
+  getCfAccountId2,
+  setCfAccountId2,
+  clearCfConnection2
+} from "./studio-6xa21ej9.js";
+import"./studio-y9zedyjn.js";
+import"./studio-6nzaktvy.js";
+import"./studio-p1dw8wfw.js";
+export {
+  clearCfConnection2 as clearCfConnection,
+  getCfAccountId2 as getCfAccountId,
+  getCfToken2 as getCfToken,
+  setCfAccountId2 as setCfAccountId,
+  setCfToken2 as setCfToken
+};
+
+//# debugId=A4463392E8342FBA64756E2164756E21
+//# sourceMappingURL=cf-settings-71bv5zn9.js.map

package/dist/chunks/color-area-v17df7b8.js

@@ -0,0 +1,154 @@
+import {
+  snapToStep2
+} from "./iframe-entry-b27vq81n.js";
+
+// ../ui/src/behaviors/color-area.ts
+var HOST = "jx-color-area";
+var AXIS_KEY = { x: "saturation", y: "brightness" };
+var KEY_AXIS = {
+  ArrowDown: "y",
+  ArrowLeft: "x",
+  ArrowRight: "x",
+  ArrowUp: "y"
+};
+var KEY_SIGN = {
+  ArrowDown: -1,
+  ArrowLeft: -1,
+  ArrowRight: 1,
+  ArrowUp: 1
+};
+var dragging = new WeakSet;
+function hostOf(event) {
+  const target = event.currentTarget;
+  return target instanceof HTMLElement && target.localName === HOST ? target : null;
+}
+function trackOf(host) {
+  return host.querySelector('[part="track"]');
+}
+function axisOf(node) {
+  if (!(node instanceof Element)) {
+    return null;
+  }
+  const part = node.getAttribute("part");
+  return part === "x" || part === "y" ? part : null;
+}
+function stepOf(state) {
+  const step = Number(state.step);
+  return Number.isFinite(step) && step > 0 ? step : 1;
+}
+function announce(host, ...names) {
+  for (const name of names) {
+    host.dispatchEvent(new Event(name, { bubbles: true }));
+  }
+}
+function writeAxis(state, axis, value) {
+  const key = AXIS_KEY[axis];
+  const next = snapToStep2(value, stepOf(state), 0, 100);
+  if (state[key] === next) {
+    return false;
+  }
+  state[key] = next;
+  return true;
+}
+function onAreaAxisInput(state, event) {
+  const host = hostOf(event);
+  const axis = axisOf(event.target);
+  if (!host || !axis) {
+    return;
+  }
+  event.stopPropagation();
+  writeAxis(state, axis, Number(event.target.value));
+  announce(host, "input");
+}
+function onAreaAxisChange(state, event) {
+  const host = hostOf(event);
+  const axis = axisOf(event.target);
+  if (!host || !axis) {
+    return;
+  }
+  event.stopPropagation();
+  writeAxis(state, axis, Number(event.target.value));
+  announce(host, "change");
+}
+function onAreaKeydown(state, event) {
+  const host = hostOf(event);
+  const focused = axisOf(event.target);
+  if (!host || !focused || state.disabled === true) {
+    return;
+  }
+  const axis = KEY_AXIS[event.key];
+  if (!axis) {
+    return;
+  }
+  if (axis === focused && !event.shiftKey) {
+    return;
+  }
+  event.preventDefault();
+  event.stopPropagation();
+  const delta = stepOf(state) * (event.shiftKey ? 10 : 1) * (KEY_SIGN[event.key] ?? 0);
+  if (writeAxis(state, axis, Number(state[AXIS_KEY[axis]]) + delta)) {
+    announce(host, "input", "change");
+  }
+}
+function fromPointer(state, host, event) {
+  const track = trackOf(host);
+  if (!track) {
+    return false;
+  }
+  const box = track.getBoundingClientRect();
+  if (box.width <= 0 || box.height <= 0) {
+    return false;
+  }
+  const x = writeAxis(state, "x", (event.clientX - box.left) / box.width * 100);
+  const y = writeAxis(state, "y", (1 - (event.clientY - box.top) / box.height) * 100);
+  return x || y;
+}
+function onAreaPointerDown(state, event) {
+  const host = hostOf(event);
+  if (!host || state.disabled === true) {
+    return;
+  }
+  event.preventDefault();
+  dragging.add(host);
+  const track = trackOf(host);
+  if (track && typeof track.setPointerCapture === "function") {
+    try {
+      track.setPointerCapture(event.pointerId);
+    } catch {}
+  }
+  host.querySelector('[part="x"]')?.focus();
+  if (fromPointer(state, host, event)) {
+    announce(host, "input");
+  }
+}
+function onAreaPointerMove(state, event) {
+  const host = hostOf(event);
+  if (!host || !dragging.has(host)) {
+    return;
+  }
+  if (fromPointer(state, host, event)) {
+    announce(host, "input");
+  }
+}
+function onAreaPointerUp(_state, event) {
+  const host = hostOf(event);
+  if (!host || !dragging.delete(host)) {
+    return;
+  }
+  const track = trackOf(host);
+  if (track && typeof track.releasePointerCapture === "function" && track.hasPointerCapture?.(event.pointerId)) {
+    track.releasePointerCapture(event.pointerId);
+  }
+  announce(host, "change");
+}
+export {
+  onAreaAxisChange,
+  onAreaAxisInput,
+  onAreaKeydown,
+  onAreaPointerDown,
+  onAreaPointerMove,
+  onAreaPointerUp
+};
+
+//# debugId=E98B5359948FD3E664756E2164756E21
+//# sourceMappingURL=color-area-v17df7b8.js.map