json-diff-viewer-component 0.5.1 → 0.6.1

package/README.md

@@ -1,5 +1,5 @@
 <div align="center">
-    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/refs/heads/master/public/logo.svg" alt="logo" height="128" />
+    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/master/public/logo.svg" alt="logo" height="128" />
     <h2>json-diff-viewer</h2>
     <h5>
         Compare JSON side-by-side, visually
@@ -8,13 +8,12 @@
         A zero-dependency web component for visualizing JSON differences
         <br>
         with synchronized scrolling, collapsible nodes, and syntax highlighting
-        <br>
-        Perfect for debugging, API comparisons, and configuration diffs
     </p>
-    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/refs/heads/master/public/screenshot.png" alt="demo" width="80%" />
     <h5>
         <a href="https://metaory.github.io/json-diff-viewer-component/" target="_blank">metaory.github.io/json-diff-viewer-component</a>
     </h5>
+    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/master/public/screenshot.jpg" alt="demo" width="80%" />
+    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/master/public/screenshot-light.jpg" alt="demo-light" width="80%" />
 </div>
 
 ## Features
@@ -185,6 +184,8 @@ json-diff-viewer {
 
 ### Sizing
 
+The component requires a defined height to enable scrolling. Without a height, the component will expand to fit all content.
+
 ```css
 json-diff-viewer {
   height: 600px;
@@ -192,6 +193,21 @@ json-diff-viewer {
 }
 ```
 
+For full-height layouts, use flexbox:
+
+```css
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+json-diff-viewer {
+  flex: 1;
+  min-height: 0;
+}
+```
+
 ## Dev
 
 ```bash

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "json-diff-viewer-component",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "type": "module",
   "description": "Vanilla JS web component for side-by-side JSON diff visualization",
+  "bugs": "https://github.com/metaory/json-diff-viewer-component/issues",
+  "homepage": "https://metaory.github.io/json-diff-viewer-component/",
+  "repository": "git+https://github.com/metaory/json-diff-viewer-component.git",
   "keywords": [
     "json",
     "diff",

package/src/lib/styles.js

@@ -12,7 +12,6 @@ export default `
 .container { display: grid; grid-template-columns: 1fr 1fr; flex: 1; min-height: 0; }
 .panel { overflow: auto; padding: 1rem; background: var(--bg2); scrollbar-width: thin; scrollbar-color: var(--bdr) transparent; }
 .panel:first-child { border-right: 2px solid var(--bdr); }
-.header { padding: 0.25rem 0 0.5rem; font-weight: 600; color: var(--dim); border-bottom: 1px solid var(--bdr); margin-bottom: 0.5rem; font-size: 11px; }
 .node { padding-left: 1.25rem; }
 .node.root { padding-left: 0; }
 .line { display: flex; align-items: flex-start; gap: 0.5rem; padding: 2px 4px; border-radius: 4px; cursor: pointer; transition: background .15s; }
@@ -48,7 +47,7 @@ export default `
 .switch { display: inline-block; cursor: pointer; }
 .checkbox { display: none; }
 .slider { width: 48px; height: 24px; background-color: var(--bdr); border-radius: 16px; overflow: hidden; display: flex; align-items: center; border: 3px solid transparent; transition: .3s; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25) inset; cursor: pointer; }
-.slider::before { content: ''; display: block; width: 100%; height: 100%; background-color: var(--txt); transform: translateX(-24px); border-radius: 16px; transition: .3s; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25); }
+.slider::before { content: ''; display: block; width: 100%; height: 100%; background-color: var(--br); transform: translateX(-24px); border-radius: 16px; transition: .3s; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25); }
 .checkbox:checked ~ .slider::before { transform: translateX(24px); box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25); }
 .checkbox:checked ~ .slider { background-color: var(--slider); }
 .checkbox:active ~ .slider::before { transform: translate(0); }

package/src/lib/viewer.js

@@ -159,8 +159,7 @@ class JsonDiffViewer extends HTMLElement {
       <div class="container">
         ${["left", "right"]
           .map((side) => {
-            const label = side === "left" ? "Original" : "Modified";
-            return `<div class="panel" data-side="${side}"><div class="header">${label}</div>${this.#renderNode(this.#tree, side, "")}</div>`;
+            return `<div class="panel" data-side="${side}">${this.#renderNode(this.#tree, side, "")}</div>`;
           })
           .join("")}
       </div>`;