react-blueprint-view 1.0.0 → 1.0.3

package/README.md

@@ -4,7 +4,7 @@
 
 **React Blueprint View** helps you instantly visualize the DOM structure of your React application — transforming your UI into a clean blueprint-style view for design inspection and debugging.
 
-![React Blueprint View Screenshot](https://raw.githubusercontent.com/isaacprogi/route-blueprint-view/main/public/rb-screenshot.png)
+![React Blueprint View Screenshot](https://raw.githubusercontent.com/isaacprogi/react-blueprint-view/main/public/rb-screenshot.png)
 
 
 ### Installation
@@ -54,14 +54,14 @@ function CustomToggle() {
 ```
 
 
-## Ignoring Elements
+<!-- ## Ignoring Elements
 
 ```jsx
 <div data-rbv-ignore>
   This element will not be affected by the blueprint overlay.
 </div>
 
-```
+``` -->
 
  “Image and video elements are excluded, meaning their content will remain visible while the blueprint is active.”
 

package/dist/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./style.css');const e=require("react"),r=require("react-dom");var t,n={exports:{}},o={};var a,i,s={};function c(){return a||(a=1,"production"!==process.env.NODE_ENV&&function(){var r=e,t=Symbol.for("react.element"),n=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),c=Symbol.for("react.provider"),l=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),f=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),d=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),v=Symbol.for("react.offscreen"),b=Symbol.iterator;var m=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function g(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];!function(e,r,t){var n=m.ReactDebugCurrentFrame.getStackAddendum();""!==n&&(r+="%s",t=t.concat([n]));var o=t.map(function(e){return String(e)});o.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,o)}("error",e,t)}var h;function _(e){return e.displayName||"Context"}function k(e){if(null==e)return null;if("number"==typeof e.tag&&g("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case o:return"Fragment";case n:return"Portal";case i:return"Profiler";case a:return"StrictMode";case f:return"Suspense";case p:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case l:return _(e)+".Consumer";case c:return _(e._context)+".Provider";case u:return function(e,r,t){var n=e.displayName;if(n)return n;var o=r.displayName||r.name||"";return""!==o?t+"("+o+")":t}(e,e.render,"ForwardRef");case d:var r=e.displayName||null;return null!==r?r:k(e.type)||"Memo";case y:var t=e,s=t._payload,v=t._init;try{return k(v(s))}catch(b){return null}}return null}h=Symbol.for("react.module.reference");var w,S,O,j,x,E,R,P=Object.assign,T=0;function N(){}N.__reactDisabledLog=!0;var C,$=m.ReactCurrentDispatcher;function D(e,r,t){if(void 0===C)try{throw Error()}catch(o){var n=o.stack.trim().match(/\n( *(at )?)/);C=n&&n[1]||""}return"\n"+C+e}var F,L=!1,I="function"==typeof WeakMap?WeakMap:Map;function A(e,r){if(!e||L)return"";var t,n=F.get(e);if(void 0!==n)return n;L=!0;var o,a=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=$.current,$.current=null,function(){if(0===T){w=console.log,S=console.info,O=console.warn,j=console.error,x=console.group,E=console.groupCollapsed,R=console.groupEnd;var e={configurable:!0,enumerable:!0,value:N,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}T++}();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(i,[])}catch(y){t=y}Reflect.construct(e,[],i)}else{try{i.call()}catch(y){t=y}e.call(i.prototype)}}else{try{throw Error()}catch(y){t=y}e()}}catch(v){if(v&&t&&"string"==typeof v.stack){for(var s=v.stack.split("\n"),c=t.stack.split("\n"),l=s.length-1,u=c.length-1;l>=1&&u>=0&&s[l]!==c[u];)u--;for(;l>=1&&u>=0;l--,u--)if(s[l]!==c[u]){if(1!==l||1!==u)do{if(l--,--u<0||s[l]!==c[u]){var f="\n"+s[l].replace(" at new "," at ");return e.displayName&&f.includes("<anonymous>")&&(f=f.replace("<anonymous>",e.displayName)),"function"==typeof e&&F.set(e,f),f}}while(l>=1&&u>=0);break}}}finally{L=!1,$.current=o,function(){if(0===--T){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:P({},e,{value:w}),info:P({},e,{value:S}),warn:P({},e,{value:O}),error:P({},e,{value:j}),group:P({},e,{value:x}),groupCollapsed:P({},e,{value:E}),groupEnd:P({},e,{value:R})})}T<0&&g("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=a}var p=e?e.displayName||e.name:"",d=p?D(p):"";return"function"==typeof e&&F.set(e,d),d}function B(e,r,t){if(null==e)return"";if("function"==typeof e)return A(e,!(!(n=e.prototype)||!n.isReactComponent));var n;if("string"==typeof e)return D(e);switch(e){case f:return D("Suspense");case p:return D("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case u:return A(e.render,!1);case d:return B(e.type,r,t);case y:var o=e,a=o._payload,i=o._init;try{return B(i(a),r,t)}catch(s){}}return""}F=new I;var W=Object.prototype.hasOwnProperty,M={},U=m.ReactDebugCurrentFrame;function z(e){if(e){var r=e._owner,t=B(e.type,e._source,r?r.type:null);U.setExtraStackFrame(t)}else U.setExtraStackFrame(null)}var q=Array.isArray;function Y(e){return q(e)}function V(e){return""+e}function X(e){if(function(e){try{return V(e),!1}catch(r){return!0}}(e))return g("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return"function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),V(e)}var J,K,G=m.ReactCurrentOwner,H={key:!0,ref:!0,__self:!0,__source:!0};function Q(e,r,n,o,a){var i,s={},c=null,l=null;for(i in void 0!==n&&(X(n),c=""+n),function(e){if(W.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(r)&&(X(r.key),c=""+r.key),function(e){if(W.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return void 0!==e.ref}(r)&&(l=r.ref,function(e){"string"==typeof e.ref&&G.current}(r)),r)W.call(r,i)&&!H.hasOwnProperty(i)&&(s[i]=r[i]);if(e&&e.defaultProps){var u=e.defaultProps;for(i in u)void 0===s[i]&&(s[i]=u[i])}if(c||l){var f="function"==typeof e?e.displayName||e.name||"Unknown":e;c&&function(e,r){var t=function(){J||(J=!0,g("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(s,f),l&&function(e,r){var t=function(){K||(K=!0,g("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}(s,f)}return function(e,r,n,o,a,i,s){var c={$$typeof:t,type:e,key:r,ref:n,props:s,_owner:i,_store:{}};return Object.defineProperty(c._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(c,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(c,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c}(e,c,l,a,o,G.current,s)}var Z,ee=m.ReactCurrentOwner,re=m.ReactDebugCurrentFrame;function te(e){if(e){var r=e._owner,t=B(e.type,e._source,r?r.type:null);re.setExtraStackFrame(t)}else re.setExtraStackFrame(null)}function ne(e){return"object"==typeof e&&null!==e&&e.$$typeof===t}function oe(){if(ee.current){var e=k(ee.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}Z=!1;var ae={};function ie(e,r){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var t=function(e){var r=oe();if(!r){var t="string"==typeof e?e:e.displayName||e.name;t&&(r="\n\nCheck the top-level render call using <"+t+">.")}return r}(r);if(!ae[t]){ae[t]=!0;var n="";e&&e._owner&&e._owner!==ee.current&&(n=" It was passed a child from "+k(e._owner.type)+"."),te(e),g('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),te(null)}}}function se(e,r){if("object"==typeof e)if(Y(e))for(var t=0;t<e.length;t++){var n=e[t];ne(n)&&ie(n,r)}else if(ne(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var r=b&&e[b]||e["@@iterator"];return"function"==typeof r?r:null}(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)ne(a.value)&&ie(a.value,r)}}function ce(e){var r,t=e.type;if(null!=t&&"string"!=typeof t){if("function"==typeof t)r=t.propTypes;else{if("object"!=typeof t||t.$$typeof!==u&&t.$$typeof!==d)return;r=t.propTypes}if(r){var n=k(t);!function(e,r,t,n,o){var a=Function.call.bind(W);for(var i in e)if(a(e,i)){var s=void 0;try{if("function"!=typeof e[i]){var c=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw c.name="Invariant Violation",c}s=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(l){s=l}!s||s instanceof Error||(z(o),g("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof s),z(null)),s instanceof Error&&!(s.message in M)&&(M[s.message]=!0,z(o),g("Failed %s type: %s",t,s.message),z(null))}}(r,e.props,"prop",n,e)}else if(void 0!==t.PropTypes&&!Z){Z=!0,g("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",k(t)||"Unknown")}"function"!=typeof t.getDefaultProps||t.getDefaultProps.isReactClassApproved||g("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}var le={};function ue(e,r,n,s,b,m){var _=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===i||e===a||e===f||e===p||e===v||"object"==typeof e&&null!==e&&(e.$$typeof===y||e.$$typeof===d||e.$$typeof===c||e.$$typeof===l||e.$$typeof===u||e.$$typeof===h||void 0!==e.getModuleId)}(e);if(!_){var w="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(w+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var S;w+=oe(),null===e?S="null":Y(e)?S="array":void 0!==e&&e.$$typeof===t?(S="<"+(k(e.type)||"Unknown")+" />",w=" Did you accidentally export a JSX literal instead of a component?"):S=typeof e,g("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",S,w)}var O=Q(e,r,n,b,m);if(null==O)return O;if(_){var j=r.children;if(void 0!==j)if(s)if(Y(j)){for(var x=0;x<j.length;x++)se(j[x],e);Object.freeze&&Object.freeze(j)}else g("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else se(j,e)}if(W.call(r,"key")){var E=k(e),R=Object.keys(r).filter(function(e){return"key"!==e}),P=R.length>0?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}";if(!le[E+P])g('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',P,E,R.length>0?"{"+R.join(": ..., ")+": ...}":"{}",E),le[E+P]=!0}return e===o?function(e){for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if("children"!==n&&"key"!==n){te(e),g("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),te(null);break}}null!==e.ref&&(te(e),g("Invalid attribute `ref` supplied to `React.Fragment`."),te(null))}(O):ce(O),O}var fe=function(e,r,t){return ue(e,r,t,!1)},pe=function(e,r,t){return ue(e,r,t,!0)};s.Fragment=o,s.jsx=fe,s.jsxs=pe}()),s}var l=(i||(i=1,"production"===process.env.NODE_ENV?n.exports=function(){if(t)return o;t=1;var r=e,n=Symbol.for("react.element"),a=Symbol.for("react.fragment"),i=Object.prototype.hasOwnProperty,s=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,c={key:!0,ref:!0,__self:!0,__source:!0};function l(e,r,t){var o,a={},l=null,u=null;for(o in void 0!==t&&(l=""+t),void 0!==r.key&&(l=""+r.key),void 0!==r.ref&&(u=r.ref),r)i.call(r,o)&&!c.hasOwnProperty(o)&&(a[o]=r[o]);if(e&&e.defaultProps)for(o in r=e.defaultProps)void 0===a[o]&&(a[o]=r[o]);return{$$typeof:n,type:e,key:l,ref:u,props:a,_owner:s.current}}return o.Fragment=a,o.jsx=l,o.jsxs=l,o}():n.exports=c()),n.exports);function u(e){e.classList.add("rbv-enabled");e.querySelectorAll("*").forEach(e=>{if(e.closest("[data-rbv-ignore]"))return;e.classList.add("rbv-node");const r="IMG"===e.tagName||"SVG"===e.tagName,t="none"!==window.getComputedStyle(e).backgroundImage;if(r||t)return void e.classList.add("rbv-image");const n=e.tagName.toLowerCase();["button","input","select","textarea","a"].includes(n)&&e.classList.add("rbv-control");Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&""!==e.textContent?.trim())&&e.classList.add("rbv-text")})}let f=null;function p({enabled:e,toggle:r}){return l.jsx("button",{"data-rbv-ignore":!0,onClick:r,"aria-label":"Toggle Blueprint Mode",style:{position:"fixed",bottom:"16px",left:"16px",zIndex:999999,padding:"10px 12px",borderRadius:"10px",border:"1px solid rgba(59,130,246,0.6)",background:e?"rgba(59,130,246,0.9)":"rgba(59,130,246,0.15)",color:e?"#fff":"#2563eb",fontSize:"12px",fontWeight:600,cursor:"pointer",backdropFilter:"blur(6px)"},children:e?"RB ON":"RB"})}const d=e.createContext(null),y="rbv-enabled";exports.BlueprintProvider=function({children:t,showToggle:n=!0}){const[o,a]=e.useState(()=>"undefined"!=typeof window&&"true"===localStorage.getItem(y)),i=()=>a(e=>!e);return e.useEffect(()=>{var e;"undefined"!=typeof document&&(o?(document.body.classList.add("rbv-enabled"),u(document.body),f||(f=new MutationObserver(()=>{u(document.body)}),f.observe(document.body,{childList:!0,subtree:!0}))):(document.body.classList.remove("rbv-enabled"),(e=document.body).classList.remove("rbv-enabled"),e.querySelectorAll("*").forEach(e=>{e.hasAttribute("data-rbv-ignore")||e.classList.remove("rbv-node","rbv-text","rbv-image","rbv-control")}),f?.disconnect(),f=null))},[o]),e.useEffect(()=>{"undefined"!=typeof window&&localStorage.setItem(y,String(o))},[o]),l.jsxs(d.Provider,{value:{enabled:o,toggle:i},children:[t,n&&"undefined"!=typeof document&&r.createPortal(l.jsx(p,{enabled:o,toggle:i}),document.body)]})},exports.useBlueprint=function(){const r=e.useContext(d);if(!r)throw new Error("useBlueprint must be used inside BlueprintProvider");return r};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./style.css');const e=require("react"),t=require("react/jsx-runtime"),r=require("react-dom");function o(e){e.classList.add("rbv-enabled");e.querySelectorAll("*").forEach(e=>{if(e.closest("[data-rbv-ignore]"))return;e.classList.add("rbv-node");const t="IMG"===e.tagName||"SVG"===e.tagName,r="none"!==window.getComputedStyle(e).backgroundImage;if(t||r)return void e.classList.add("rbv-image");const o=e.tagName.toLowerCase();["button","input","select","textarea","a"].includes(o)&&e.classList.add("rbv-control");Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&""!==e.textContent?.trim())&&e.classList.add("rbv-text")})}let n=null;function d({enabled:e,toggle:r}){return t.jsx("button",{"data-rbv-ignore":!0,onClick:r,"aria-label":"Toggle Blueprint Mode",style:{position:"fixed",bottom:"16px",left:"16px",zIndex:999999,padding:"10px 12px",borderRadius:"10px",border:"1px solid rgba(59,130,246,0.6)",background:e?"rgba(59,130,246,0.9)":"rgba(59,130,246,0.15)",color:e?"#fff":"#2563eb",fontSize:"12px",fontWeight:600,cursor:"pointer",backdropFilter:"blur(6px)"},children:e?"Blueprint ON":"Blueprint"})}const a=e.createContext(null),i="rbv-enabled";exports.BlueprintProvider=function({children:s,showToggle:l=!0}){const[u,c]=e.useState(()=>"undefined"!=typeof window&&"true"===localStorage.getItem(i)),b=()=>c(e=>!e);return e.useEffect(()=>{var e;"undefined"!=typeof document&&(u?(document.body.classList.add("rbv-enabled"),o(document.body),n||(n=new MutationObserver(()=>{o(document.body)}),n.observe(document.body,{childList:!0,subtree:!0}))):(document.body.classList.remove("rbv-enabled"),(e=document.body).classList.remove("rbv-enabled"),e.querySelectorAll("*").forEach(e=>{e.hasAttribute("data-rbv-ignore")||e.classList.remove("rbv-node","rbv-text","rbv-image","rbv-control")}),n?.disconnect(),n=null))},[u]),e.useEffect(()=>{"undefined"!=typeof window&&localStorage.setItem(i,String(u))},[u]),t.jsxs(a.Provider,{value:{enabled:u,toggle:b},children:[s,l&&"undefined"!=typeof document&&r.createPortal(t.jsx(d,{enabled:u,toggle:b}),document.body)]})},exports.useBlueprint=function(){const t=e.useContext(a);if(!t)throw new Error("useBlueprint must be used inside BlueprintProvider");return t};

