@jxsuite/studio 4.1.0 → 5.1.0

package/dist/chunks/color-field-anwybnkn.js

@@ -0,0 +1,208 @@
+import {
+  parseColor2,
+  formatHex2,
+  rgbToHsv2,
+  hsvToRgb2,
+  srgbToOklch2,
+  formatOklch2,
+  preferredInk2
+} from "./iframe-entry-b27vq81n.js";
+import {
+  openAt2,
+  close2
+} from "./iframe-entry-nbyxee1y.js";
+
+// ../ui/src/behaviors/color-field.ts
+var HOST = "jx-color-field";
+var minted = 0;
+var hosts = new WeakMap;
+function hostOf(event) {
+  const target = event.currentTarget;
+  return target instanceof HTMLElement && target.localName === HOST ? target : null;
+}
+function ownerOf(event) {
+  const target = event.currentTarget ?? event.target;
+  return target instanceof Element ? target.closest(HOST) : null;
+}
+function panelOf(host) {
+  return host.querySelector('[part="picker"]');
+}
+function currentRgb(state) {
+  return hsvToRgb2({
+    a: state.alpha === true ? Number(state.opacity) / 100 : 1,
+    h: Number(state.hue),
+    s: Number(state.saturation),
+    v: Number(state.brightness)
+  });
+}
+function announce(host, ...names) {
+  for (const name of names) {
+    host.dispatchEvent(new Event(name, { bubbles: true }));
+  }
+}
+function paint(state, rgb) {
+  const opaque = { ...rgb, a: 1 };
+  state.solid = formatHex2(opaque);
+  state.ink = preferredInk2(opaque);
+}
+function compose(state) {
+  const rgb = currentRgb(state);
+  state.value = state.format === "oklch" ? formatOklch2(srgbToOklch2(rgb)) : formatHex2(rgb);
+  state.text = state.value;
+  state.invalid = false;
+  paint(state, rgb);
+}
+function syncFromValue(state) {
+  const parsed = parseColor2(String(state.value ?? "")) ?? parseColor2(String(state.resolved ?? ""));
+  state.invalid = false;
+  state.text = String(state.value ?? "");
+  if (!parsed) {
+    return;
+  }
+  paint(state, parsed);
+  if (formatHex2(parsed) === formatHex2(currentRgb(state))) {
+    return;
+  }
+  const hsv = rgbToHsv2(parsed);
+  state.saturation = Number(hsv.s.toFixed(2));
+  state.brightness = Number(hsv.v.toFixed(2));
+  state.opacity = Number((hsv.a * 100).toFixed(2));
+  if (hsv.s > 0 && hsv.v > 0) {
+    state.hue = Number(hsv.h.toFixed(2));
+  }
+}
+var CHANNEL = "[data-jx-channel]";
+function sourceOf(event) {
+  const { target } = event;
+  return target instanceof Element ? target.closest(CHANNEL) : null;
+}
+function route(state, event, name) {
+  const host = hostOf(event);
+  if (!host || event.target === host) {
+    return;
+  }
+  const source = sourceOf(event);
+  const channel = source?.dataset["jxChannel"];
+  if (!source || !channel) {
+    return;
+  }
+  event.stopPropagation();
+  if (channel === "text") {
+    const typed = String(event.target.value ?? "");
+    state.text = typed;
+    const parsed = parseColor2(typed);
+    if (name === "input") {
+      state.invalid = false;
+      return;
+    }
+    if (!parsed) {
+      state.invalid = typed !== "";
+      return;
+    }
+    applyRgb(state, parsed);
+    compose(state);
+    announce(host, "input", "change");
+    return;
+  }
+  if (channel === "system" || channel === "palette") {
+    const parsed = parseColor2(String(event.target.value ?? ""));
+    if (!parsed) {
+      return;
+    }
+    applyRgb(state, { ...parsed, a: state.alpha === true ? Number(state.opacity) / 100 : 1 });
+  } else if (channel === "area") {
+    state.saturation = Number(source["saturation"]);
+    state.brightness = Number(source["brightness"]);
+  } else if (channel === "hue") {
+    state.hue = Number(source["value"]);
+  } else if (channel === "opacity") {
+    state.opacity = Number(source["value"]);
+  } else {
+    return;
+  }
+  compose(state);
+  announce(host, name);
+}
+function applyRgb(state, rgb) {
+  const hsv = rgbToHsv2(rgb);
+  state.saturation = Number(hsv.s.toFixed(2));
+  state.brightness = Number(hsv.v.toFixed(2));
+  if (state.alpha === true) {
+    state.opacity = Number((hsv.a * 100).toFixed(2));
+  }
+  if (hsv.s > 0 && hsv.v > 0) {
+    state.hue = Number(hsv.h.toFixed(2));
+  }
+}
+function onFieldInput(state, event) {
+  route(state, event, "input");
+}
+function onFieldChange(state, event) {
+  route(state, event, "change");
+}
+function onOpenPicker(state, event) {
+  const host = ownerOf(event);
+  const panel = host ? panelOf(host) : null;
+  if (!host || !panel || state.disabled === true) {
+    return;
+  }
+  if (state.expanded === true) {
+    close2(panel);
+    return;
+  }
+  const box = host.getBoundingClientRect();
+  panel.x = Math.round(box.left);
+  panel.y = Math.round(box.bottom);
+  openAt2(panel, event.currentTarget instanceof Element ? event.currentTarget : host);
+}
+function eyeDropperAvailable(offered) {
+  return offered === true && typeof globalThis.EyeDropper === "function";
+}
+function onEyeDropper(state, event) {
+  const host = ownerOf(event);
+  const Api = globalThis.EyeDropper;
+  if (!host || !Api || state.disabled === true) {
+    return Promise.resolve();
+  }
+  return new Api().open().then((result) => {
+    const parsed = parseColor2(String(result?.sRGBHex ?? ""));
+    if (!parsed) {
+      return;
+    }
+    applyRgb(state, parsed);
+    compose(state);
+    announce(host, "input", "change");
+  }).catch(() => {});
+}
+function onFieldMount(state, event) {
+  const host = hostOf(event);
+  if (!host) {
+    return;
+  }
+  hosts.set(state, host);
+  minted += 1;
+  state.uid = `jx-color-field-${minted}`;
+  syncFromValue(state);
+  const observer = new MutationObserver(() => {
+    syncFromValue(state);
+  });
+  observer.observe(host, { attributeFilter: ["data-resolved", "data-value"], attributes: true });
+  const panel = panelOf(host);
+  if (panel) {
+    panel.addEventListener("toggle", (toggle) => {
+      state.expanded = toggle.newState === "open";
+    });
+  }
+}
+export {
+  eyeDropperAvailable,
+  onEyeDropper,
+  onFieldChange,
+  onFieldInput,
+  onFieldMount,
+  onOpenPicker,
+  syncFromValue
+};
+
+//# debugId=101223523D4FAA6164756E2164756E21
+//# sourceMappingURL=color-field-anwybnkn.js.map

