weevar 2.0.0 → 2.0.1

package/README.md

@@ -4,7 +4,7 @@ A dev-only overlay for React apps that lets you **rearrange layout** and **edit
 
 Weevar runs locally while your dev server is active. Nothing ships to production until you apply the generated prompts to your source code.
 
-**Current version:** see the tray footer (`v2.0.0` at time of this release).
+**Current version:** see the tray footer (`v2.0.1` at time of this release).
 
 ---
 

package/dist/react.dev.js

@@ -142,13 +142,36 @@ function isInsideWeevarOverlay(el) {
   if (element.id === WEEVAR_HOST_ID) return true;
   return false;
 }
+var weevarClosedShadowRoot = null;
+function setWeevarClosedShadowRoot(root) {
+  weevarClosedShadowRoot = root;
+}
 function getDeepActiveElement() {
-  let active = document.activeElement;
+  const hostActive = document.activeElement;
+  if (hostActive instanceof HTMLElement && hostActive.id === WEEVAR_HOST_ID && weevarClosedShadowRoot?.activeElement) {
+    return weevarClosedShadowRoot.activeElement;
+  }
+  let active = hostActive;
   while (active?.shadowRoot?.activeElement) {
     active = active.shadowRoot.activeElement;
   }
   return active;
 }
+function isEditableElement(el) {
+  if (!(el instanceof HTMLElement)) return false;
+  const tag = el.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  return el.isContentEditable;
+}
+function shouldIgnoreWeevarShortcut(e) {
+  const target = e.target;
+  if (isEditableElement(target instanceof HTMLElement ? target : null)) return true;
+  if (isEditableElement(getDeepActiveElement())) return true;
+  for (const n of e.composedPath()) {
+    if (n instanceof HTMLElement && isEditableElement(n)) return true;
+  }
+  return false;
+}
 function blurWeevarOverlayFocusIfPointerOutside(e) {
   const ae = getDeepActiveElement();
   if (!(ae instanceof HTMLElement)) return;
@@ -1660,7 +1683,7 @@ function readRadiusValues(el) {
 }
 
 // src/version.ts
-var WEEVAR_VERSION = "2.0.0";
+var WEEVAR_VERSION = "2.0.1";
 function weevarVersionLabel() {
   return `v${WEEVAR_VERSION}`;
 }
@@ -2194,7 +2217,8 @@ function ColorPicker({
       setHexRaw(displayOpaqueHex);
       hexFieldBaselineRef.current = displayOpaqueHex.toLowerCase();
     },
-    onChange: (raw) => {
+    onChange: (e) => {
+      const raw = e.target.value;
       setHexRaw(raw);
       if (isValidOpaqueHex(raw)) {
         onChange(
@@ -2249,7 +2273,8 @@ function ColorPicker({
       setAlphaRaw(formatAlphaPercent(displayAlphaPercent));
       alphaFieldBaselineRef.current = formatAlphaPercent(displayAlphaPercent);
     },
-    onChange: (raw) => {
+    onChange: (e) => {
+      const raw = e.target.value;
       setAlphaRaw(raw);
       const pct = parseAlphaPercentInput(raw);
       if (pct != null) {
@@ -10393,10 +10418,8 @@ body *:focus {
     const onShortcut = (e) => {
       if (e.defaultPrevented) return;
       if (e.metaKey || e.ctrlKey || e.altKey) return;
-      const t = e.target;
-      if (t instanceof HTMLElement) {
-        if (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable) return;
-      }
+      if (editSelectionTrayVisible) return;
+      if (shouldIgnoreWeevarShortcut(e)) return;
       const k = e.key.toLowerCase();
       if (k === "p") {
         e.preventDefault();
@@ -10452,6 +10475,7 @@ body *:focus {
     };
   }, [
     sessionOn,
+    editSelectionTrayVisible,
     cancelDrag,
     setSessionOn,
     generateFromBatch,
@@ -11528,6 +11552,7 @@ function Weevar(props) {
       const owner = existingHost.getAttribute(WEEVAR_HOST_OWNER_ATTR);
       if (owner && owner !== WEEVAR_HOST_OWNER_TOKEN) {
         if (owner.startsWith("weevar-")) {
+          setWeevarClosedShadowRoot(null);
           existingHost.remove();
         } else {
           if (undefined.DEV && !warnedAboutForeignHostOwner) {
@@ -11539,6 +11564,7 @@ function Weevar(props) {
           return false;
         }
       } else {
+        setWeevarClosedShadowRoot(null);
         existingHost.remove();
       }
     }
@@ -11548,6 +11574,7 @@ function Weevar(props) {
     host.style.cssText = "position:fixed;inset:0;pointer-events:none;z-index:2147483646;";
     document.body.appendChild(host);
     const shadow = host.attachShadow({ mode: "closed" });
+    setWeevarClosedShadowRoot(shadow);
     const mount = document.createElement("div");
     shadow.appendChild(mount);
     const root = client.createRoot(mount);
@@ -11590,12 +11617,7 @@ function Weevar(props) {
   react.useEffect(() => {
     if (disabled) return;
     const onKey = (e) => {
-      const target = e.target;
-      if (target instanceof HTMLElement) {
-        const tag = target.tagName;
-        if (tag === "INPUT" || tag === "TEXTAREA" || target.isContentEditable)
-          return;
-      }
+      if (shouldIgnoreWeevarShortcut(e)) return;
       const match = keybind ? matchCustomKeybind(e, keybind) : defaultMatchKeybind(e);
       if (!match) return;
       e.preventDefault();
@@ -11613,6 +11635,7 @@ function Weevar(props) {
       window.setTimeout(() => {
         root?.unmount();
         if (ownedHost && ownedHost.getAttribute(WEEVAR_HOST_OWNER_ATTR) === WEEVAR_HOST_OWNER_TOKEN) {
+          setWeevarClosedShadowRoot(null);
           ownedHost.remove();
         }
       }, 0);