package/dist/index.es.js

@@ -1,3 +1,3 @@
-import e,{createContext as r,useState as t,useEffect as n,useContext as o}from"react";import{createPortal as a}from"react-dom";import './style.css';var i,s={exports:{}},c={};var l,u,f={};function p(){return l||(l=1,"production"!==process.env.NODE_ENV&&function(){var r=e,t=/* @__PURE__ */Symbol.for("react.element"),n=/* @__PURE__ */Symbol.for("react.portal"),o=/* @__PURE__ */Symbol.for("react.fragment"),a=/* @__PURE__ */Symbol.for("react.strict_mode"),i=/* @__PURE__ */Symbol.for("react.profiler"),s=/* @__PURE__ */Symbol.for("react.provider"),c=/* @__PURE__ */Symbol.for("react.context"),l=/* @__PURE__ */Symbol.for("react.forward_ref"),u=/* @__PURE__ */Symbol.for("react.suspense"),p=/* @__PURE__ */Symbol.for("react.suspense_list"),d=/* @__PURE__ */Symbol.for("react.memo"),y=/* @__PURE__ */Symbol.for("react.lazy"),v=/* @__PURE__ */Symbol.for("react.offscreen"),b=Symbol.iterator;var m=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function g(e){for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];!function(e,r,t){var n=m.ReactDebugCurrentFrame.getStackAddendum();""!==n&&(r+="%s",t=t.concat([n]));var o=t.map(function(e){return String(e)});o.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,o)}("error",e,t)}var h;function _(e){return e.displayName||"Context"}function k(e){if(null==e)return null;if("number"==typeof e.tag&&g("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),"function"==typeof e)return e.displayName||e.name||null;if("string"==typeof e)return e;switch(e){case o:return"Fragment";case n:return"Portal";case i:return"Profiler";case a:return"StrictMode";case u:return"Suspense";case p:return"SuspenseList"}if("object"==typeof e)switch(e.$$typeof){case c:return _(e)+".Consumer";case s:return _(e._context)+".Provider";case l:return function(e,r,t){var n=e.displayName;if(n)return n;var o=r.displayName||r.name||"";return""!==o?t+"("+o+")":t}(e,e.render,"ForwardRef");case d:var r=e.displayName||null;return null!==r?r:k(e.type)||"Memo";case y:var t=e,f=t._payload,v=t._init;try{return k(v(f))}catch(b){return null}}return null}h=/* @__PURE__ */Symbol.for("react.module.reference");var w,S,O,j,R,E,x,T=Object.assign,P=0;function N(){}N.__reactDisabledLog=!0;var $,C=m.ReactCurrentDispatcher;function D(e,r,t){if(void 0===$)try{throw Error()}catch(o){var n=o.stack.trim().match(/\n( *(at )?)/);$=n&&n[1]||""}return"\n"+$+e}var F,L=!1,I="function"==typeof WeakMap?WeakMap:Map;function A(e,r){if(!e||L)return"";var t,n=F.get(e);if(void 0!==n)return n;L=!0;var o,a=Error.prepareStackTrace;Error.prepareStackTrace=void 0,o=C.current,C.current=null,function(){if(0===P){w=console.log,S=console.info,O=console.warn,j=console.error,R=console.group,E=console.groupCollapsed,x=console.groupEnd;var e={configurable:!0,enumerable:!0,value:N,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}P++}();try{if(r){var i=function(){throw Error()};if(Object.defineProperty(i.prototype,"props",{set:function(){throw Error()}}),"object"==typeof Reflect&&Reflect.construct){try{Reflect.construct(i,[])}catch(y){t=y}Reflect.construct(e,[],i)}else{try{i.call()}catch(y){t=y}e.call(i.prototype)}}else{try{throw Error()}catch(y){t=y}e()}}catch(v){if(v&&t&&"string"==typeof v.stack){for(var s=v.stack.split("\n"),c=t.stack.split("\n"),l=s.length-1,u=c.length-1;l>=1&&u>=0&&s[l]!==c[u];)u--;for(;l>=1&&u>=0;l--,u--)if(s[l]!==c[u]){if(1!==l||1!==u)do{if(l--,--u<0||s[l]!==c[u]){var f="\n"+s[l].replace(" at new "," at ");return e.displayName&&f.includes("<anonymous>")&&(f=f.replace("<anonymous>",e.displayName)),"function"==typeof e&&F.set(e,f),f}}while(l>=1&&u>=0);break}}}finally{L=!1,C.current=o,function(){if(0===--P){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:T({},e,{value:w}),info:T({},e,{value:S}),warn:T({},e,{value:O}),error:T({},e,{value:j}),group:T({},e,{value:R}),groupCollapsed:T({},e,{value:E}),groupEnd:T({},e,{value:x})})}P<0&&g("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}(),Error.prepareStackTrace=a}var p=e?e.displayName||e.name:"",d=p?D(p):"";return"function"==typeof e&&F.set(e,d),d}function W(e,r,t){if(null==e)return"";if("function"==typeof e)return A(e,!(!(n=e.prototype)||!n.isReactComponent));var n;if("string"==typeof e)return D(e);switch(e){case u:return D("Suspense");case p:return D("SuspenseList")}if("object"==typeof e)switch(e.$$typeof){case l:return A(e.render,!1);case d:return W(e.type,r,t);case y:var o=e,a=o._payload,i=o._init;try{return W(i(a),r,t)}catch(s){}}return""}F=new I;var U=Object.prototype.hasOwnProperty,z={},B=m.ReactDebugCurrentFrame;function M(e){if(e){var r=e._owner,t=W(e.type,e._source,r?r.type:null);B.setExtraStackFrame(t)}else B.setExtraStackFrame(null)}var Y=Array.isArray;function V(e){return Y(e)}function q(e){return""+e}function X(e){if(function(e){try{return q(e),!1}catch(r){return!0}}(e))return g("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",function(e){return"function"==typeof Symbol&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object"}(e)),q(e)}var J,K,G=m.ReactCurrentOwner,H={key:!0,ref:!0,__self:!0,__source:!0};function Q(e,r,n,o,a){var i,s={},c=null,l=null;for(i in void 0!==n&&(X(n),c=""+n),function(e){if(U.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return void 0!==e.key}(r)&&(X(r.key),c=""+r.key),function(e){if(U.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return void 0!==e.ref}(r)&&(l=r.ref,function(e){"string"==typeof e.ref&&G.current}(r)),r)U.call(r,i)&&!H.hasOwnProperty(i)&&(s[i]=r[i]);if(e&&e.defaultProps){var u=e.defaultProps;for(i in u)void 0===s[i]&&(s[i]=u[i])}if(c||l){var f="function"==typeof e?e.displayName||e.name||"Unknown":e;c&&function(e,r){var t=function(){J||(J=!0,g("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}(s,f),l&&function(e,r){var t=function(){K||(K=!0,g("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}(s,f)}return function(e,r,n,o,a,i,s){var c={$$typeof:t,type:e,key:r,ref:n,props:s,_owner:i,_store:{}};return Object.defineProperty(c._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(c,"_self",{configurable:!1,enumerable:!1,writable:!1,value:o}),Object.defineProperty(c,"_source",{configurable:!1,enumerable:!1,writable:!1,value:a}),Object.freeze&&(Object.freeze(c.props),Object.freeze(c)),c}(e,c,l,a,o,G.current,s)}var Z,ee=m.ReactCurrentOwner,re=m.ReactDebugCurrentFrame;function te(e){if(e){var r=e._owner,t=W(e.type,e._source,r?r.type:null);re.setExtraStackFrame(t)}else re.setExtraStackFrame(null)}function ne(e){return"object"==typeof e&&null!==e&&e.$$typeof===t}function oe(){if(ee.current){var e=k(ee.current.type);if(e)return"\n\nCheck the render method of `"+e+"`."}return""}Z=!1;var ae={};function ie(e,r){if(e._store&&!e._store.validated&&null==e.key){e._store.validated=!0;var t=function(e){var r=oe();if(!r){var t="string"==typeof e?e:e.displayName||e.name;t&&(r="\n\nCheck the top-level render call using <"+t+">.")}return r}(r);if(!ae[t]){ae[t]=!0;var n="";e&&e._owner&&e._owner!==ee.current&&(n=" It was passed a child from "+k(e._owner.type)+"."),te(e),g('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),te(null)}}}function se(e,r){if("object"==typeof e)if(V(e))for(var t=0;t<e.length;t++){var n=e[t];ne(n)&&ie(n,r)}else if(ne(e))e._store&&(e._store.validated=!0);else if(e){var o=function(e){if(null===e||"object"!=typeof e)return null;var r=b&&e[b]||e["@@iterator"];return"function"==typeof r?r:null}(e);if("function"==typeof o&&o!==e.entries)for(var a,i=o.call(e);!(a=i.next()).done;)ne(a.value)&&ie(a.value,r)}}function ce(e){var r,t=e.type;if(null!=t&&"string"!=typeof t){if("function"==typeof t)r=t.propTypes;else{if("object"!=typeof t||t.$$typeof!==l&&t.$$typeof!==d)return;r=t.propTypes}if(r){var n=k(t);!function(e,r,t,n,o){var a=Function.call.bind(U);for(var i in e)if(a(e,i)){var s=void 0;try{if("function"!=typeof e[i]){var c=Error((n||"React class")+": "+t+" type `"+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[i]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw c.name="Invariant Violation",c}s=e[i](r,i,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(l){s=l}!s||s instanceof Error||(M(o),g("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",n||"React class",t,i,typeof s),M(null)),s instanceof Error&&!(s.message in z)&&(z[s.message]=!0,M(o),g("Failed %s type: %s",t,s.message),M(null))}}(r,e.props,"prop",n,e)}else if(void 0!==t.PropTypes&&!Z){Z=!0,g("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",k(t)||"Unknown")}"function"!=typeof t.getDefaultProps||t.getDefaultProps.isReactClassApproved||g("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}var le={};function ue(e,r,n,f,b,m){var _=function(e){return"string"==typeof e||"function"==typeof e||e===o||e===i||e===a||e===u||e===p||e===v||"object"==typeof e&&null!==e&&(e.$$typeof===y||e.$$typeof===d||e.$$typeof===s||e.$$typeof===c||e.$$typeof===l||e.$$typeof===h||void 0!==e.getModuleId)}(e);if(!_){var w="";(void 0===e||"object"==typeof e&&null!==e&&0===Object.keys(e).length)&&(w+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var S;w+=oe(),null===e?S="null":V(e)?S="array":void 0!==e&&e.$$typeof===t?(S="<"+(k(e.type)||"Unknown")+" />",w=" Did you accidentally export a JSX literal instead of a component?"):S=typeof e,g("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",S,w)}var O=Q(e,r,n,b,m);if(null==O)return O;if(_){var j=r.children;if(void 0!==j)if(f)if(V(j)){for(var R=0;R<j.length;R++)se(j[R],e);Object.freeze&&Object.freeze(j)}else g("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else se(j,e)}if(U.call(r,"key")){var E=k(e),x=Object.keys(r).filter(function(e){return"key"!==e}),T=x.length>0?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}";if(!le[E+T])g('A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',T,E,x.length>0?"{"+x.join(": ..., ")+": ...}":"{}",E),le[E+T]=!0}return e===o?function(e){for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if("children"!==n&&"key"!==n){te(e),g("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),te(null);break}}null!==e.ref&&(te(e),g("Invalid attribute `ref` supplied to `React.Fragment`."),te(null))}(O):ce(O),O}var fe=function(e,r,t){return ue(e,r,t,!1)},pe=function(e,r,t){return ue(e,r,t,!0)};f.Fragment=o,f.jsx=fe,f.jsxs=pe}()),f}var d=(u||(u=1,"production"===process.env.NODE_ENV?s.exports=function(){if(i)return c;i=1;var r=e,t=/* @__PURE__ */Symbol.for("react.element"),n=/* @__PURE__ */Symbol.for("react.fragment"),o=Object.prototype.hasOwnProperty,a=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,s={key:!0,ref:!0,__self:!0,__source:!0};function l(e,r,n){var i,c={},l=null,u=null;for(i in void 0!==n&&(l=""+n),void 0!==r.key&&(l=""+r.key),void 0!==r.ref&&(u=r.ref),r)o.call(r,i)&&!s.hasOwnProperty(i)&&(c[i]=r[i]);if(e&&e.defaultProps)for(i in r=e.defaultProps)void 0===c[i]&&(c[i]=r[i]);return{$$typeof:t,type:e,key:l,ref:u,props:c,_owner:a.current}}return c.Fragment=n,c.jsx=l,c.jsxs=l,c}():s.exports=p()),s.exports);function y(e){e.classList.add("rbv-enabled");e.querySelectorAll("*").forEach(e=>{if(e.closest("[data-rbv-ignore]"))return;e.classList.add("rbv-node");const r="IMG"===e.tagName||"SVG"===e.tagName,t="none"!==window.getComputedStyle(e).backgroundImage;if(r||t)return void e.classList.add("rbv-image");const n=e.tagName.toLowerCase();["button","input","select","textarea","a"].includes(n)&&e.classList.add("rbv-control");Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&""!==e.textContent?.trim())&&e.classList.add("rbv-text")})}let v=null;function b({enabled:e,toggle:r}){/* @__PURE__ */
-return d.jsx("button",{"data-rbv-ignore":!0,onClick:r,"aria-label":"Toggle Blueprint Mode",style:{position:"fixed",bottom:"16px",left:"16px",zIndex:999999,padding:"10px 12px",borderRadius:"10px",border:"1px solid rgba(59,130,246,0.6)",background:e?"rgba(59,130,246,0.9)":"rgba(59,130,246,0.15)",color:e?"#fff":"#2563eb",fontSize:"12px",fontWeight:600,cursor:"pointer",backdropFilter:"blur(6px)"},children:e?"RB ON":"RB"})}const m=r(null),g="rbv-enabled";function h({children:e,showToggle:r=!0}){const[o,i]=t(()=>"undefined"!=typeof window&&"true"===localStorage.getItem(g)),s=()=>i(e=>!e);return n(()=>{var e;"undefined"!=typeof document&&(o?(document.body.classList.add("rbv-enabled"),y(document.body),v||(v=new MutationObserver(()=>{y(document.body)}),v.observe(document.body,{childList:!0,subtree:!0}))):(document.body.classList.remove("rbv-enabled"),(e=document.body).classList.remove("rbv-enabled"),e.querySelectorAll("*").forEach(e=>{e.hasAttribute("data-rbv-ignore")||e.classList.remove("rbv-node","rbv-text","rbv-image","rbv-control")}),v?.disconnect(),v=null))},[o]),n(()=>{"undefined"!=typeof window&&localStorage.setItem(g,String(o))},[o]),/* @__PURE__ */d.jsxs(m.Provider,{value:{enabled:o,toggle:s},children:[e,r&&"undefined"!=typeof document&&a(
-/* @__PURE__ */d.jsx(b,{enabled:o,toggle:s}),document.body)]})}function _(){const e=o(m);if(!e)throw new Error("useBlueprint must be used inside BlueprintProvider");return e}export{h as BlueprintProvider,_ as useBlueprint};
+import{createContext as e,useState as t,useEffect as o,useContext as r}from"react";import{jsx as n,jsxs as d}from"react/jsx-runtime";import{createPortal as a}from"react-dom";import './style.css';function i(e){e.classList.add("rbv-enabled");e.querySelectorAll("*").forEach(e=>{if(e.closest("[data-rbv-ignore]"))return;e.classList.add("rbv-node");const t="IMG"===e.tagName||"SVG"===e.tagName,o="none"!==window.getComputedStyle(e).backgroundImage;if(t||o)return void e.classList.add("rbv-image");const r=e.tagName.toLowerCase();["button","input","select","textarea","a"].includes(r)&&e.classList.add("rbv-control");Array.from(e.childNodes).some(e=>e.nodeType===Node.TEXT_NODE&&""!==e.textContent?.trim())&&e.classList.add("rbv-text")})}let l=null;function s({enabled:e,toggle:t}){/* @__PURE__ */
+return n("button",{"data-rbv-ignore":!0,onClick:t,"aria-label":"Toggle Blueprint Mode",style:{position:"fixed",bottom:"16px",left:"16px",zIndex:999999,padding:"10px 12px",borderRadius:"10px",border:"1px solid rgba(59,130,246,0.6)",background:e?"rgba(59,130,246,0.9)":"rgba(59,130,246,0.15)",color:e?"#fff":"#2563eb",fontSize:"12px",fontWeight:600,cursor:"pointer",backdropFilter:"blur(6px)"},children:e?"Blueprint ON":"Blueprint"})}const c=e(null),u="rbv-enabled";function b({children:e,showToggle:r=!0}){const[b,m]=t(()=>"undefined"!=typeof window&&"true"===localStorage.getItem(u)),g=()=>m(e=>!e);return o(()=>{var e;"undefined"!=typeof document&&(b?(document.body.classList.add("rbv-enabled"),i(document.body),l||(l=new MutationObserver(()=>{i(document.body)}),l.observe(document.body,{childList:!0,subtree:!0}))):(document.body.classList.remove("rbv-enabled"),(e=document.body).classList.remove("rbv-enabled"),e.querySelectorAll("*").forEach(e=>{e.hasAttribute("data-rbv-ignore")||e.classList.remove("rbv-node","rbv-text","rbv-image","rbv-control")}),l?.disconnect(),l=null))},[b]),o(()=>{"undefined"!=typeof window&&localStorage.setItem(u,String(b))},[b]),/* @__PURE__ */d(c.Provider,{value:{enabled:b,toggle:g},children:[e,r&&"undefined"!=typeof document&&a(
+/* @__PURE__ */n(s,{enabled:b,toggle:g}),document.body)]})}function m(){const e=r(c);if(!e)throw new Error("useBlueprint must be used inside BlueprintProvider");return e}export{b as BlueprintProvider,m as useBlueprint};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-blueprint-view",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "A lightweight visual wireframe/blueprint view for React apps.",
   "author": "Isaac Anasonye",
   "license": "MIT",
@@ -57,7 +57,6 @@
     "@eslint/js": "^9.39.1",
     "@types/node": "^24.10.4",
     "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^5.1.1",
     "ajv": "^8.17.1",
     "ajv-formats": "^2.1.1",
@@ -69,7 +68,8 @@
     "postcss": "^8.5.6",
     "postcss-prefix-selector": "^2.1.1",
     "postcss-prefixwrap": "^1.57.2",
-    "react": "^18.2.0",    "react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^5.5.0",
     "terser": "^5.44.1",
     "typescript": "~5.9.3",