mesurer 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # mesurer
 
+## 0.1.3
+
+- fix color settings input, copy, and paste updates in embedded apps and the Chrome extension
+- scope extension keyboard isolation so it does not interfere with embedded Mesurer instances
+
 ## 0.1.2
 
 - add configurable keyboard shortcuts and toolbar minimization

package/dist/index.cjs

@@ -91,7 +91,7 @@ var import_react2 = require("react");
 // package.json
 var package_default = {
   name: "mesurer",
-  version: "0.1.2",
+  version: "0.1.3",
   description: "Inspect, annotate, and give feedback on any live interface",
   license: "MIT",
   author: "Julien Thibeaut",
@@ -1043,12 +1043,44 @@ function ColorField({ label, value, fallback, ownerWindow, onChange }) {
   const [alphaDraft, setAlphaDraft] = (0, import_react2.useState)(String(alphaValue));
   const [hexFocused, setHexFocused] = (0, import_react2.useState)(false);
   const [alphaFocused, setAlphaFocused] = (0, import_react2.useState)(false);
+  const nativeColorRef = (0, import_react2.useRef)(null);
+  const hexInputRef = (0, import_react2.useRef)(null);
+  const alphaInputRef = (0, import_react2.useRef)(null);
   const updateColor = (nextHex, nextAlpha) => {
     if (!/^[\da-f]{6}$/i.test(nextHex)) return;
     const nextSample = parseCssColor(`#${nextHex}`);
     if (!nextSample) return;
     onChange(colorToHex({ ...nextSample, alpha: Math.min(100, Math.max(0, nextAlpha)) / 100 }));
   };
+  const handleNativeColorInput = (input) => {
+    updateColor(input.value.slice(1), alphaValue);
+  };
+  const handleHexInput = (input) => {
+    const next = input.value.replace(/[^\da-f]/gi, "").slice(0, 6).toUpperCase();
+    setHexDraft(next);
+    updateColor(next, alphaFocused ? Number(alphaDraft) : alphaValue);
+  };
+  const handleAlphaInput = (input) => {
+    const next = input.value.replace(/\D/g, "").slice(0, 3);
+    setAlphaDraft(next);
+    updateColor(hexFocused ? hexDraft : hexValue, Number(next));
+  };
+  (0, import_react2.useLayoutEffect)(() => {
+    const nativeColor = nativeColorRef.current;
+    const hexInput = hexInputRef.current;
+    const alphaInput = alphaInputRef.current;
+    if (!nativeColor || !hexInput || !alphaInput) return;
+    nativeColor.oninput = () => handleNativeColorInput(nativeColor);
+    nativeColor.onchange = () => handleNativeColorInput(nativeColor);
+    hexInput.oninput = () => handleHexInput(hexInput);
+    alphaInput.oninput = () => handleAlphaInput(alphaInput);
+    return () => {
+      nativeColor.oninput = null;
+      nativeColor.onchange = null;
+      hexInput.oninput = null;
+      alphaInput.oninput = null;
+    };
+  });
   const swatchColor = ownerWindow.CSS?.supports("color", value) ? value : fallback;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `msr:col-span-2 msr:grid msr:h-8 msr:w-full ${SETTINGS_COLUMNS} msr:items-center msr:gap-0 msr:text-[12px] msr:text-ink-700`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: label }),
@@ -1064,11 +1096,11 @@ function ColorField({ label, value, fallback, ownerWindow, onChange }) {
               children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                 "input",
                 {
+                  ref: nativeColorRef,
                   type: "color",
                   "aria-label": `${label} color picker`,
                   value: inputValue,
-                  className: "msr:absolute msr:inset-0 msr:size-full msr:cursor-pointer msr:opacity-0",
-                  onChange: (event) => onChange(event.target.value)
+                  className: "msr:absolute msr:inset-0 msr:size-full msr:cursor-pointer msr:opacity-0"
                 }
               )
             }