package/dist/chunks/color-slider-44ez96fc.js

@@ -0,0 +1,79 @@
+import {
+  snapToStep2
+} from "./iframe-entry-b27vq81n.js";
+
+// ../ui/src/behaviors/color-slider.ts
+var HOST = "jx-color-slider";
+var KEY_SIGN = {
+  ArrowDown: -1,
+  ArrowLeft: -1,
+  ArrowRight: 1,
+  ArrowUp: 1
+};
+function hostOf(event) {
+  const target = event.currentTarget;
+  return target instanceof HTMLElement && target.localName === HOST ? target : null;
+}
+function controlOf(host) {
+  return host.querySelector('input[part="input"]');
+}
+function announce(host, ...names) {
+  for (const name of names) {
+    host.dispatchEvent(new Event(name, { bubbles: true }));
+  }
+}
+function boundsOf(state) {
+  const min = Number.isFinite(Number(state.min)) ? Number(state.min) : 0;
+  const top = Number(state.maxValue);
+  const step = Number(state.step);
+  return {
+    max: Number.isFinite(top) && top > min ? top : 360,
+    min,
+    step: Number.isFinite(step) && step > 0 ? step : 1
+  };
+}
+function onSliderInput(state, event) {
+  const host = hostOf(event);
+  if (!host || event.target === host) {
+    return;
+  }
+  event.stopPropagation();
+  state.value = Number(event.target.value);
+  announce(host, "input");
+}
+function onSliderChange(state, event) {
+  const host = hostOf(event);
+  if (!host || event.target === host) {
+    return;
+  }
+  event.stopPropagation();
+  state.value = Number(event.target.value);
+  announce(host, "change");
+}
+function onSliderKeydown(state, event) {
+  const host = hostOf(event);
+  const sign = KEY_SIGN[event.key];
+  if (!host || !sign || !event.shiftKey || state.disabled === true) {
+    return;
+  }
+  event.preventDefault();
+  const { max, min, step } = boundsOf(state);
+  const next = snapToStep2(Number(state.value) + sign * step * 10, step, min, max);
+  if (next === Number(state.value)) {
+    return;
+  }
+  state.value = next;
+  const control = controlOf(host);
+  if (control) {
+    control.value = String(next);
+  }
+  announce(host, "input", "change");
+}
+export {
+  onSliderChange,
+  onSliderInput,
+  onSliderKeydown
+};
+
+//# debugId=B7AA9D690F14EF0664756E2164756E21
+//# sourceMappingURL=color-slider-44ez96fc.js.map

