@miman/json-schema-viewer-react 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -62,7 +62,7 @@
             box-sizing: border-box;
         }
 
-        .schema-header {
+        .schema-container .schema-header {
             background: var(--header-bg);
             padding: 16px;
             border-radius: 8px;
@@ -70,20 +70,20 @@
             border: 1px solid var(--border-color);
         }
 
-        .schema-header-top {
+        .schema-container .schema-header-top {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin-bottom: 8px;
         }
 
-        .schema-title {
+        .schema-container .schema-title {
             font-size: 24px;
             font-weight: 600;
             color: var(--type-object);
         }
 
-        .view-selector {
+        .schema-container .view-selector {
             display: flex;
             flex-direction: column;
             align-items: flex-end;
@@ -92,19 +92,19 @@
             color: var(--expand-icon);
         }
 
-        .view-switch {
+        .schema-container .view-switch {
             display: inline-flex;
             align-items: center;
             gap: 8px;
         }
 
-        .view-switch-label {
+        .schema-container .view-switch-label {
             font-size: 12px;
             color: var(--expand-icon);
             user-select: none;
         }
 
-        .view-switch-checkbox {
+        .schema-container .view-switch-checkbox {
             appearance: none;
             width: 33px;
             height: 18px;
@@ -118,7 +118,7 @@
             transition: background 0.15s ease;
         }
 
-        .view-switch-checkbox::after {
+        .schema-container .view-switch-checkbox::after {
             content: '';
             position: absolute;
             top: 3px;
@@ -131,19 +131,19 @@
             transition: transform 0.15s ease;
         }
 
-        .view-switch-checkbox:checked::after {
+        .schema-container .view-switch-checkbox:checked::after {
             transform: translateX(15px);
         }
 
-        .view-switch-left {
+        .schema-container .view-switch-left {
             margin-right: 6px;
         }
 
-        .view-switch-right {
+        .schema-container .view-switch-right {
             margin-left: 6px;
         }
 
-        .active-link-label {
+        .schema-container .active-link-label {
             display: inline-flex;
             align-items: center;
             gap: 6px;
@@ -155,7 +155,7 @@
             white-space: nowrap;
         }
 
-        .active-link-checkbox {
+        .schema-container .active-link-checkbox {
             appearance: none;
             width: 16px;
             height: 16px;
@@ -166,12 +166,12 @@
             background: var(--bg-color);
         }
 
-        .active-link-checkbox:checked {
+        .schema-container .active-link-checkbox:checked {
             background: var(--type-boolean);
             border-color: var(--type-boolean);
         }
 
-        .active-link-checkbox:checked::after {
+        .schema-container .active-link-checkbox:checked::after {
             content: '✓';
             position: absolute;
             top: 50%;

package/dist/index.js

@@ -65,7 +65,7 @@ function J() {
             box-sizing: border-box;
         }
 
-        .schema-header {
+        .schema-container .schema-header {
             background: var(--header-bg);
             padding: 16px;
             border-radius: 8px;
@@ -73,20 +73,20 @@ function J() {
             border: 1px solid var(--border-color);
         }
 
-        .schema-header-top {
+        .schema-container .schema-header-top {
             display: flex;
             justify-content: space-between;
             align-items: center;
             margin-bottom: 8px;
         }
 
-        .schema-title {
+        .schema-container .schema-title {
             font-size: 24px;
             font-weight: 600;
             color: var(--type-object);
         }
 
-        .view-selector {
+        .schema-container .view-selector {
             display: flex;
             flex-direction: column;
             align-items: flex-end;
@@ -95,19 +95,19 @@ function J() {
             color: var(--expand-icon);
         }
 
-        .view-switch {
+        .schema-container .view-switch {
             display: inline-flex;
             align-items: center;
             gap: 8px;
         }
 
-        .view-switch-label {
+        .schema-container .view-switch-label {
             font-size: 12px;
             color: var(--expand-icon);
             user-select: none;
         }
 
-        .view-switch-checkbox {
+        .schema-container .view-switch-checkbox {
             appearance: none;
             width: 33px;
             height: 18px;
@@ -121,7 +121,7 @@ function J() {
             transition: background 0.15s ease;
         }
 
-        .view-switch-checkbox::after {
+        .schema-container .view-switch-checkbox::after {
             content: '';
             position: absolute;
             top: 3px;
@@ -134,19 +134,19 @@ function J() {
             transition: transform 0.15s ease;
         }
 
-        .view-switch-checkbox:checked::after {
+        .schema-container .view-switch-checkbox:checked::after {
             transform: translateX(15px);
         }
 
-        .view-switch-left {
+        .schema-container .view-switch-left {
             margin-right: 6px;
         }
 
-        .view-switch-right {
+        .schema-container .view-switch-right {
             margin-left: 6px;
         }
 
-        .active-link-label {
+        .schema-container .active-link-label {
             display: inline-flex;
             align-items: center;
             gap: 6px;
@@ -158,7 +158,7 @@ function J() {
             white-space: nowrap;
         }
 
-        .active-link-checkbox {
+        .schema-container .active-link-checkbox {
             appearance: none;
             width: 16px;
             height: 16px;
@@ -169,12 +169,12 @@ function J() {
             background: var(--bg-color);
         }
 
-        .active-link-checkbox:checked {
+        .schema-container .active-link-checkbox:checked {
             background: var(--type-boolean);
             border-color: var(--type-boolean);
         }
 
-        .active-link-checkbox:checked::after {
+        .schema-container .active-link-checkbox:checked::after {
             content: '✓';
             position: absolute;
             top: 50%;
@@ -838,8 +838,8 @@ function W(e, t) {
     c.forEach((f) => {
       const v = document.createElement("li");
       if (v.textContent = f, l.includes(f)) {
-        const h = document.createElement("span");
-        h.className = "missing-badge", h.textContent = "file not found", v.appendChild(document.createTextNode(" ")), v.appendChild(h);
+        const b = document.createElement("span");
+        b.className = "missing-badge", b.textContent = "file not found", v.appendChild(document.createTextNode(" ")), v.appendChild(b);
       }
       m.appendChild(v);
     }), o.appendChild(m), e.appendChild(o);
@@ -854,20 +854,20 @@ function N(e, t, n, r, c, l, d, s, p) {
 function A(e, t, n, r, c, l, d, s, p) {
   const i = document.createElement("div");
   i.className = "schema-object";
-  const a = C(t, r, c), o = L(a), m = M(a), f = a.description || "", v = a.__isImported || O(t), h = a.__isMissing, w = l[p], x = (b) => {
-    if (!b) return null;
-    const u = b.match(/[#/](\$defs|definitions)\/([^/]+)$/);
+  const a = C(t, r, c), o = L(a), m = M(a), f = a.description || "", v = a.__isImported || O(t), b = a.__isMissing, w = l[p], x = (h) => {
+    if (!h) return null;
+    const u = h.match(/[#/](\$defs|definitions)\/([^/]+)$/);
     if (u) return u[2];
-    const k = b.match(/\/([^/]+)$/);
+    const k = h.match(/\/([^/]+)$/);
     return k ? k[1] : null;
   };
   let $ = o;
   if (t.$ref) {
-    const b = x(t.$ref);
-    b && ($ = `object<${b}>`);
+    const h = x(t.$ref);
+    h && ($ = `object<${h}>`);
   } else if (o === "array" && t.items?.$ref) {
-    const b = x(t.items.$ref);
-    b && ($ = `array<${b}>`);
+    const h = x(t.items.$ref);
+    h && ($ = `array<${h}>`);
   }
   const y = document.createElement("div");
   if (y.className = "schema-object-header", w !== void 0 && (y.dataset.sourceLine = String(w)), y.innerHTML = `
@@ -876,17 +876,17 @@ function A(e, t, n, r, c, l, d, s, p) {
     <span class="property-type type-${g(o)}">${o === "missing" ? "file not found" : g($)}</span>
     ${n ? '<span class="required-badge">required</span>' : ""}
     ${v ? '<span class="imported-badge">imported</span>' : ""}
-    ${h ? '<span class="missing-badge">file not found</span>' : ""}
+    ${b ? '<span class="missing-badge">file not found</span>' : ""}
     ${f ? `<span class="property-description">${g(f)}</span>` : ""}
-  `, y.addEventListener("click", (b) => {
+  `, y.addEventListener("click", (h) => {
     if (m) {
       const u = i.querySelector(".schema-object-content"), k = y.querySelector(".expand-icon");
       u?.classList.toggle("expanded"), k?.classList.toggle("expanded");
     }
-    d && w !== void 0 && s && (s(w), b.stopPropagation());
-  }), i.appendChild(y), m && !h) {
-    const b = document.createElement("div");
-    b.className = "schema-object-content", H(b, a, r, c, l, d, s, p), i.appendChild(b);
+    d && w !== void 0 && s && (s(w), h.stopPropagation());
+  }), i.appendChild(y), m && !b) {
+    const h = document.createElement("div");
+    h.className = "schema-object-content", H(h, a, r, c, l, d, s, p), i.appendChild(h);
   }
   return i;
 }
@@ -909,8 +909,8 @@ function H(e, t, n, r, c, l, d, s) {
     }), i === "example") {
       const f = document.createElement("div");
       f.className = "object-example-view";
-      const v = E(t, n, r, /* @__PURE__ */ new Set()), h = K(JSON.stringify(v, null, 2));
-      f.innerHTML = `<pre>${h}</pre>`, o.appendChild(f);
+      const v = E(t, n, r, /* @__PURE__ */ new Set()), b = K(JSON.stringify(v, null, 2));
+      f.innerHTML = `<pre>${b}</pre>`, o.appendChild(f);
     } else
       q(o, t, n, r, c, l, d, s);
   };
@@ -947,7 +947,7 @@ function q(e, t, n, r, c, l, d, s) {
     if (t[a]) {
       const o = document.createElement("div");
       o.className = "array-items-label", o.textContent = a + ":", e.appendChild(o), t[a].forEach((m, f) => {
-        const v = C(m, n, r), h = `${s}.${a}.${f}`, w = A(`Option ${f + 1}`, v, !1, n, r, c, l, d, h);
+        const v = C(m, n, r), b = `${s}.${a}.${f}`, w = A(`Option ${f + 1}`, v, !1, n, r, c, l, d, b);
         e.appendChild(w);
       });
     }
@@ -956,7 +956,7 @@ function q(e, t, n, r, c, l, d, s) {
 function X(e, t, n, r, c, l, d, s) {
   const p = document.createElement("div");
   p.className = "schema-object", p.id = `def-${e}`;
-  const i = C(t, n, r), a = L(i), o = M(i), m = i.description || "", f = i.__isImported || O(t), v = i.__isMissing, h = `${s}.${e}`, w = c[h], x = document.createElement("div");
+  const i = C(t, n, r), a = L(i), o = M(i), m = i.description || "", f = i.__isImported || O(t), v = i.__isMissing, b = `${s}.${e}`, w = c[b], x = document.createElement("div");
   if (x.className = "schema-object-header", w !== void 0 && (x.dataset.sourceLine = String(w)), x.innerHTML = `
     ${o ? '<svg class="expand-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>' : '<div style="width: 24px;"></div>'}
     <span class="property-name">${g(e)}</span>
@@ -966,13 +966,13 @@ function X(e, t, n, r, c, l, d, s) {
     ${m ? `<span class="property-description">${g(m)}</span>` : ""}
   `, x.addEventListener("click", ($) => {
     if (o) {
-      const y = p.querySelector(".schema-object-content"), b = x.querySelector(".expand-icon");
-      y?.classList.toggle("expanded"), b?.classList.toggle("expanded");
+      const y = p.querySelector(".schema-object-content"), h = x.querySelector(".expand-icon");
+      y?.classList.toggle("expanded"), h?.classList.toggle("expanded");
     }
     l && w !== void 0 && d && (d(w), $.stopPropagation());
   }), p.appendChild(x), o && !v) {
     const $ = document.createElement("div");
-    $.className = "schema-object-content", H($, i, n, r, c, l, d, h), p.appendChild($);
+    $.className = "schema-object-content", H($, i, n, r, c, l, d, b), p.appendChild($);
   }
   return p;
 }
@@ -1020,29 +1020,29 @@ function _(e, t, n, r, c, l, d, s, p, i) {
   }
   const v = f ? s[f] : void 0;
   v !== void 0 && (o.dataset.sourceLine = String(v));
-  const h = L(m), w = M(m), x = r.expandedNodes.has(t.id), $ = (u) => {
+  const b = L(m), w = M(m), x = r.expandedNodes.has(t.id), $ = (u) => {
     if (!u) return null;
     const k = u.match(/[#/](\$defs|definitions)\/([^/]+)$/);
     if (k) return k[2];
     const z = u.match(/\/([^/]+)$/);
     return z ? z[1] : null;
   };
-  let y = m.enum ? "enum" : h;
+  let y = m.enum ? "enum" : b;
   if (t.prop.$ref) {
     const u = $(t.prop.$ref);
     u && (y = u);
-  } else if (h === "array" && t.prop.items?.$ref) {
+  } else if (b === "array" && t.prop.items?.$ref) {
     const u = $(t.prop.items.$ref);
     u && (y = `array<${u}>`);
-  } else if (h === "object" && m.properties) {
+  } else if (b === "object" && m.properties) {
     const u = Object.keys(m.properties).length;
     y = `object (${u} ${u === 1 ? "property" : "properties"})`;
-  } else if (h === "array" && m.items) {
+  } else if (b === "array" && m.items) {
     const u = C(m.items, c, l);
     y = `array<${L(u)}>`;
   }
-  let b = "";
-  x && (m.pattern && (b += `<div class="tree-node-meta-item">Pattern: <code>${g(m.pattern)}</code></div>`), m.minLength !== void 0 && (b += `<div class="tree-node-meta-item">Min Length: ${m.minLength}</div>`)), m.enum && (b += `<div class="tree-node-meta-item">Enum: <span class="tree-enum-values">${m.enum.map((u) => JSON.stringify(u)).join(", ")}</span></div>`), o.innerHTML = `
+  let h = "";
+  x && (m.pattern && (h += `<div class="tree-node-meta-item">Pattern: <code>${g(m.pattern)}</code></div>`), m.minLength !== void 0 && (h += `<div class="tree-node-meta-item">Min Length: ${m.minLength}</div>`)), m.enum && (h += `<div class="tree-node-meta-item">Enum: <span class="tree-enum-values">${m.enum.map((u) => JSON.stringify(u)).join(", ")}</span></div>`), o.innerHTML = `
     <div class="tree-node-header">
       <div class="tree-node-title-row">
         <span class="property-name">${g(t.name)}</span>
@@ -1050,7 +1050,7 @@ function _(e, t, n, r, c, l, d, s, p, i) {
       </div>
       <span class="property-type type-${g(y)}">${g(y)}</span>
     </div>
-    ${b ? `<div class="tree-node-meta">${b}</div>` : ""}
+    ${h ? `<div class="tree-node-meta">${h}</div>` : ""}
     ${x && m.description ? `<div class="tree-node-description">${g(m.description)}</div>` : ""}
     ${w ? `
       <div class="tree-node-toggle">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miman/json-schema-viewer-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React component for visualizing JSON Schema files",
   "type": "module",
   "scripts": {