@vahy_the/vue-dev-debug 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,144 @@
+# vue-dev-debug 🔍
+
+Beautiful JSON debug viewer component for Vue 3. Automatically hidden in production builds.
+
+![Demo](https://via.placeholder.com/800x400/1a1a2e/f472b6?text=Vue+Dev+Debug)
+
+## Features
+
+- 🎨 Beautiful cyberpunk-inspired dark theme
+- 🌳 Collapsible JSON tree view
+- 🔍 Expand/Collapse all nodes
+- 📋 Copy JSON to clipboard
+- ↗️ Open in new window
+- 🪟 Floating/draggable mode
+- ⛶ Fullscreen mode
+- 🚀 Auto-hidden in production (no runtime overhead)
+- 📦 Zero dependencies (only Vue 3)
+
+## Installation
+
+```bash
+npm install vue-dev-debug
+```
+
+## Usage
+
+### Option 1: Global Plugin (Recommended)
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import VueDevDebug from 'vue-dev-debug'
+import 'vue-dev-debug/style.css'
+
+const app = createApp(App)
+app.use(VueDevDebug)
+app.mount('#app')
+```
+
+Then use it anywhere in your templates:
+
+```vue
+<template>
+  <DevDebug :data="myObject" />
+</template>
+```
+
+### Option 2: Local Import
+
+```vue
+<script setup lang="ts">
+import { DevDebug } from 'vue-dev-debug'
+import 'vue-dev-debug/style.css'
+
+const user = {
+  name: 'John Doe',
+  email: 'john@example.com',
+  roles: ['admin', 'user'],
+}
+</script>
+
+<template>
+  <DevDebug :data="user" title="User Data" />
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `unknown` | **required** | Data to display in the debug viewer |
+| `title` | `string` | `'Debug'` | Title for the debug panel |
+| `maxHeight` | `string` | `'300px'` | Maximum height of content area |
+| `collapsed` | `boolean` | `false` | Start in collapsed state |
+| `draggable` | `boolean` | `false` | Enable floating/draggable mode |
+| `forceShow` | `boolean` | `false` | Force show in production (use with caution!) |
+
+## Auto Title Extraction
+
+If you pass an object with a single key and no title, the key name becomes the title:
+
+```vue
+<!-- Title will be "userData" -->
+<DevDebug :data="{ userData: user }" />
+
+<!-- Same as -->
+<DevDebug :data="user" title="userData" />
+```
+
+## Plugin Options
+
+```ts
+app.use(VueDevDebug, {
+  // Force show in production (not recommended)
+  forceShow: false,
+  
+  // Custom component name
+  componentName: 'Debug'
+})
+```
+
+## Styling
+
+The component uses scoped CSS with a cyberpunk-inspired theme:
+
+- 💜 Purple keys
+- 💚 Green strings  
+- 💛 Yellow numbers
+- 💗 Pink booleans
+- ❌ Red nulls
+- 🩵 Cyan values
+
+All styles are isolated and won't affect your app.
+
+## Development Only
+
+By default, `DevDebug` renders nothing in production builds. This is detected via `import.meta.env.DEV` (Vite).
+
+To force rendering in production (for debugging purposes), use the `forceShow` prop:
+
+```vue
+<DevDebug :data="data" force-show />
+```
+
+Or globally via plugin options:
+
+```ts
+app.use(VueDevDebug, { forceShow: true })
+```
+
+## Keyboard Shortcuts (when in fullscreen)
+
+- `Escape` - Exit fullscreen
+
+## Browser Support
+
+- Chrome / Edge (latest)
+- Firefox (latest)
+- Safari (latest)
+
+## License
+
+MIT
+

package/dist/index.cjs

@@ -0,0 +1,77 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),W={key:0,class:"json-line"},Y={class:"json-key"},q={key:1,class:"json-comma"},X={key:1,class:"json-line json-expandable"},U={class:"json-key"},G={class:"json-bracket"},K={class:"json-bracket"},Q={key:1,class:"json-comma"},R={key:2,class:"json-node"},Z={class:"json-line json-expandable"},ee={class:"json-key"},te={class:"json-bracket"},ne={class:"json-children"},oe={class:"json-line"},ae={class:"json-bracket"},le={key:0,class:"json-comma"},se=e.defineComponent({__name:"DevDebugJsonNode",props:{data:{},keyName:{default:""},root:{type:Boolean,default:!1},isLast:{type:Boolean,default:!0}},setup(o){const a=o,s=e.ref(!0),y=e.inject("expandAll",{value:0}),j=e.inject("collapseAll",{value:0});e.watch(()=>y.value,()=>{s.value=!0}),e.watch(()=>j.value,()=>{s.value=!1});const t=e.computed(()=>a.data===null?"null":Array.isArray(a.data)?"array":typeof a.data),x=e.computed(()=>t.value==="object"||t.value==="array"),E=e.computed(()=>t.value==="array"?a.data.length:t.value==="object"?Object.keys(a.data).length:0),p=e.computed(()=>t.value==="array"?a.data.map((i,l)=>({key:String(l),value:i})):t.value==="object"?Object.entries(a.data).map(([i,l])=>({key:i,value:l})):[]),r=e.computed(()=>t.value==="array"?"[":"{"),m=e.computed(()=>t.value==="array"?"]":"}"),c=e.computed(()=>t.value==="array"?`[ ${E.value} items ]`:`{ ${E.value} keys }`),v=e.computed(()=>t.value==="string"?`"${a.data}"`:t.value==="null"?"null":String(a.data)),h=e.computed(()=>{const i="json-value";switch(t.value){case"string":return`${i} json-string`;case"number":return`${i} json-number`;case"boolean":return`${i} json-boolean`;case"null":return`${i} json-null`;default:return i}}),k=()=>{x.value&&(s.value=!s.value)};return(i,l)=>{const b=e.resolveComponent("DevDebugJsonNode",!0);return x.value?s.value?(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("div",Z,[e.createElementVNode("span",{class:"json-toggle json-toggle--expanded",onClick:k},"▼"),o.keyName?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("span",ee,'"'+e.toDisplayString(o.keyName)+'"',1),l[2]||(l[2]=e.createElementVNode("span",{class:"json-colon"},": ",-1))],64)):e.createCommentVNode("",!0),e.createElementVNode("span",te,e.toDisplayString(r.value),1)]),e.createElementVNode("div",ne,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,(_,N)=>(e.openBlock(),e.createBlock(b,{key:_.key,data:_.value,"key-name":t.value==="array"?"":_.key,"is-last":N===p.value.length-1},null,8,["data","key-name","is-last"]))),128))]),e.createElementVNode("div",oe,[e.createElementVNode("span",ae,e.toDisplayString(m.value),1),o.isLast?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",le,","))])])):(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("span",{class:"json-toggle",onClick:k},"▶"),o.keyName?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("span",U,'"'+e.toDisplayString(o.keyName)+'"',1),l[1]||(l[1]=e.createElementVNode("span",{class:"json-colon"},": ",-1))],64)):e.createCommentVNode("",!0),e.createElementVNode("span",G,e.toDisplayString(r.value),1),e.createElementVNode("span",{class:"json-preview",onClick:k},e.toDisplayString(c.value),1),e.createElementVNode("span",K,e.toDisplayString(m.value),1),o.isLast?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",Q,","))])):(e.openBlock(),e.createElementBlock("div",W,[o.keyName?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("span",Y,'"'+e.toDisplayString(o.keyName)+'"',1),l[0]||(l[0]=e.createElementVNode("span",{class:"json-colon"},": ",-1))],64)):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(h.value)},e.toDisplayString(v.value),3),o.isLast?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",q,","))]))}}}),S=(o,a)=>{const s=o.__vccOpts||o;for(const[y,j]of a)s[y]=j;return s},B=S(se,[["__scopeId","data-v-2d2f26de"]]),re={class:"dev-debug__title"},ce={class:"dev-debug__actions"},ie=["title"],de={class:"json-tree"},ue=`
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    color: #a5f3fc;
+    padding: 20px;
+    min-height: 100vh;
+  }
+  h1 {
+    color: #f472b6;
+    margin-bottom: 16px;
+    font-size: 16px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  .json-tree {
+    line-height: 1.6;
+    font-size: 13px;
+  }
+  .json-line { white-space: nowrap; }
+  .json-toggle {
+    display: inline-block;
+    width: 16px;
+    color: #64748b;
+    cursor: pointer;
+    user-select: none;
+    font-size: 10px;
+  }
+  .json-toggle:hover { color: #f472b6; }
+  .json-toggle--expanded { color: #a5f3fc; }
+  .json-children {
+    padding-left: 20px;
+    border-left: 1px solid #3b3b5c;
+    margin-left: 7px;
+  }
+  .json-key { color: #c084fc; font-weight: 500; }
+  .json-colon { color: #64748b; margin-right: 4px; }
+  .json-comma { color: #64748b; }
+  .json-bracket { color: #64748b; }
+  .json-value { color: #a5f3fc; }
+  .json-string { color: #6ee7b7; }
+  .json-number { color: #fbbf24; }
+  .json-boolean { color: #f472b6; font-weight: 600; }
+  .json-null { color: #f87171; font-style: italic; }
+  .json-preview {
+    color: #64748b;
+    font-style: italic;
+    margin: 0 4px;
+    cursor: pointer;
+  }
+  .json-preview:hover { color: #a5f3fc; }
+`,ve=e.defineComponent({__name:"DevDebug",props:{data:{},title:{default:""},maxHeight:{default:"300px"},collapsed:{type:Boolean,default:!1},draggable:{type:Boolean,default:!1},forceShow:{type:Boolean,default:!1}},setup(o){const a=e.reactive({value:0}),s=e.reactive({value:0});e.provide("expandAll",a),e.provide("collapseAll",s);const y=()=>{a.value++},j=()=>{s.value++},t=o,x=e.inject("devDebugForceShow",{value:!1}),E=e.computed(()=>!!(t.forceShow||x.value)),p=e.ref(t.collapsed),r=e.ref(!1),m=e.ref(!1),c=e.ref(t.draggable),v=e.ref({x:20,y:20}),h=e.ref({x:0,y:0}),k=e.ref(null),i=e.ref(null),l=e.computed(()=>t.title?t.title:t.data&&typeof t.data=="object"&&!Array.isArray(t.data)&&Object.keys(t.data).length===1?Object.keys(t.data)[0]:"Debug"),b=e.computed(()=>t.data&&typeof t.data=="object"&&!Array.isArray(t.data)&&Object.keys(t.data).length===1&&!t.title?Object.values(t.data)[0]:t.data),_=e.computed(()=>{try{return JSON.stringify(b.value,null,2)}catch{return String(b.value)}}),N=()=>{p.value=!p.value},F=()=>{r.value=!r.value},O=()=>{c.value=!c.value,c.value&&(v.value={x:20,y:20})},z=n=>{!c.value||r.value||(m.value=!0,h.value={x:n.clientX-v.value.x,y:n.clientY-v.value.y},n.preventDefault())},V=n=>{m.value&&(v.value={x:Math.max(0,Math.min(window.innerWidth-300,n.clientX-h.value.x)),y:Math.max(0,Math.min(window.innerHeight-100,n.clientY-h.value.y))})},C=()=>{m.value=!1};e.onMounted(()=>{document.addEventListener("mousemove",V),document.addEventListener("mouseup",C)}),e.onUnmounted(()=>{document.removeEventListener("mousemove",V),document.removeEventListener("mouseup",C)});const w=(n,g="",T=!0)=>{const d=T?"":'<span class="json-comma">,</span>',u=g?`<span class="json-key">"${g}"</span><span class="json-colon">: </span>`:"";if(n===null)return`<div class="json-line">${u}<span class="json-value json-null">null</span>${d}</div>`;if(Array.isArray(n)){if(n.length===0)return`<div class="json-line">${u}<span class="json-bracket">[]</span>${d}</div>`;const f=n.map((D,$)=>w(D,"",$===n.length-1)).join("");return`
+      <div class="json-node">
+        <div class="json-line">${u}<span class="json-bracket">[</span></div>
+        <div class="json-children">${f}</div>
+        <div class="json-line"><span class="json-bracket">]</span>${d}</div>
+      </div>
+    `}if(typeof n=="object"){const f=Object.entries(n);if(f.length===0)return`<div class="json-line">${u}<span class="json-bracket">{}</span>${d}</div>`;const D=f.map(([$,I],P)=>w(I,$,P===f.length-1)).join("");return`
+      <div class="json-node">
+        <div class="json-line">${u}<span class="json-bracket">{</span></div>
+        <div class="json-children">${D}</div>
+        <div class="json-line"><span class="json-bracket">}</span>${d}</div>
+      </div>
+    `}if(typeof n=="string"){const f=n.replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");return`<div class="json-line">${u}<span class="json-value json-string">"${f}"</span>${d}</div>`}return typeof n=="number"?`<div class="json-line">${u}<span class="json-value json-number">${n}</span>${d}</div>`:typeof n=="boolean"?`<div class="json-line">${u}<span class="json-value json-boolean">${n}</span>${d}</div>`:`<div class="json-line">${u}<span class="json-value">${String(n)}</span>${d}</div>`},L=()=>{const n=window.open("","_blank","width=800,height=600");if(n){const g=w(b.value);n.document.write(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>${l.value}</title>
+          <style>${ue}</style>
+        </head>
+        <body>
+          <h1>🔍 ${l.value}</h1>
+          <div class="json-tree">${g}</div>
+        </body>
+      </html>
+    `),n.document.close()}},J=async()=>{try{await navigator.clipboard.writeText(_.value)}catch{console.error("Failed to copy to clipboard")}},H=e.computed(()=>!c.value||r.value?{}:{position:"fixed",left:`${v.value.x}px`,top:`${v.value.y}px`,zIndex:99998,width:"400px",height:"300px",maxWidth:"calc(100vw - 40px)",maxHeight:"calc(100vh - 40px)"});return(n,g)=>E.value?(e.openBlock(),e.createElementBlock("div",{key:0,ref_key:"debugEl",ref:k,class:e.normalizeClass(["dev-debug",{"dev-debug--fullscreen":r.value,"dev-debug--floating":c.value&&!r.value,"dev-debug--dragging":m.value}]),style:e.normalizeStyle(H.value)},[e.createElementVNode("div",{class:e.normalizeClass(["dev-debug__header",{"dev-debug__header--draggable":c.value&&!r.value}]),onMousedown:z},[e.createElementVNode("button",{class:"dev-debug__toggle",onClick:e.withModifiers(N,["stop"])},[e.createElementVNode("span",{class:e.normalizeClass(["dev-debug__arrow",{"dev-debug__arrow--collapsed":p.value}])}," ▼ ",2)]),e.createElementVNode("span",re,"🔍 "+e.toDisplayString(l.value),1),e.createElementVNode("div",ce,[e.createElementVNode("button",{class:"dev-debug__btn",title:"Expand all",onClick:e.withModifiers(y,["stop"])},"⊕"),e.createElementVNode("button",{class:"dev-debug__btn",title:"Collapse all",onClick:e.withModifiers(j,["stop"])},"⊖"),g[0]||(g[0]=e.createElementVNode("span",{class:"dev-debug__separator"},null,-1)),e.createElementVNode("button",{class:"dev-debug__btn",title:"Copy",onClick:e.withModifiers(J,["stop"])},"📋"),e.createElementVNode("button",{class:"dev-debug__btn",title:"Open in new window",onClick:e.withModifiers(L,["stop"])}," ↗️ "),e.createElementVNode("button",{class:"dev-debug__btn",title:c.value?"Dock":"Float",onClick:e.withModifiers(O,["stop"])},e.toDisplayString(c.value?"📌":"🪟"),9,ie),e.createElementVNode("button",{class:"dev-debug__btn",title:"Fullscreen",onClick:e.withModifiers(F,["stop"])},e.toDisplayString(r.value?"⊙":"⛶"),1)])],34),e.withDirectives(e.createElementVNode("div",{ref_key:"contentEl",ref:i,class:"dev-debug__content",style:e.normalizeStyle({maxHeight:r.value||c.value?"none":o.maxHeight})},[e.createElementVNode("div",de,[e.createVNode(B,{data:b.value,root:!0},null,8,["data"])])],4),[[e.vShow,!p.value]])],6)):e.createCommentVNode("",!0)}}),A=S(ve,[["__scopeId","data-v-8fdf8728"]]),M={install(o,a={}){const s=a.componentName||"DevDebug";o.component(s,A),a.forceShow&&o.provide("devDebugForceShow",{value:!0})}};exports.DevDebug=A;exports.DevDebugJsonNode=B;exports.VueDevDebugPlugin=M;exports.default=M;

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { Plugin as Plugin_2 } from 'vue';
+import { PublicProps } from 'vue';
+
+declare type __VLS_Props = {
+    data: unknown;
+    title?: string;
+    maxHeight?: string;
+    collapsed?: boolean;
+    draggable?: boolean;
+    forceShow?: boolean;
+};
+
+declare type __VLS_Props_2 = {
+    data: unknown;
+    keyName?: string;
+    root?: boolean;
+    isLast?: boolean;
+};
+
+export declare const DevDebug: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+title: string;
+maxHeight: string;
+collapsed: boolean;
+draggable: boolean;
+forceShow: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+debugEl: HTMLDivElement;
+contentEl: HTMLDivElement;
+}, any>;
+
+export declare const DevDebugJsonNode: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
+keyName: string;
+root: boolean;
+isLast: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+export declare interface DevDebugProps {
+    /** Data to display in the debug viewer */
+    data: unknown;
+    /** Title for the debug panel (auto-extracted from object key if not provided) */
+    title?: string;
+    /** Maximum height of the content area */
+    maxHeight?: string;
+    /** Start collapsed */
+    collapsed?: boolean;
+    /** Enable draggable floating mode */
+    draggable?: boolean;
+    /** Force show even in production (use with caution!) */
+    forceShow?: boolean;
+}
+
+declare const VueDevDebugPlugin: Plugin_2;
+export { VueDevDebugPlugin }
+export default VueDevDebugPlugin;
+
+export declare interface VueDevDebugPluginOptions {
+    /** Force show debug panels in production (not recommended) */
+    forceShow?: boolean;
+    /** Custom component name (default: 'DevDebug') */
+    componentName?: string;
+}
+
+export { }

package/dist/index.js

@@ -0,0 +1,370 @@
+import { defineComponent as P, ref as f, inject as H, watch as V, computed as l, resolveComponent as se, createElementBlock as p, openBlock as d, createCommentVNode as x, createElementVNode as n, Fragment as F, toDisplayString as v, normalizeClass as O, renderList as te, createBlock as ae, reactive as I, provide as W, onMounted as oe, onUnmounted as le, normalizeStyle as Y, withDirectives as re, withModifiers as k, createVNode as ce, vShow as ie } from "vue";
+const ue = {
+  key: 0,
+  class: "json-line"
+}, de = { class: "json-key" }, ve = {
+  key: 1,
+  class: "json-comma"
+}, pe = {
+  key: 1,
+  class: "json-line json-expandable"
+}, ge = { class: "json-key" }, be = { class: "json-bracket" }, fe = { class: "json-bracket" }, je = {
+  key: 1,
+  class: "json-comma"
+}, me = {
+  key: 2,
+  class: "json-node"
+}, ye = { class: "json-line json-expandable" }, he = { class: "json-key" }, _e = { class: "json-bracket" }, ke = { class: "json-children" }, xe = { class: "json-line" }, we = { class: "json-bracket" }, $e = {
+  key: 0,
+  class: "json-comma"
+}, De = /* @__PURE__ */ P({
+  __name: "DevDebugJsonNode",
+  props: {
+    data: {},
+    keyName: { default: "" },
+    root: { type: Boolean, default: !1 },
+    isLast: { type: Boolean, default: !0 }
+  },
+  setup(t) {
+    const a = t, r = f(!0), $ = H("expandAll", { value: 0 }), D = H("collapseAll", { value: 0 });
+    V(
+      () => $.value,
+      () => {
+        r.value = !0;
+      }
+    ), V(
+      () => D.value,
+      () => {
+        r.value = !1;
+      }
+    );
+    const e = l(() => a.data === null ? "null" : Array.isArray(a.data) ? "array" : typeof a.data), N = l(() => e.value === "object" || e.value === "array"), E = l(() => e.value === "array" ? a.data.length : e.value === "object" ? Object.keys(a.data).length : 0), m = l(() => e.value === "array" ? a.data.map((u, o) => ({ key: String(o), value: u })) : e.value === "object" ? Object.entries(a.data).map(([u, o]) => ({ key: u, value: o })) : []), c = l(() => e.value === "array" ? "[" : "{"), y = l(() => e.value === "array" ? "]" : "}"), i = l(() => e.value === "array" ? `[ ${E.value} items ]` : `{ ${E.value} keys }`), j = l(() => e.value === "string" ? `"${a.data}"` : e.value === "null" ? "null" : String(a.data)), C = l(() => {
+      const u = "json-value";
+      switch (e.value) {
+        case "string":
+          return `${u} json-string`;
+        case "number":
+          return `${u} json-number`;
+        case "boolean":
+          return `${u} json-boolean`;
+        case "null":
+          return `${u} json-null`;
+        default:
+          return u;
+      }
+    }), S = () => {
+      N.value && (r.value = !r.value);
+    };
+    return (u, o) => {
+      const w = se("DevDebugJsonNode", !0);
+      return N.value ? r.value ? (d(), p("div", me, [
+        n("div", ye, [
+          n("span", {
+            class: "json-toggle json-toggle--expanded",
+            onClick: S
+          }, "▼"),
+          t.keyName ? (d(), p(F, { key: 0 }, [
+            n("span", he, '"' + v(t.keyName) + '"', 1),
+            o[2] || (o[2] = n("span", { class: "json-colon" }, ": ", -1))
+          ], 64)) : x("", !0),
+          n("span", _e, v(c.value), 1)
+        ]),
+        n("div", ke, [
+          (d(!0), p(F, null, te(m.value, (A, B) => (d(), ae(w, {
+            key: A.key,
+            data: A.value,
+            "key-name": e.value === "array" ? "" : A.key,
+            "is-last": B === m.value.length - 1
+          }, null, 8, ["data", "key-name", "is-last"]))), 128))
+        ]),
+        n("div", xe, [
+          n("span", we, v(y.value), 1),
+          t.isLast ? x("", !0) : (d(), p("span", $e, ","))
+        ])
+      ])) : (d(), p("div", pe, [
+        n("span", {
+          class: "json-toggle",
+          onClick: S
+        }, "▶"),
+        t.keyName ? (d(), p(F, { key: 0 }, [
+          n("span", ge, '"' + v(t.keyName) + '"', 1),
+          o[1] || (o[1] = n("span", { class: "json-colon" }, ": ", -1))
+        ], 64)) : x("", !0),
+        n("span", be, v(c.value), 1),
+        n("span", {
+          class: "json-preview",
+          onClick: S
+        }, v(i.value), 1),
+        n("span", fe, v(y.value), 1),
+        t.isLast ? x("", !0) : (d(), p("span", je, ","))
+      ])) : (d(), p("div", ue, [
+        t.keyName ? (d(), p(F, { key: 0 }, [
+          n("span", de, '"' + v(t.keyName) + '"', 1),
+          o[0] || (o[0] = n("span", { class: "json-colon" }, ": ", -1))
+        ], 64)) : x("", !0),
+        n("span", {
+          class: O(C.value)
+        }, v(j.value), 3),
+        t.isLast ? x("", !0) : (d(), p("span", ve, ","))
+      ]));
+    };
+  }
+}), X = (t, a) => {
+  const r = t.__vccOpts || t;
+  for (const [$, D] of a)
+    r[$] = D;
+  return r;
+}, Ce = /* @__PURE__ */ X(De, [["__scopeId", "data-v-2d2f26de"]]), Se = { class: "dev-debug__title" }, Ae = { class: "dev-debug__actions" }, Ne = ["title"], Ee = { class: "json-tree" }, Fe = `
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    color: #a5f3fc;
+    padding: 20px;
+    min-height: 100vh;
+  }
+  h1 {
+    color: #f472b6;
+    margin-bottom: 16px;
+    font-size: 16px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+  .json-tree {
+    line-height: 1.6;
+    font-size: 13px;
+  }
+  .json-line { white-space: nowrap; }
+  .json-toggle {
+    display: inline-block;
+    width: 16px;
+    color: #64748b;
+    cursor: pointer;
+    user-select: none;
+    font-size: 10px;
+  }
+  .json-toggle:hover { color: #f472b6; }
+  .json-toggle--expanded { color: #a5f3fc; }
+  .json-children {
+    padding-left: 20px;
+    border-left: 1px solid #3b3b5c;
+    margin-left: 7px;
+  }
+  .json-key { color: #c084fc; font-weight: 500; }
+  .json-colon { color: #64748b; margin-right: 4px; }
+  .json-comma { color: #64748b; }
+  .json-bracket { color: #64748b; }
+  .json-value { color: #a5f3fc; }
+  .json-string { color: #6ee7b7; }
+  .json-number { color: #fbbf24; }
+  .json-boolean { color: #f472b6; font-weight: 600; }
+  .json-null { color: #f87171; font-style: italic; }
+  .json-preview {
+    color: #64748b;
+    font-style: italic;
+    margin: 0 4px;
+    cursor: pointer;
+  }
+  .json-preview:hover { color: #a5f3fc; }
+`, Oe = /* @__PURE__ */ P({
+  __name: "DevDebug",
+  props: {
+    data: {},
+    title: { default: "" },
+    maxHeight: { default: "300px" },
+    collapsed: { type: Boolean, default: !1 },
+    draggable: { type: Boolean, default: !1 },
+    forceShow: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const a = I({ value: 0 }), r = I({ value: 0 });
+    W("expandAll", a), W("collapseAll", r);
+    const $ = () => {
+      a.value++;
+    }, D = () => {
+      r.value++;
+    }, e = t, N = H("devDebugForceShow", { value: !1 }), E = l(() => !!(e.forceShow || N.value)), m = f(e.collapsed), c = f(!1), y = f(!1), i = f(e.draggable), j = f({ x: 20, y: 20 }), C = f({ x: 0, y: 0 }), S = f(null), u = f(null), o = l(() => e.title ? e.title : e.data && typeof e.data == "object" && !Array.isArray(e.data) && Object.keys(e.data).length === 1 ? Object.keys(e.data)[0] : "Debug"), w = l(() => e.data && typeof e.data == "object" && !Array.isArray(e.data) && Object.keys(e.data).length === 1 && !e.title ? Object.values(e.data)[0] : e.data), A = l(() => {
+      try {
+        return JSON.stringify(w.value, null, 2);
+      } catch {
+        return String(w.value);
+      }
+    }), B = () => {
+      m.value = !m.value;
+    }, q = () => {
+      c.value = !c.value;
+    }, U = () => {
+      i.value = !i.value, i.value && (j.value = { x: 20, y: 20 });
+    }, G = (s) => {
+      !i.value || c.value || (y.value = !0, C.value = {
+        x: s.clientX - j.value.x,
+        y: s.clientY - j.value.y
+      }, s.preventDefault());
+    }, J = (s) => {
+      y.value && (j.value = {
+        x: Math.max(0, Math.min(window.innerWidth - 300, s.clientX - C.value.x)),
+        y: Math.max(0, Math.min(window.innerHeight - 100, s.clientY - C.value.y))
+      });
+    }, T = () => {
+      y.value = !1;
+    };
+    oe(() => {
+      document.addEventListener("mousemove", J), document.addEventListener("mouseup", T);
+    }), le(() => {
+      document.removeEventListener("mousemove", J), document.removeEventListener("mouseup", T);
+    });
+    const L = (s, h = "", Z = !0) => {
+      const g = Z ? "" : '<span class="json-comma">,</span>', b = h ? `<span class="json-key">"${h}"</span><span class="json-colon">: </span>` : "";
+      if (s === null)
+        return `<div class="json-line">${b}<span class="json-value json-null">null</span>${g}</div>`;
+      if (Array.isArray(s)) {
+        if (s.length === 0)
+          return `<div class="json-line">${b}<span class="json-bracket">[]</span>${g}</div>`;
+        const _ = s.map((M, z) => L(M, "", z === s.length - 1)).join("");
+        return `
+      <div class="json-node">
+        <div class="json-line">${b}<span class="json-bracket">[</span></div>
+        <div class="json-children">${_}</div>
+        <div class="json-line"><span class="json-bracket">]</span>${g}</div>
+      </div>
+    `;
+      }
+      if (typeof s == "object") {
+        const _ = Object.entries(s);
+        if (_.length === 0)
+          return `<div class="json-line">${b}<span class="json-bracket">{}</span>${g}</div>`;
+        const M = _.map(([z, ee], ne) => L(ee, z, ne === _.length - 1)).join("");
+        return `
+      <div class="json-node">
+        <div class="json-line">${b}<span class="json-bracket">{</span></div>
+        <div class="json-children">${M}</div>
+        <div class="json-line"><span class="json-bracket">}</span>${g}</div>
+      </div>
+    `;
+      }
+      if (typeof s == "string") {
+        const _ = s.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+        return `<div class="json-line">${b}<span class="json-value json-string">"${_}"</span>${g}</div>`;
+      }
+      return typeof s == "number" ? `<div class="json-line">${b}<span class="json-value json-number">${s}</span>${g}</div>` : typeof s == "boolean" ? `<div class="json-line">${b}<span class="json-value json-boolean">${s}</span>${g}</div>` : `<div class="json-line">${b}<span class="json-value">${String(s)}</span>${g}</div>`;
+    }, K = () => {
+      const s = window.open("", "_blank", "width=800,height=600");
+      if (s) {
+        const h = L(w.value);
+        s.document.write(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>${o.value}</title>
+          <style>${Fe}</style>
+        </head>
+        <body>
+          <h1>🔍 ${o.value}</h1>
+          <div class="json-tree">${h}</div>
+        </body>
+      </html>
+    `), s.document.close();
+      }
+    }, Q = async () => {
+      try {
+        await navigator.clipboard.writeText(A.value);
+      } catch {
+        console.error("Failed to copy to clipboard");
+      }
+    }, R = l(() => !i.value || c.value ? {} : {
+      position: "fixed",
+      left: `${j.value.x}px`,
+      top: `${j.value.y}px`,
+      zIndex: 99998,
+      width: "400px",
+      height: "300px",
+      maxWidth: "calc(100vw - 40px)",
+      maxHeight: "calc(100vh - 40px)"
+    });
+    return (s, h) => E.value ? (d(), p("div", {
+      key: 0,
+      ref_key: "debugEl",
+      ref: S,
+      class: O(["dev-debug", {
+        "dev-debug--fullscreen": c.value,
+        "dev-debug--floating": i.value && !c.value,
+        "dev-debug--dragging": y.value
+      }]),
+      style: Y(R.value)
+    }, [
+      n("div", {
+        class: O(["dev-debug__header", { "dev-debug__header--draggable": i.value && !c.value }]),
+        onMousedown: G
+      }, [
+        n("button", {
+          class: "dev-debug__toggle",
+          onClick: k(B, ["stop"])
+        }, [
+          n("span", {
+            class: O(["dev-debug__arrow", { "dev-debug__arrow--collapsed": m.value }])
+          }, " ▼ ", 2)
+        ]),
+        n("span", Se, "🔍 " + v(o.value), 1),
+        n("div", Ae, [
+          n("button", {
+            class: "dev-debug__btn",
+            title: "Expand all",
+            onClick: k($, ["stop"])
+          }, "⊕"),
+          n("button", {
+            class: "dev-debug__btn",
+            title: "Collapse all",
+            onClick: k(D, ["stop"])
+          }, "⊖"),
+          h[0] || (h[0] = n("span", { class: "dev-debug__separator" }, null, -1)),
+          n("button", {
+            class: "dev-debug__btn",
+            title: "Copy",
+            onClick: k(Q, ["stop"])
+          }, "📋"),
+          n("button", {
+            class: "dev-debug__btn",
+            title: "Open in new window",
+            onClick: k(K, ["stop"])
+          }, " ↗️ "),
+          n("button", {
+            class: "dev-debug__btn",
+            title: i.value ? "Dock" : "Float",
+            onClick: k(U, ["stop"])
+          }, v(i.value ? "📌" : "🪟"), 9, Ne),
+          n("button", {
+            class: "dev-debug__btn",
+            title: "Fullscreen",
+            onClick: k(q, ["stop"])
+          }, v(c.value ? "⊙" : "⛶"), 1)
+        ])
+      ], 34),
+      re(n("div", {
+        ref_key: "contentEl",
+        ref: u,
+        class: "dev-debug__content",
+        style: Y({ maxHeight: c.value || i.value ? "none" : t.maxHeight })
+      }, [
+        n("div", Ee, [
+          ce(Ce, {
+            data: w.value,
+            root: !0
+          }, null, 8, ["data"])
+        ])
+      ], 4), [
+        [ie, !m.value]
+      ])
+    ], 6)) : x("", !0);
+  }
+}), Be = /* @__PURE__ */ X(Oe, [["__scopeId", "data-v-8fdf8728"]]), Me = {
+  install(t, a = {}) {
+    const r = a.componentName || "DevDebug";
+    t.component(r, Be), a.forceShow && t.provide("devDebugForceShow", { value: !0 });
+  }
+};
+export {
+  Be as DevDebug,
+  Ce as DevDebugJsonNode,
+  Me as VueDevDebugPlugin,
+  Me as default
+};

package/dist/style.css

@@ -0,0 +1 @@
+.json-line[data-v-2d2f26de]{white-space:nowrap}.json-expandable[data-v-2d2f26de]{cursor:default}.json-toggle[data-v-2d2f26de]{display:inline-block;width:16px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none;font-size:10px;transition:color .15s}.json-toggle[data-v-2d2f26de]:hover{color:#f472b6}.json-toggle--expanded[data-v-2d2f26de]{color:#a5f3fc}.json-node[data-v-2d2f26de]{display:contents}.json-children[data-v-2d2f26de]{padding-left:20px;border-left:1px solid #3b3b5c;margin-left:7px}.json-key[data-v-2d2f26de]{color:#c084fc;font-weight:500}.json-colon[data-v-2d2f26de]{color:#64748b;margin-right:4px}.json-comma[data-v-2d2f26de],.json-bracket[data-v-2d2f26de]{color:#64748b}.json-value[data-v-2d2f26de]{color:#a5f3fc}.json-string[data-v-2d2f26de]{color:#6ee7b7}.json-number[data-v-2d2f26de]{color:#fbbf24}.json-boolean[data-v-2d2f26de]{color:#f472b6;font-weight:600}.json-null[data-v-2d2f26de]{color:#f87171;font-style:italic}.json-preview[data-v-2d2f26de]{color:#64748b;font-style:italic;margin:0 4px;cursor:pointer;transition:color .15s}.json-preview[data-v-2d2f26de]:hover{color:#a5f3fc}.dev-debug[data-v-8fdf8728]{font-family:JetBrains Mono,Fira Code,Consolas,monospace;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid #f472b6;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px #f472b626,inset 0 1px #ffffff0d;font-size:13px;margin:8px 0}.dev-debug--floating[data-v-8fdf8728]{box-shadow:0 8px 32px #0006,0 4px 20px #f472b640;resize:both;min-width:300px;min-height:100px;display:flex;flex-direction:column}.dev-debug--dragging[data-v-8fdf8728]{opacity:.9;cursor:grabbing!important}.dev-debug--fullscreen[data-v-8fdf8728]{position:fixed;top:16px;right:16px;bottom:16px;left:16px;z-index:99999;margin:0;border-radius:12px;width:auto!important;max-width:none!important;height:auto!important;display:flex;flex-direction:column}.dev-debug__header[data-v-8fdf8728]{display:flex;align-items:center;gap:8px;padding:8px 12px;background:linear-gradient(90deg,#2d1b4e,#1e3a5f);border-bottom:1px solid #3b3b5c;flex-shrink:0}.dev-debug__header--draggable[data-v-8fdf8728]{cursor:grab}.dev-debug__header--draggable[data-v-8fdf8728]:active{cursor:grabbing}.dev-debug__toggle[data-v-8fdf8728]{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center}.dev-debug__arrow[data-v-8fdf8728]{color:#f472b6;font-size:10px;transition:transform .2s ease;display:inline-block}.dev-debug__arrow--collapsed[data-v-8fdf8728]{transform:rotate(-90deg)}.dev-debug__title[data-v-8fdf8728]{color:#f472b6;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.5px}.dev-debug__actions[data-v-8fdf8728]{margin-left:auto;display:flex;gap:4px}.dev-debug__btn[data-v-8fdf8728]{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:4px 8px;cursor:pointer;font-size:12px;transition:all .15s ease}.dev-debug__btn[data-v-8fdf8728]:hover{background:#f472b633;border-color:#f472b6}.dev-debug__separator[data-v-8fdf8728]{width:1px;height:16px;background:#3b3b5c;margin:0 4px}.dev-debug__content[data-v-8fdf8728]{overflow:auto;scrollbar-width:thin;scrollbar-color:#f472b6 #1a1a2e}.dev-debug--floating .dev-debug__content[data-v-8fdf8728],.dev-debug--fullscreen .dev-debug__content[data-v-8fdf8728]{flex:1;min-height:0}.dev-debug__content[data-v-8fdf8728]::-webkit-scrollbar{width:8px;height:8px}.dev-debug__content[data-v-8fdf8728]::-webkit-scrollbar-track{background:#1a1a2e}.dev-debug__content[data-v-8fdf8728]::-webkit-scrollbar-thumb{background:#f472b6;border-radius:4px}.json-tree[data-v-8fdf8728]{padding:12px 16px;line-height:1.6}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@vahy_the/vue-dev-debug",
+  "version": "0.1.0",
+  "description": "Beautiful JSON debug viewer component for Vue 3 - only renders in development mode",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -p tsconfig.json && vite build",
+    "preview": "vite preview",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "debug",
+    "devtools",
+    "json",
+    "viewer",
+    "developer",
+    "component"
+  ],
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "~5.6.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0"
+  }
+}