package/dist/chunks/color-xgg3kfw7.js

@@ -0,0 +1,35 @@
+import {
+  clamp2,
+  snapToStep2,
+  parseHex2,
+  parseColor2,
+  formatHex2,
+  rgbToHsv2,
+  hsvToRgb2,
+  srgbToOklch2,
+  oklchToSrgb2,
+  formatOklch2,
+  relativeLuminance2,
+  contrastRatio2,
+  preferredInk2,
+  inkOn2
+} from "./iframe-entry-b27vq81n.js";
+export {
+  clamp2 as clamp,
+  contrastRatio2 as contrastRatio,
+  formatHex2 as formatHex,
+  formatOklch2 as formatOklch,
+  hsvToRgb2 as hsvToRgb,
+  inkOn2 as inkOn,
+  oklchToSrgb2 as oklchToSrgb,
+  parseColor2 as parseColor,
+  parseHex2 as parseHex,
+  preferredInk2 as preferredInk,
+  relativeLuminance2 as relativeLuminance,
+  rgbToHsv2 as rgbToHsv,
+  snapToStep2 as snapToStep,
+  srgbToOklch2 as srgbToOklch
+};
+
+//# debugId=53CFA187C443A19B64756E2164756E21
+//# sourceMappingURL=color-xgg3kfw7.js.map

package/dist/chunks/combobox-5e7jev23.js