@@ -1076,21 +1108,18 @@ function ColorField({ label, value, fallback, ownerWindow, onChange }) {
           /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
             "input",
             {
+              ref: hexInputRef,
               "aria-label": `${label} hex value`,
               type: "text",
               value: hexFocused ? hexDraft : hexValue,
-              maxLength: 6,
+              maxLength: 7,
               className: "msr:min-w-0 msr:flex-1 msr:bg-transparent msr:px-2 msr:font-mono msr:text-[12px] msr:tabular-nums msr:text-ink-700 msr:outline-none",
               onFocus: () => {
                 setHexDraft(hexValue);
                 setHexFocused(true);
               },
               onBlur: () => setHexFocused(false),
-              onChange: (event) => {
-                const next = event.target.value.replace(/[^\da-f]/gi, "").slice(0, 6).toUpperCase();
-                setHexDraft(next);
-                updateColor(next, alphaFocused ? Number(alphaDraft) : alphaValue);
-              },
+              onChange: (event) => handleHexInput(event.currentTarget),
               onPointerDown: (event) => event.stopPropagation(),
               onClick: (event) => event.stopPropagation()
             }
@@ -1099,6 +1128,7 @@ function ColorField({ label, value, fallback, ownerWindow, onChange }) {
         right: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "input",
           {
+            ref: alphaInputRef,
             "aria-label": `${label} opacity value`,
             type: "text",
             inputMode: "numeric",
@@ -1110,11 +1140,7 @@ function ColorField({ label, value, fallback, ownerWindow, onChange }) {
               setAlphaFocused(true);
             },
             onBlur: () => setAlphaFocused(false),
-            onChange: (event) => {
-              const next = event.target.value.replace(/\D/g, "").slice(0, 3);
-              setAlphaDraft(next);
-              updateColor(hexFocused ? hexDraft : hexValue, Number(next));
-            },
+            onChange: (event) => handleAlphaInput(event.currentTarget),
             onKeyDown: (event) => {
               if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
               event.preventDefault();
@@ -7497,16 +7523,23 @@ var MESURER_EVENT_TYPES = /* @__PURE__ */ new Set([
 ]);
 var ownsKeyboard = (view) => view.document.documentElement.hasAttribute(MESURER_KEYBOARD_ATTR);
 var isMesurerEventPath = (event) => event.composedPath().some((node) => isMesurerUiNode(node));
-var installKeyboardGate = (view = window, { isolateMesurerEvents = false } = {}) => {
+var installKeyboardGate = (view = window, {
+  isolateMesurerEvents = false,
+  isolationHostId
+} = {}) => {
   const gated = view;
   if (gated[INSTALLED]) return;
   gated[INSTALLED] = true;
+  const isIsolatedMesurerEvent = (event) => !isolationHostId || event.composedPath().some(
+    (node) => node instanceof Element && node.id === isolationHostId
+  );
   const blockPageKey = (event) => {
     if (!ownsKeyboard(view)) {
       return;
     }
     const mesurerEvent = isMesurerKeyboardEvent(event, view);
     if (mesurerEvent) {
+      if (isolateMesurerEvents && !isIsolatedMesurerEvent(event)) return;
       if (!isolateMesurerEvents || isTypingInMesurer(event, view)) {
         return;
       }
@@ -7615,7 +7648,7 @@ var installKeyboardGate = (view = window, { isolateMesurerEvents = false } = {})
       const once = typeof options !== "boolean" && Boolean(options?.once);
       const signal = typeof options !== "boolean" ? options?.signal : void 0;
       wrapped = function(event) {
-        if (ownsKeyboard(view) && isMesurerEventPath(event)) {
+        if (ownsKeyboard(view) && isMesurerEventPath(event) && isIsolatedMesurerEvent(event)) {
           if (once && !signal?.aborted) {
             nativeAddEventListener.call(this, type, wrapped, options);
           }

package/dist/index.js

@@ -66,7 +66,7 @@ import { useId, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState
 // package.json
 var package_default = {
   name: "mesurer",
-  version: "0.1.2",
+  version: "0.1.3",
   description: "Inspect, annotate, and give feedback on any live interface",
   license: "MIT",
   author: "Julien Thibeaut",
@@ -1024,12 +1024,44 @@ function ColorField({ label, value, fallback, ownerWindow, onChange }) {
   const [alphaDraft, setAlphaDraft] = useState2(String(alphaValue));
   const [hexFocused, setHexFocused] = useState2(false);
   const [alphaFocused, setAlphaFocused] = useState2(false);
+  const nativeColorRef = useRef2(null);
+  const hexInputRef = useRef2(null);
+  const alphaInputRef = useRef2(null);
   const updateColor = (nextHex, nextAlpha) => {
     if (!/^[\da-f]{6}$/i.test(nextHex)) return;
     const nextSample = parseCssColor(`#${nextHex}`);
     if (!nextSample) return;
     onChange(colorToHex({ ...nextSample, alpha: Math.min(100, Math.max(0, nextAlpha)) / 100 }));
   };
+  const handleNativeColorInput = (input) => {
+    updateColor(input.value.slice(1), alphaValue);
+  };
+  const handleHexInput = (input) => {
+    const next = input.value.replace(/[^\da-f]/gi, "").slice(0, 6).toUpperCase();
+    setHexDraft(next);
+    updateColor(next, alphaFocused ? Number(alphaDraft) : alphaValue);
+  };
+  const handleAlphaInput = (input) => {
+    const next = input.value.replace(/\D/g, "").slice(0, 3);
+    setAlphaDraft(next);
+    updateColor(hexFocused ? hexDraft : hexValue, Number(next));
+  };
+  useLayoutEffect2(() => {
+    const nativeColor = nativeColorRef.current;
+    const hexInput = hexInputRef.current;
+    const alphaInput = alphaInputRef.current;
+    if (!nativeColor || !hexInput || !alphaInput) return;
+    nativeColor.oninput = () => handleNativeColorInput(nativeColor);
+    nativeColor.onchange = () => handleNativeColorInput(nativeColor);
+    hexInput.oninput = () => handleHexInput(hexInput);
+    alphaInput.oninput = () => handleAlphaInput(alphaInput);
+    return () => {
+      nativeColor.oninput = null;
+      nativeColor.onchange = null;
+      hexInput.oninput = null;
+      alphaInput.oninput = null;
+    };
+  });
   const swatchColor = ownerWindow.CSS?.supports("color", value) ? value : fallback;
   return /* @__PURE__ */ jsxs10("div", { className: `msr:col-span-2 msr:grid msr:h-8 msr:w-full ${SETTINGS_COLUMNS} msr:items-center msr:gap-0 msr:text-[12px] msr:text-ink-700`, children: [
     /* @__PURE__ */ jsx18("span", { children: label }),
@@ -1045,11 +1077,11 @@ function ColorField({ label, value, fallback, ownerWindow, onChange }) {
               children: /* @__PURE__ */ jsx18(
                 "input",
                 {
+                  ref: nativeColorRef,
                   type: "color",
                   "aria-label": `${label} color picker`,
                   value: inputValue,
-                  className: "msr:absolute msr:inset-0 msr:size-full msr:cursor-pointer msr:opacity-0",
-                  onChange: (event) => onChange(event.target.value)
+                  className: "msr:absolute msr:inset-0 msr:size-full msr:cursor-pointer msr:opacity-0"
                 }
               )
             }
@@ -1057,21 +1089,18 @@ function ColorField({ label, value, fallback, ownerWindow, onChange }) {
           /* @__PURE__ */ jsx18(
             "input",
             {
+              ref: hexInputRef,
               "aria-label": `${label} hex value`,
               type: "text",
               value: hexFocused ? hexDraft : hexValue,
-              maxLength: 6,
+              maxLength: 7,
               className: "msr:min-w-0 msr:flex-1 msr:bg-transparent msr:px-2 msr:font-mono msr:text-[12px] msr:tabular-nums msr:text-ink-700 msr:outline-none",
               onFocus: () => {
                 setHexDraft(hexValue);
                 setHexFocused(true);
               },
               onBlur: () => setHexFocused(false),
-              onChange: (event) => {
-                const next = event.target.value.replace(/[^\da-f]/gi, "").slice(0, 6).toUpperCase();
-                setHexDraft(next);
-                updateColor(next, alphaFocused ? Number(alphaDraft) : alphaValue);
-              },
+              onChange: (event) => handleHexInput(event.currentTarget),
               onPointerDown: (event) => event.stopPropagation(),
               onClick: (event) => event.stopPropagation()
             }
@@ -1080,6 +1109,7 @@ function ColorField({ label, value, fallback, ownerWindow, onChange }) {
         right: /* @__PURE__ */ jsx18(
           "input",
           {
+            ref: alphaInputRef,
             "aria-label": `${label} opacity value`,
             type: "text",
             inputMode: "numeric",
@@ -1091,11 +1121,7 @@ function ColorField({ label, value, fallback, ownerWindow, onChange }) {
               setAlphaFocused(true);
             },
             onBlur: () => setAlphaFocused(false),
-            onChange: (event) => {
-              const next = event.target.value.replace(/\D/g, "").slice(0, 3);
-              setAlphaDraft(next);
-              updateColor(hexFocused ? hexDraft : hexValue, Number(next));
-            },
+            onChange: (event) => handleAlphaInput(event.currentTarget),
             onKeyDown: (event) => {
               if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
               event.preventDefault();
@@ -7489,16 +7515,23 @@ var MESURER_EVENT_TYPES = /* @__PURE__ */ new Set([
 ]);
 var ownsKeyboard = (view) => view.document.documentElement.hasAttribute(MESURER_KEYBOARD_ATTR);
 var isMesurerEventPath = (event) => event.composedPath().some((node) => isMesurerUiNode(node));
-var installKeyboardGate = (view = window, { isolateMesurerEvents = false } = {}) => {
+var installKeyboardGate = (view = window, {
+  isolateMesurerEvents = false,
+  isolationHostId
+} = {}) => {
   const gated = view;
   if (gated[INSTALLED]) return;
   gated[INSTALLED] = true;
+  const isIsolatedMesurerEvent = (event) => !isolationHostId || event.composedPath().some(
+    (node) => node instanceof Element && node.id === isolationHostId
+  );
   const blockPageKey = (event) => {
     if (!ownsKeyboard(view)) {
       return;
     }
     const mesurerEvent = isMesurerKeyboardEvent(event, view);
     if (mesurerEvent) {
+      if (isolateMesurerEvents && !isIsolatedMesurerEvent(event)) return;
       if (!isolateMesurerEvents || isTypingInMesurer(event, view)) {
         return;
       }
@@ -7607,7 +7640,7 @@ var installKeyboardGate = (view = window, { isolateMesurerEvents = false } = {})
       const once = typeof options !== "boolean" && Boolean(options?.once);
       const signal = typeof options !== "boolean" ? options?.signal : void 0;
       wrapped = function(event) {
-        if (ownsKeyboard(view) && isMesurerEventPath(event)) {
+        if (ownsKeyboard(view) && isMesurerEventPath(event) && isIsolatedMesurerEvent(event)) {
           if (once && !signal?.aborted) {
             nativeAddEventListener.call(this, type, wrapped, options);
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mesurer",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Inspect, annotate, and give feedback on any live interface",
   "license": "MIT",
   "author": "Julien Thibeaut",
@@ -20,10 +20,10 @@
   "files": [
     "dist",
     "dist/styles.css",
-      "CHANGELOG.md",
-      "README.md",
-      "PRIVACY.md",
-      "LICENSE"
+    "CHANGELOG.md",
+    "README.md",
+    "PRIVACY.md",
+    "LICENSE"
   ],
   "sideEffects": [
     "*.css"
@@ -39,14 +39,6 @@
   "bugs": {
     "url": "https://github.com/ibelick/mesurer/issues"
   },
-  "scripts": {
-    "generate:styles": "pnpm exec tailwindcss -i styles.css -o styles.generated.css -m && node scripts/generate-styles.mjs",
-    "build": "pnpm run generate:styles && tsup && pnpm exec tailwindcss -i styles.css -o dist/styles.css -m",
-    "dev": "node scripts/dev.mjs",
-    "pretypecheck": "pnpm run generate:styles",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "npm run typecheck && npm run build"
-  },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
@@ -64,5 +56,12 @@
   "keywords": [
     "measurement",
     "alignment"
-  ]
-}
+  ],
+  "scripts": {
+    "generate:styles": "pnpm exec tailwindcss -i styles.css -o styles.generated.css -m && node scripts/generate-styles.mjs",
+    "build": "pnpm run generate:styles && tsup && pnpm exec tailwindcss -i styles.css -o dist/styles.css -m",
+    "dev": "node scripts/dev.mjs",
+    "pretypecheck": "pnpm run generate:styles",
+    "typecheck": "tsc --noEmit"
+  }
+}