@ht-rnd/merge-conflict-viewer 0.1.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +4 -2
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -4,6 +4,8 @@ Let users resolve the differences between two JSON documents in a React app, and
4
4
 
5
5
  ![Merge Conflict Viewer: Current, Result and Incoming panes with an unresolved-changes banner](docs/viewer-in-progress.png)
6
6
 
7
+ [Live demo](https://ht-rnd.github.io/merge-conflict-viewer/): try the component, switch its colours and corners, and open the playground.
8
+
7
9
  You give it a **current** and an **incoming** document. It shows them side by side with a live **result** in the middle (the layout you know from IntelliJ's merge tool). For every difference the user accepts the current value, accepts the incoming value, removes it, or types their own. You get the merged document, and a status that says whether every difference has been decided.
8
10
 
9
11
  It ships in two parts:
@@ -110,7 +112,7 @@ Every difference is a **change**: a value that differs, a key or array item that
110
112
 
111
113
  A change starts **unresolved**: the Result pane shows the incoming value on an amber background, and neither side is highlighted as accepted. (An unresolved change that only exists in current is absent from the result, because incoming does not have it.) Once the user decides, the change turns into a normal blue (modified) or green (one side only) block, the side that was not chosen fades, and the banner (with a progress bar) counts down. When nothing is left:
112
114
 
113
- ![Banner reading "All 11 changes resolved. Safe to merge." and an edited value shown in violet](docs/viewer-resolved.png)
115
+ ![Banner reading "All 11 changes resolved. Safe to merge." with the chosen values marked in each pane](docs/viewer-resolved.png)
114
116
 
115
117
  ## The component
116
118
 
@@ -219,7 +221,7 @@ The variables are optional. If your CSS does not define one (you copied the file
219
221
 
220
222
  ### Tailwind v3.4 and v4
221
223
 
222
- The same file works with both. It only uses utilities that exist in both (typed arbitrary values such as `bg-[color:var(--_merge-modified)]`, `size-*`, no v4-only syntax) and computes the colour classes per cell in JavaScript, so there are no variant-order surprises. The registry test installs the component into a fresh Tailwind v3.4 project and a fresh v4 project, type-checks them and builds the CSS.
224
+ The same file works with both. It only uses utilities that exist in both (typed arbitrary values such as `bg-[color:var(--mcv-modified)]`, `size-*`, no v4-only syntax) and computes the colour classes per cell in JavaScript, so there are no variant-order surprises. The registry test installs the component into a fresh Tailwind v3.4 project and a fresh v4 project, type-checks them and builds the CSS.
223
225
 
224
226
  Tailwind v3 projects keep their theme in `tailwind.config.js`; the `--merge-*` variables are plain CSS variables referenced through arbitrary values, so nothing needs to be added to the config.
225
227
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ht-rnd/merge-conflict-viewer",
3
3
  "private": false,
4
- "version": "0.1.0",
4
+ "version": "1.0.1",
5
5
  "type": "module",
6
6
  "description": "Headless merge conflict viewer for JSON (React hooks and merge model), with a shadcn/ui registry component",
7
7
  "author": "ht-rnd",