@ohhwells/bridge 0.1.141 → 0.1.142

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1256,15 +1256,25 @@ function readAssignments(content) {
1256
1256
  function cssLength(style, prop) {
1257
1257
  return style.getPropertyValue(prop) || "0px";
1258
1258
  }
1259
+ function withTransitionsSettled(el, read) {
1260
+ const prior = el.style.getPropertyValue("transition");
1261
+ const priority = el.style.getPropertyPriority("transition");
1262
+ el.style.setProperty("transition", "none", "important");
1263
+ try {
1264
+ return read(getComputedStyle(el));
1265
+ } finally {
1266
+ if (prior) el.style.setProperty("transition", prior, priority);
1267
+ else el.style.removeProperty("transition");
1268
+ }
1269
+ }
1259
1270
  function readVariantSample(el) {
1260
- const style = getComputedStyle(el);
1261
- return {
1271
+ return withTransitionsSettled(el, (style) => ({
1262
1272
  background: style.backgroundColor,
1263
1273
  color: style.color,
1264
1274
  borderColor: style.borderTopColor,
1265
1275
  borderWidth: style.borderTopWidth,
1266
1276
  className: el.className || ""
1267
- };
1277
+ }));
1268
1278
  }
1269
1279
  function readSizeSample(el) {
1270
1280
  const style = getComputedStyle(el);
@@ -10187,38 +10197,39 @@ function deriveTemplateButtonStyle() {
10187
10197
  el.querySelectorAll("[data-ohw-editable]").length <= 1
10188
10198
  );
10189
10199
  const isFilled = (el) => {
10190
- const bg = getComputedStyle(el).backgroundColor;
10200
+ const bg = withTransitionsSettled(el, (s) => s.backgroundColor);
10191
10201
  if (!bg || bg === "transparent") return false;
10192
10202
  const alpha = bg.match(/rgba?\([^)]*,\s*([\d.]+)\)$/);
10193
10203
  return !alpha || parseFloat(alpha[1]) > 0;
10194
10204
  };
10195
10205
  const btn = candidates.find(isFilled) ?? candidates[0];
10196
10206
  if (!btn) return null;
10197
- const cs = getComputedStyle(btn);
10198
- const filled = isFilled(btn);
10199
- const corners = [
10200
- cs.borderTopLeftRadius,
10201
- cs.borderTopRightRadius,
10202
- cs.borderBottomRightRadius,
10203
- cs.borderBottomLeftRadius
10204
- ].map((v) => v || "0px");
10205
- const radius = corners.every((v) => v === corners[0]) ? corners[0] : corners.join(" ");
10206
- const px2 = (v) => parseFloat(v) || 0;
10207
- const lineHeight = px2(cs.lineHeight) || px2(cs.fontSize) * 1.2;
10208
- const contentH = btn.getBoundingClientRect().height - px2(cs.borderTopWidth) - px2(cs.borderBottomWidth);
10209
- const impliedY = Math.round(Math.max(0, (contentH - lineHeight) / 2));
10210
- const padY = Math.max(px2(cs.paddingTop), px2(cs.paddingBottom), impliedY);
10211
- const padX = Math.max(px2(cs.paddingLeft), px2(cs.paddingRight));
10212
- return {
10213
- radius: radius || "10px",
10214
- padding: `${padY}px ${padX}px`,
10215
- ...filled ? { background: cs.backgroundColor, color: cs.color } : {},
10216
- fontFamily: cs.fontFamily || "",
10217
- fontSize: cs.fontSize || "",
10218
- fontWeight: cs.fontWeight || "",
10219
- letterSpacing: cs.letterSpacing || "",
10220
- textTransform: cs.textTransform || ""
10221
- };
10207
+ return withTransitionsSettled(btn, (cs) => {
10208
+ const filled = isFilled(btn);
10209
+ const corners = [
10210
+ cs.borderTopLeftRadius,
10211
+ cs.borderTopRightRadius,
10212
+ cs.borderBottomRightRadius,
10213
+ cs.borderBottomLeftRadius
10214
+ ].map((v) => v || "0px");
10215
+ const radius = corners.every((v) => v === corners[0]) ? corners[0] : corners.join(" ");
10216
+ const px2 = (v) => parseFloat(v) || 0;
10217
+ const lineHeight = px2(cs.lineHeight) || px2(cs.fontSize) * 1.2;
10218
+ const contentH = btn.getBoundingClientRect().height - px2(cs.borderTopWidth) - px2(cs.borderBottomWidth);
10219
+ const impliedY = Math.round(Math.max(0, (contentH - lineHeight) / 2));
10220
+ const padY = Math.max(px2(cs.paddingTop), px2(cs.paddingBottom), impliedY);
10221
+ const padX = Math.max(px2(cs.paddingLeft), px2(cs.paddingRight));
10222
+ return {
10223
+ radius: radius || "10px",
10224
+ padding: `${padY}px ${padX}px`,
10225
+ ...filled ? { background: cs.backgroundColor, color: cs.color } : {},
10226
+ fontFamily: cs.fontFamily || "",
10227
+ fontSize: cs.fontSize || "",
10228
+ fontWeight: cs.fontWeight || "",
10229
+ letterSpacing: cs.letterSpacing || "",
10230
+ textTransform: cs.textTransform || ""
10231
+ };
10232
+ });
10222
10233
  }
10223
10234
  var mounted = /* @__PURE__ */ new Map();
10224
10235
  function findTemplateSection(id) {
@@ -31120,7 +31131,7 @@ function OhhwellsBridge() {
31120
31131
  postToParent2({
31121
31132
  type: "ow:ready",
31122
31133
  version: "1",
31123
- bridgeVersion: "0.1.140",
31134
+ bridgeVersion: "0.1.141",
31124
31135
  path: pathname,
31125
31136
  nodes: collectEditableNodes(editContentRef.current),
31126
31137
  sections