@@ -0,0 +1,236 @@
+import {
+  openAt2,
+  close2
+} from "./iframe-entry-nbyxee1y.js";
+
+// ../ui/src/behaviors/combobox.ts
+var HOST = "jx-combobox";
+var minted = 0;
+function comboboxOf(event) {
+  const target = event.currentTarget;
+  return target instanceof Element ? target.closest(HOST) : null;
+}
+function inputOf(host) {
+  return host.querySelector('input[part="input"]');
+}
+function panelOf(host) {
+  return host.querySelector('[part="popup"]');
+}
+function rowsOf(state) {
+  return Array.isArray(state.options) ? state.options : [];
+}
+function announce(host, ...names) {
+  for (const name of names) {
+    host.dispatchEvent(new Event(name, { bubbles: true }));
+  }
+}
+function operable(state) {
+  return state.disabled !== true && state.readonly !== true;
+}
+function openList(host) {
+  const panel = panelOf(host);
+  if (!panel) {
+    return;
+  }
+  const box = host.getBoundingClientRect();
+  const placed = panel;
+  placed.x = Math.round(box.left);
+  placed.y = Math.round(box.bottom);
+  openAt2(panel, host);
+}
+function closeList(host) {
+  const panel = panelOf(host);
+  if (panel) {
+    close2(panel);
+  }
+}
+function showList(state, host) {
+  if (!operable(state) || rowsOf(state).length === 0) {
+    return false;
+  }
+  openList(host);
+  return true;
+}
+function landingIndex(state) {
+  const rows = rowsOf(state);
+  const row = rowFor(rows, String(state.value ?? ""));
+  return row && row.disabled !== true ? rows.indexOf(row) : -1;
+}
+function nextIndex(rows, from, step) {
+  const start = from < 0 ? step > 0 ? -1 : 0 : from;
+  for (const offset of rows.keys()) {
+    const at = ((start + step * (offset + 1)) % rows.length + rows.length) % rows.length;
+    if (rows[at]?.disabled !== true) {
+      return at;
+    }
+  }
+  return -1;
+}
+function rowFor(rows, text) {
+  const wanted = text.toLowerCase();
+  return rows.find((row) => String(row.value).toLowerCase() === wanted) ?? null;
+}
+function commitRow(state, host, row) {
+  const value = String(row.value);
+  state.value = value;
+  state.committed = value;
+  state.activeIndex = -1;
+  closeList(host);
+  inputOf(host)?.focus();
+  announce(host, "input", "change");
+}
+function mountCombobox(state, _host) {
+  minted += 1;
+  state.uid = `jx-combobox-${minted}`;
+  state.committed = String(state.value ?? "");
+}
+function onComboboxInput(state, event) {
+  const host = comboboxOf(event);
+  const control = event.target;
+  if (!host || !(control instanceof HTMLInputElement)) {
+    return;
+  }
+  state.value = control.value;
+  state.activeIndex = -1;
+  showList(state, host);
+}
+function onComboboxToggle(state, event) {
+  const opening = event.newState === "open";
+  state.open = opening;
+  if (!opening) {
+    state.activeIndex = -1;
+  }
+}
+function onComboboxButton(state, event) {
+  const host = comboboxOf(event);
+  if (!host || !operable(state)) {
+    return;
+  }
+  if (state.open === true) {
+    closeList(host);
+    return;
+  }
+  if (showList(state, host)) {
+    state.activeIndex = landingIndex(state);
+  }
+  inputOf(host)?.focus();
+}
+function onComboboxPick(state, event) {
+  const host = comboboxOf(event);
+  const picked = String(event.detail ?? "");
+  const row = rowFor(rowsOf(state), picked);
+  if (!host || !row) {
+    return;
+  }
+  commitRow(state, host, row);
+}
+function onComboboxCommit(state, event) {
+  const host = comboboxOf(event);
+  if (!host) {
+    return;
+  }
+  const control = event.target instanceof HTMLInputElement ? event.target : null;
+  const text = control ? control.value : String(state.value ?? "");
+  const row = rowFor(rowsOf(state), text);
+  if (state.allowsCustomValue === true || text === "" || row) {
+    state.value = row ? String(row.value) : text;
+    state.committed = String(state.value);
+    closeList(host);
+    return;
+  }
+  event.stopPropagation();
+  state.value = String(state.committed ?? "");
+  announce(host, "change");
+}
+function onComboboxKeydown(state, event) {
+  const host = comboboxOf(event);
+  if (!host || event.ctrlKey || event.metaKey) {
+    return;
+  }
+  const rows = rowsOf(state);
+  const at = Number(state.activeIndex ?? -1);
+  switch (event.key) {
+    case "ArrowDown": {
+      if (!operable(state)) {
+        return;
+      }
+      if (state.open !== true) {
+        if (!showList(state, host)) {
+          return;
+        }
+        state.activeIndex = event.altKey ? landingIndex(state) : nextIndex(rows, -1, 1);
+      } else if (!event.altKey) {
+        state.activeIndex = nextIndex(rows, at, 1);
+      }
+      break;
+    }
+    case "ArrowUp": {
+      if (!operable(state)) {
+        return;
+      }
+      if (event.altKey) {
+        closeList(host);
+        break;
+      }
+      if (state.open !== true) {
+        if (!showList(state, host)) {
+          return;
+        }
+        state.activeIndex = nextIndex(rows, -1, -1);
+      } else {
+        state.activeIndex = nextIndex(rows, at, -1);
+      }
+      break;
+    }
+    case "Enter": {
+      const row = state.open === true && at >= 0 ? rows[at] : undefined;
+      if (!row) {
+        if (state.open === true) {
+          closeList(host);
+        }
+        return;
+      }
+      commitRow(state, host, row);
+      break;
+    }
+    case "Tab": {
+      const row = state.open === true && at >= 0 ? rows[at] : undefined;
+      if (row) {
+        commitRow(state, host, row);
+      } else {
+        closeList(host);
+      }
+      return;
+    }
+    case "Escape": {
+      if (state.open !== true) {
+        return;
+      }
+      closeList(host);
+      event.stopPropagation();
+      break;
+    }
+    default: {
+      return;
+    }
+  }
+  event.preventDefault();
+}
+export {
+  closeList,
+  inputOf,
+  landingIndex,
+  mountCombobox,
+  nextIndex,
+  onComboboxButton,
+  onComboboxCommit,
+  onComboboxInput,
+  onComboboxKeydown,
+  onComboboxPick,
+  onComboboxToggle,
+  openList,
+  rowFor
+};
+
+//# debugId=FC54493B3A10597164756E2164756E21
+//# sourceMappingURL=combobox-5e7jev23.js.map

