@jxsuite/studio 4.0.0 → 5.0.0

package/dist/chunks/convert-to-repeater-d0cgnb6d.js

@@ -0,0 +1,639 @@
+import"./studio-7r42c6ca.js";
+import {
+  getNodeAtPath2,
+  childList,
+  parentElementPath,
+  childIndex
+} from "./studio-6ewqv390.js";
+import {
+  reactive
+} from "./studio-p1dw8wfw.js";
+import"./studio-q3x06vmj.js";
+import"./studio-6nzaktvy.js";
+import"./studio-79y5sz51.js";
+import {
+  primarySelection,
+  transactDoc,
+  activeTab2
+} from "./studio-az3zd49t.js";
+import"./studio-1k325pwf.js";
+import {
+  REGION_ATTR,
+  overlayRegion,
+  registerSurface,
+  mountSurface,
+  whenReady,
+  layerHost2
+} from "./studio-erdatzvp.js";
+import {
+  showModal,
+  close2,
+  selectValue
+} from "./studio-5jy81t3s.js";
+import"./studio-rkstz940.js";
+import {
+  defCategory
+} from "./studio-akbww0j5.js";
+import"./studio-57mf66w2.js";
+import"./studio-tjjk7jvk.js";
+import"./studio-26d7myd1.js";
+import"./studio-y9zedyjn.js";
+import"./studio-25hkdrkw.js";
+import"./studio-yxa81f45.js";
+import"./studio-d055c37e.js";
+import"./studio-esrxgwh6.js";
+import {
+  fetchPluginSchema
+} from "./studio-qahxvnan.js";
+import"./studio-3gxv60tn.js";
+import"./studio-8qtrpzr3.js";
+import"./studio-vz68yn9e.js";
+import"./studio-5523bpzt.js";
+import"./studio-81390n6f.js";
+import"./studio-4m0haseg.js";
+// src/surfaces/convert-repeater.json
+var convert_repeater_default = {
+  $schema: "https://jxsuite.com/schema/v1",
+  $id: "StudioConvertRepeater",
+  $description: 'Repeat…: the dialog that turns the selected element into an `$prototype: "Array"` template. One `jx-dialog`, so the platform owns modality, Escape, the backdrop and focus restoration — which is what retired the `sp-dialog-wrapper` this surface used to open through its bare `open` attribute, and the hand-rolled `requestAnimationFrame` focus move that had to follow it. Three questions in one form: which state definition holds the items, and optionally which function filters and which sorts. The name field appears only when the answer to the first is "Create new…", because a definition that already exists needs no name. Nothing here knows what makes a definition an array — `editor/convert-to-repeater.ts` asks the plugin schemas, keeps the refusals and writes the repeater — and it hands over rows that are already strings.',
+  tagName: "jx-dialog",
+  $props: {
+    headline: "Repeat…",
+    confirmLabel: "Create Repeater",
+    cancelLabel: "Cancel",
+    size: "sm"
+  },
+  attributes: {
+    part: "convert-repeater"
+  },
+  onconfirm: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/confirm"
+        },
+        value: []
+      }
+    ]
+  },
+  oncancel: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/closed"
+        },
+        value: []
+      }
+    ]
+  },
+  onclose: {
+    $prototype: "Function",
+    body: [
+      {
+        operator: "call",
+        target: {
+          $ref: "#/state/closed"
+        },
+        value: []
+      }
+    ]
+  },
+  style: {
+    $description: "There is no stylesheet to transcribe: the lit version carried one inline `display:flex;flex-direction:column;gap:12px` on a wrapper div and nothing else, because `sp-field-label` and `sp-dialog-wrapper` drew the rest. Both of those are gone — the label is `jx-field`'s, which actually NAMES the control it wraps rather than sitting beside it, and the box is the dialog's — so the whole of this block is the one gap that separated the rows, said in the kit's scale instead of in the twelve pixels somebody typed.",
+    '& [part="form"]': {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--jx-space-4)"
+    },
+    '& [part="new-slot"], & [part="functions-slot"], & [part="functions"]': {
+      $description: "A branch host and the pair inside it are structure rather than layout: `display: contents` puts the rows they carry straight into the form's own column, so one gap rule spaces every row whether it is drawn or not.",
+      display: "contents"
+    }
+  },
+  children: [
+    {
+      tagName: "div",
+      attributes: {
+        part: "form"
+      },
+      children: [
+        {
+          tagName: "jx-field",
+          attributes: {
+            part: "source-row"
+          },
+          $props: {
+            span: true,
+            label: "Items source"
+          },
+          children: [
+            {
+              tagName: "jx-select",
+              attributes: {
+                part: "source"
+              },
+              $props: {
+                size: "sm",
+                options: {
+                  $ref: "#/state/sourceOptions"
+                },
+                value: {
+                  $ref: "#/state/source"
+                }
+              },
+              onchange: {
+                $prototype: "Function",
+                body: [
+                  {
+                    operator: "call",
+                    target: {
+                      $ref: "#/state/pickSource"
+                    },
+                    value: [
+                      {
+                        $ref: "event#/target/value"
+                      }
+                    ]
+                  }
+                ]
+              }
+            }
+          ]
+        },
+        {
+          tagName: "div",
+          attributes: {
+            part: "new-slot",
+            role: "none"
+          },
+          $switch: {
+            $ref: "#/state/creating"
+          },
+          cases: {
+            true: {
+              tagName: "jx-field",
+              attributes: {
+                part: "new-row"
+              },
+              $props: {
+                span: true,
+                label: "New definition name",
+                invalid: {
+                  $ref: "#/state/invalid"
+                }
+              },
+              children: [
+                {
+                  tagName: "jx-textfield",
+                  attributes: {
+                    part: "new-name"
+                  },
+                  $props: {
+                    size: "sm",
+                    placeholder: "myItems",
+                    value: {
+                      $ref: "#/state/newName"
+                    },
+                    invalid: {
+                      $ref: "#/state/invalid"
+                    },
+                    error: {
+                      $ref: "#/state/error"
+                    }
+                  },
+                  oninput: {
+                    $prototype: "Function",
+                    body: [
+                      {
+                        operator: "call",
+                        target: {
+                          $ref: "#/state/setName"
+                        },
+                        value: [
+                          {
+                            $ref: "event#/target/value"
+                          }
+                        ]
+                      }
+                    ]
+                  },
+                  onkeydown: {
+                    $prototype: "Function",
+                    body: [
+                      {
+                        $switch: {
+                          $ref: "event#/key"
+                        },
+                        cases: {
+                          Enter: [
+                            {
+                              preventDefault: true
+                            },
+                            {
+                              operator: "call",
+                              target: {
+                                $ref: "#/state/confirm"
+                              },
+                              value: []
+                            }
+                          ]
+                        }
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          }
+        },
+        {
+          tagName: "div",
+          attributes: {
+            part: "functions-slot",
+            role: "none"
+          },
+          $switch: {
+            $ref: "#/state/hasFunctions"
+          },
+          cases: {
+            true: {
+              tagName: "div",
+              attributes: {
+                part: "functions",
+                role: "none"
+              },
+              children: [
+                {
+                  tagName: "jx-field",
+                  attributes: {
+                    part: "filter-row"
+                  },
+                  $props: {
+                    span: true,
+                    label: "Filter (optional)"
+                  },
+                  children: [
+                    {
+                      tagName: "jx-select",
+                      attributes: {
+                        part: "filter"
+                      },
+                      $props: {
+                        size: "sm",
+                        options: {
+                          $ref: "#/state/functionOptions"
+                        },
+                        value: {
+                          $ref: "#/state/filter"
+                        }
+                      },
+                      onchange: {
+                        $prototype: "Function",
+                        body: [
+                          {
+                            operator: "call",
+                            target: {
+                              $ref: "#/state/pickFilter"
+                            },
+                            value: [
+                              {
+                                $ref: "event#/target/value"
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                },
+                {
+                  tagName: "jx-field",
+                  attributes: {
+                    part: "sort-row"
+                  },
+                  $props: {
+                    span: true,
+                    label: "Sort (optional)"
+                  },
+                  children: [
+                    {
+                      tagName: "jx-select",
+                      attributes: {
+                        part: "sort"
+                      },
+                      $props: {
+                        size: "sm",
+                        options: {
+                          $ref: "#/state/functionOptions"
+                        },
+                        value: {
+                          $ref: "#/state/sort"
+                        }
+                      },
+                      onchange: {
+                        $prototype: "Function",
+                        body: [
+                          {
+                            operator: "call",
+                            target: {
+                              $ref: "#/state/pickSort"
+                            },
+                            value: [
+                              {
+                                $ref: "event#/target/value"
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        }
+      ]
+    }
+  ]
+};
+
+// src/surfaces/convert-repeater.ts
+registerSurface("convert-repeater", convert_repeater_default);
+var CREATE_NEW_SOURCE = "__new__";
+function derive(view) {
+  return {
+    ...view,
+    creating: view.source === CREATE_NEW_SOURCE,
+    functionOptions: [
+      { label: "None", value: "" },
+      ...view.functions.map((name) => ({ label: name, value: name }))
+    ],
+    hasFunctions: view.functions.length > 0,
+    invalid: view.error !== "",
+    sourceOptions: [
+      ...view.sources.map((name) => ({ label: name, value: name })),
+      { label: "Create new…", value: CREATE_NEW_SOURCE }
+    ]
+  };
+}
+function openConvertRepeaterSurface(options) {
+  const slot = document.createElement("div");
+  slot.style.pointerEvents = "auto";
+  slot.setAttribute(REGION_ATTR, overlayRegion("dialog", "convert-repeater"));
+  options.layer.append(slot);
+  let closed = false;
+  const finish = () => {
+    if (closed) {
+      return;
+    }
+    closed = true;
+    options.onClosed();
+  };
+  const scope = reactive({
+    ...derive(options.view),
+    closed: finish,
+    confirm: () => {
+      options.onConfirm();
+    },
+    pickFilter: (value) => {
+      scope.filter = value;
+      options.onPickFilter(value);
+    },
+    pickSort: (value) => {
+      scope.sort = value;
+      options.onPickSort(value);
+    },
+    pickSource: (value) => {
+      scope.source = value;
+      options.onPickSource(value);
+    },
+    setName: (value) => {
+      scope.newName = value;
+      options.onName(value);
+    }
+  });
+  let mounted = null;
+  const focusName = () => {
+    setTimeout(() => {
+      const field = mounted?.root;
+      if (closed || !(field instanceof HTMLElement)) {
+        return;
+      }
+      const control = field.querySelector('jx-textfield[part="new-name"]');
+      if (control) {
+        selectValue(control, "all");
+      }
+    }, 0);
+  };
+  const ready = mountSurface("convert-repeater", 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);
+    if (scope.creating) {
+      focusName();
+    }
+    return element;
+  });
+  return {
+    close() {
+      const element = mounted?.root;
+      if (element instanceof HTMLElement) {
+        close2(element);
+      }
+      mounted?.dispose();
+      mounted = null;
+      slot.remove();
+      finish();
+    },
+    host: slot,
+    ready,
+    update(view) {
+      const next = derive(view);
+      const revealed = next.creating && !scope.creating;
+      const repeated = next.error !== "" && next.error === scope.error;
+      Object.assign(scope, repeated ? { ...next, error: "" } : next);
+      if (repeated) {
+        const again = next.error;
+        queueMicrotask(() => {
+          scope.error = again;
+        });
+      }
+      if (revealed) {
+        focusName();
+      }
+    }
+  };
+}
+
+// src/editor/convert-to-repeater.ts
+var IDENTIFIER = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
+async function convertToRepeater() {
+  const tab = activeTab2.value;
+  const path = primarySelection(tab?.session.selection);
+  if (!tab || !path || path.length < 2) {
+    return;
+  }
+  const node = getNodeAtPath2(tab.doc.document, path);
+  if (!node) {
+    return;
+  }
+  const defs = tab.doc.document.state || {};
+  const config = await promptRepeaterConfig(defs);
+  if (!config) {
+    return;
+  }
+  transactDoc(tab, (t) => {
+    const doc = t.doc.document;
+    if (config.newDef) {
+      if (!doc.state) {
+        doc.state = {};
+      }
+      doc.state[config.newDef.name] = { default: [], type: "array" };
+    }
+    const pp = parentElementPath(path);
+    if (!pp) {
+      return;
+    }
+    const idx = childIndex(path);
+    const parent = getNodeAtPath2(doc, pp);
+    if (!parent?.children) {
+      return;
+    }
+    const element = childList(parent)[idx];
+    const repeater = {
+      $prototype: "Array",
+      items: config.items,
+      map: element
+    };
+    if (config.filter) {
+      repeater.filter = config.filter;
+    }
+    if (config.sort) {
+      repeater.sort = config.sort;
+    }
+    parent.children[idx] = repeater;
+  });
+}
+async function arraySourceNames(defs) {
+  const named = Object.entries(defs).filter(([, d]) => {
+    const def = d;
+    return def?.type === "array" || Array.isArray(def?.default) || def?.$prototype === "Array";
+  }).map(([name]) => name);
+  const docPath = activeTab2.value?.documentPath;
+  for (const [name, d] of Object.entries(defs)) {
+    const def = d;
+    if (!def?.$prototype || def.$prototype === "Function" || def.$prototype === "Array") {
+      continue;
+    }
+    if (named.includes(name)) {
+      continue;
+    }
+    const schema = await fetchPluginSchema({
+      ...def.$src != null && { $src: def.$src },
+      $prototype: def.$prototype
+    }, { ...docPath != null && { documentPath: docPath } });
+    if (schema?.returns?.type === "array") {
+      named.push(name);
+    }
+  }
+  return named;
+}
+async function promptRepeaterConfig(defs) {
+  const sources = await arraySourceNames(defs);
+  const functions = Object.entries(defs).filter(([, d]) => defCategory(d) === "function").map(([name]) => name);
+  return new Promise((resolve) => {
+    const view = {
+      error: "",
+      filter: "",
+      functions,
+      newName: "",
+      sort: "",
+      source: sources[0] ?? CREATE_NEW_SOURCE,
+      sources
+    };
+    let settled = false;
+    const finish = (config) => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      handle.close();
+      resolve(config);
+    };
+    const refuse = (message) => {
+      view.error = message;
+      handle.update(view);
+    };
+    const optional = () => ({
+      ...view.filter && { filter: { $ref: `#/state/${view.filter}` } },
+      ...view.sort && { sort: { $ref: `#/state/${view.sort}` } }
+    });
+    const confirm = () => {
+      if (view.source !== CREATE_NEW_SOURCE) {
+        finish({ items: { $ref: `#/state/${view.source}` }, ...optional() });
+        return;
+      }
+      const name = view.newName.trim();
+      if (!name) {
+        refuse("Enter a name for the new state definition.");
+        return;
+      }
+      if (defs[name]) {
+        refuse(`"${name}" already exists.`);
+        return;
+      }
+      if (!IDENTIFIER.test(name)) {
+        refuse("Invalid identifier name.");
+        return;
+      }
+      finish({
+        items: { $ref: `#/state/${name}` },
+        ...optional(),
+        newDef: { name }
+      });
+    };
+    const handle = openConvertRepeaterSurface({
+      layer: layerHost2("dialog"),
+      onClosed: () => finish(null),
+      onConfirm: confirm,
+      onName: (value) => {
+        view.newName = value;
+        view.error = "";
+        handle.update(view);
+      },
+      onPickFilter: (value) => {
+        view.filter = value;
+        handle.update(view);
+      },
+      onPickSort: (value) => {
+        view.sort = value;
+        handle.update(view);
+      },
+      onPickSource: (value) => {
+        view.source = value;
+        view.error = "";
+        handle.update(view);
+      },
+      view
+    });
+  });
+}
+export {
+  convertToRepeater
+};
+
+//# debugId=D6BE6E306A16451B64756E2164756E21
+//# sourceMappingURL=convert-to-repeater-d0cgnb6d.js.map

package/dist/chunks/dialog-s890b918.js

@@ -0,0 +1,85 @@
+// ../ui/src/behaviors/dialog.ts
+function hostOf(event) {
+  const target = event.currentTarget;
+  return target instanceof Element ? target.closest("jx-dialog") : null;
+}
+function innerOf(host) {
+  return host.querySelector('dialog[part="dialog"]');
+}
+function emit(host, name) {
+  host?.dispatchEvent(new CustomEvent(name, { bubbles: true }));
+}
+function syntheticToggle(dialog, newState) {
+  if (typeof ToggleEvent !== "undefined") {
+    return;
+  }
+  const event = new Event("toggle", { bubbles: false });
+  Object.assign(event, { newState, oldState: newState === "open" ? "closed" : "open" });
+  dialog.dispatchEvent(event);
+}
+function showModal(host) {
+  const dialog = innerOf(host);
+  if (!dialog || dialog.open) {
+    return;
+  }
+  dialog.showModal();
+  syntheticToggle(dialog, "open");
+}
+function close(host, returnValue) {
+  const dialog = innerOf(host);
+  if (!dialog?.open) {
+    return;
+  }
+  dialog.close(returnValue);
+  syntheticToggle(dialog, "closed");
+}
+function onToggle(state, event) {
+  state.open = event.newState === "open";
+}
+function onNativeCancel(state, event) {
+  state.open = false;
+  emit(hostOf(event), "cancel");
+}
+function onNativeClose(state, event) {
+  state.open = false;
+  emit(hostOf(event), "close");
+}
+function onCommand(_state, event) {
+  const host = hostOf(event);
+  const command = event.command ?? "";
+  if (!host) {
+    return;
+  }
+  if (command === "--show") {
+    showModal(host);
+  } else if (command === "--close") {
+    close(host);
+  }
+}
+function onConfirm(_state, event) {
+  emit(hostOf(event), "confirm");
+}
+function onSecondary(_state, event) {
+  emit(hostOf(event), "secondary");
+}
+function onCancelClick(_state, event) {
+  const host = hostOf(event);
+  emit(host, "cancel");
+  if (host) {
+    close(host, "cancel");
+  }
+}
+export {
+  close,
+  onCancelClick,
+  onCommand,
+  onConfirm,
+  onNativeCancel,
+  onNativeClose,
+  onSecondary,
+  onToggle,
+  showModal
+};
+
+//# debugId=096F9C3A61F4D15164756E2164756E21
+//# sourceMappingURL=dialog-s890b918.js.map