react-blueprint-view 1.0.0

package/README.md

@@ -0,0 +1,106 @@
+# React Blueprint View
+
+> _A lightweight visual wireframe/blueprint view for React apps._
+
+**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)
+
+
+### Installation
+
+```bash
+
+npm install react-blueprint-view
+
+
+
+yarn add react-blueprint-view
+
+
+pnpm add react-blueprint-view
+
+```
+
+## Usage
+
+
+```tsx
+import { BlueprintProvider } from "react-blueprint-view";
+
+export default function App() {
+  return (
+    <BlueprintProvider showToggle={true}>
+      <YourApp />
+    </BlueprintProvider>
+  );
+}
+```
+
+Toggle Button is visible by default.
+You can hide or show it using the **showToggle** prop.
+
+You can also control the toggle using the **useBlueprint** hook:
+
+
+```tsx
+import { BlueprintProvider, useBlueprint } from "react-blueprint-view";
+
+function CustomToggle() {
+  const { enabled, toggle } = useBlueprint();
+  return <button onClick={toggle}>{enabled ? "ON" : "OFF"}</button>;
+}
+
+```
+
+
+## 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.”
+
+
+## Contributing
+
+Found a bug or want to add a feature? Contributions are welcome!
+
+1. 🍴 Fork it
+2. 🌟 Star it (pretty please?)
+3. 🔧 Fix it
+4. 📤 PR it
+5. 🎉 Celebrate!
+
+Please ensure your code follows the existing style and includes clear commit messages.
+
+---
+
+## License
+
+This project is licensed under the **MIT License** – see the [LICENSE](LICENSE) file for details.
+
+---
+
+## Credits
+
+“Built by Isaac Anasonye to analyze layouts and simplify debugging of messy designs.”
+
+RouteKeeper – Protecting your routes since 2025!
+
+---
+
+<div align="center">
+
+**Debugged a layout with React Blueprint?**
+
+[⭐ Star on GitHub](https://github.com/Isaacprogi/react-blueprint-view) |
+[📢 Share on Twitter](https://twitter.com/intent/tweet?text=Check%20out%20ReactBlueprintView!) |
+[💬 Join the Discussion](https://github.com/Isaacprogi/react-blueprint-view/discussions) |
+[🔗 Connect on LinkedIn](https://www.linkedin.com/in/isaacanasonye)
+
+</div>

package/dist/index.cjs.js

@@ -0,0 +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};

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+
+declare type BlueprintContextType = {
+    enabled: boolean;
+    toggle: () => void;
+};
+
+export declare function BlueprintProvider({ children, showToggle, }: ProviderProps): JSX_2.Element;
+
+declare type ProviderProps = {
+    children: React.ReactNode;
+    showToggle?: boolean;
+};
+
+export declare function useBlueprint(): BlueprintContextType;
+
+export { }

package/dist/index.es.js

@@ -0,0 +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};

package/dist/style.css

@@ -0,0 +1 @@
+:root{--bp-bg: #05162e;--bp-grid: rgba(59, 130, 246, .2);--bp-accent: #3b82f6;--bp-node-bg: rgba(5, 38, 90, .5);--bp-text-line: rgba(59, 130, 246, .7);--bp-control-bg: rgba(59, 130, 246, .2)}.rbv-enabled{background-color:var(--bp-bg)!important;background-image:linear-gradient(var(--bp-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bp-grid) 1px,transparent 1px)!important;background-size:25px 25px!important;transition:background .3s ease}.rbv-enabled *:not([data-rbv-ignore]):not([data-rbv-ignore] *){color:transparent!important;-webkit-text-fill-color:transparent!important;text-shadow:none!important;background-image:none!important;box-shadow:none!important;border-color:transparent!important}.rbv-node{position:relative!important;outline:1px solid var(--bp-accent)!important;background-color:var(--bp-node-bg)!important;box-sizing:border-box!important;overflow:hidden!important}.rbv-text{position:relative!important}.rbv-text:after{content:"";position:absolute;top:50%;left:10%;right:10%;height:10px;transform:translateY(-50%);background:linear-gradient(to bottom,var(--bp-text-line) 0%,var(--bp-text-line) 3px,transparent 3px,transparent 100%),linear-gradient(to bottom,var(--bp-text-line) 0%,var(--bp-text-line) 3px,transparent 3px,transparent 100%);background-position:center top,center bottom;background-size:100% 2px,100% 2px;background-repeat:no-repeat;pointer-events:none;z-index:1}.rbv-image{position:relative!important;background-color:#3b82f61a!important}.rbv-image:before{content:"";position:absolute;inset:0;background:linear-gradient(to top left,transparent calc(50% - 1px),var(--bp-accent),transparent calc(50% + 1px)),linear-gradient(to top right,transparent calc(50% - 1px),var(--bp-accent),transparent calc(50% + 1px));pointer-events:none;z-index:1}.rbv-control{-webkit-appearance:none!important;appearance:none!important}.rbv-control[type=checkbox]{background:#3b82f633!important;border:2px solid var(--bp-accent)!important}.rbv-control[type=checkbox]:checked{background:var(--bp-accent)!important}.rbv-control[type=radio]{background:#3b82f633!important;border:2px solid var(--bp-accent)!important}.rbv-control[type=radio]:checked{background:var(--bp-accent)!important}.rbv-control[type=range]{height:12px!important;border-radius:999px!important;background:#3b82f633!important;border:2px solid var(--bp-accent)!important}.rbv-control[type=range]::-webkit-slider-thumb{-webkit-appearance:none!important;appearance:none!important;width:18px;height:18px;border-radius:999px;background:var(--bp-accent)}.rbv-control select,.rbv-control[type=select]{background:#3b82f633!important;border:2px solid var(--bp-accent)!important}.rbv-control[type=file]{position:relative!important;width:100%!important;height:44px!important;background:#3b82f626!important;border:2px solid var(--bp-accent)!important;color:transparent!important;overflow:hidden!important}.rbv-control[type=file]::-webkit-file-upload-button{visibility:hidden!important}.rbv-control[type=file]:after{content:"Browse";position:absolute;right:0;top:0;height:100%;width:30%;background:#3b82f640;border-left:2px solid var(--bp-accent);display:flex;align-items:center;justify-content:center;color:var(--bp-accent);font-weight:600;pointer-events:none}.rbv-icon{background-color:var(--bp-accent)!important;opacity:.4}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "react-blueprint-view",
+  "version": "1.0.0",
+  "description": "A lightweight visual wireframe/blueprint view for React apps.",
+  "author": "Isaac Anasonye",
+  "license": "MIT",
+  "homepage": "https://github.com/Isaacprogi/react-blueprint-view#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Isaacprogi/react-blueprint-view.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Isaacprogi/react-blueprint-view/issues"
+  },
+  "keywords": [
+    "react",
+    "visualizer",
+    "visualization",
+    "debugger",
+    "visual-debugger",
+    "devtools",
+    "developer-tools",
+    "inspector",
+    "debugging",
+    "architecture",
+    "developer-experience",
+    "dx",
+    "react-devtools",
+    "react-tooling"
+  ],
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./style.css": {
+      "default": "./dist/style.css"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "prepublishOnly": "vite build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@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",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "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-icons": "^5.5.0",
+    "terser": "^5.44.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
+  },
+  "engines": {
+    "node": ">=17"
+  }
+}