package/dist/chunks/components-vj72gqtq.js

@@ -0,0 +1,20 @@
+import {
+  componentRegistry2,
+  loadComponentRegistry2,
+  noteComponentSaved2,
+  buildComponentInstance2,
+  computeRelativePath2
+} from "./studio-zdn2g6dt.js";
+import"./studio-6ewqv390.js";
+import"./studio-6nzaktvy.js";
+import"./studio-7r42c6ca.js";
+export {
+  buildComponentInstance2 as buildComponentInstance,
+  componentRegistry2 as componentRegistry,
+  computeRelativePath2 as computeRelativePath,
+  loadComponentRegistry2 as loadComponentRegistry,
+  noteComponentSaved2 as noteComponentSaved
+};
+
+//# debugId=0B130F1B133CA2C764756E2164756E21
+//# sourceMappingURL=components-vj72gqtq.js.map

package/dist/chunks/content-source-5mex4x1h.js

@@ -0,0 +1,46 @@
+import {
+  collectionInfo2,
+  collectionDirs2,
+  listCollectionEntryIds2,
+  reloadDraftAwareGrids2,
+  createCollectionSource2,
+  createPagesSource2
+} from "./studio-1knfqgy7.js";
+import"./studio-gb13095a.js";
+import"./studio-g3jevyjt.js";
+import"./studio-q0a3yk4n.js";
+import"./studio-3773086z.js";
+import"./studio-tqgryxwg.js";
+import"./studio-mhhyamxf.js";
+import"./studio-8scdew0e.js";
+import"./studio-nq5yf5mp.js";
+import"./studio-1z1kcjv4.js";
+import"./studio-qk90fgqm.js";
+import"./studio-zdn2g6dt.js";
+import"./studio-y9zedyjn.js";
+import"./studio-jxp12rnj.js";
+import"./studio-nzzpvzx9.js";
+import"./studio-k75n7vhp.js";
+import"./studio-q3x06vmj.js";
+import"./studio-6ewqv390.js";
+import"./studio-esrxgwh6.js";
+import"./studio-vw7mzp6z.js";
+import"./studio-6nzaktvy.js";
+import"./studio-aj37eer3.js";
+import"./studio-vfq8qpjt.js";
+import"./studio-1k325pwf.js";
+import"./studio-kkqkcp3d.js";
+import"./studio-p1dw8wfw.js";
+import"./studio-yxa81f45.js";
+import"./studio-7r42c6ca.js";
+export {
+  collectionDirs2 as collectionDirs,
+  collectionInfo2 as collectionInfo,
+  createCollectionSource2 as createCollectionSource,
+  createPagesSource2 as createPagesSource,
+  listCollectionEntryIds2 as listCollectionEntryIds,
+  reloadDraftAwareGrids2 as reloadDraftAwareGrids
+};
+
+//# debugId=597BB9A23802D85864756E2164756E21
+//# sourceMappingURL=content-source-5mex4x1h.js.map