From b3af73d02b305e390aa9abb0f62d8db854748473 Mon Sep 17 00:00:00 2001
From: krkarma777 <krkarma777@gmail.com>
Date: Mon, 31 Aug 2026 10:57:01 +0900
Subject: [PATCH] feat: Deploy demo to GitHub Pages, add refine/heuristic
 controls

---
 .github/workflows/pages.yml | 38 +++++++++++++++++++++++++++++++++++++
 .gitignore                  |  1 +
 README.md                   |  8 ++++++--
 demo/index.html             | 20 +++++++++++++++++--
 package.json                |  1 +
 5 files changed, 64 insertions(+), 4 deletions(-)
 create mode 100644 .github/workflows/pages.yml

diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
new file mode 100644
index 0000000..3ea4031
--- /dev/null
+++ b/.github/workflows/pages.yml
@@ -0,0 +1,38 @@
+name: Deploy demo
+
+on:
+  push:
+    branches: [master]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+      - run: npm ci
+      - run: npm run build
+      - run: cp dist/string-diff.min.js demo/
+      - uses: actions/configure-pages@v5
+        with:
+          enablement: true
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: demo
+      - id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
index 4a2ccea..2eed8bc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 node_modules/
 dist/
+demo/string-diff.min.js
 *.tsbuildinfo
 
 ### Docs ###
diff --git a/README.md b/README.md
index 20bce1d..e7cabe7 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 
 Fast **text diff** and **string comparison** library for JavaScript and TypeScript. Compare two strings by **word, character, or line** and get the guaranteed-shortest edit script (`equal` / `insert` / `delete`), powered by **Myers' O(ND) algorithm** on typed arrays. Zero dependencies, Unicode-safe (Korean, CJK, emoji), ~2.9 KB min+gzip in the browser.
 
-Use it for text comparison UIs, document revision history, editor change tracking, test output diffing, or anywhere you need to highlight the difference between two strings — in Node.js or any browser.
+Use it for text comparison UIs, document revision history, editor change tracking, test output diffing, or anywhere you need to highlight the difference between two strings — in Node.js or any browser. **[Try the live demo.](https://krkarma777.github.io/string-difference-finder/)**
 
 ## Features
 
@@ -127,8 +127,12 @@ Notes for fairness are in [`bench/compare.mjs`](bench/compare.mjs). For history:
 
 ## Demo
 
+Hosted: **[krkarma777.github.io/string-difference-finder](https://krkarma777.github.io/string-difference-finder/)** (deployed from `master` by CI).
+
+Locally:
+
 ```sh
-npm run build
+npm run demo
 open demo/index.html
 ```
 
diff --git a/demo/index.html b/demo/index.html
index 3122089..4e7fb91 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -68,6 +68,18 @@
     border-radius: 8px;
     font-size: 13px;
   }
+  label.opt {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 13px;
+    color: var(--muted);
+    text-transform: none;
+    letter-spacing: 0;
+    margin: 0;
+    cursor: pointer;
+  }
+  label.opt input { accent-color: var(--accent); }
   #time { color: var(--muted); font-size: 13px; }
   #result {
     background: var(--panel);
@@ -109,13 +121,15 @@ <h1><code>@krkarma777/string-diff</code> demo</h1>
       <option value="char">char</option>
       <option value="line">line</option>
     </select>
+    <label class="opt"><input type="checkbox" id="refine"> refine</label>
+    <label class="opt"><input type="checkbox" id="heuristic"> heuristic</label>
     <span id="time"></span>
   </div>
 
   <div id="result"><span class="empty">Press Compare to see the diff.</span></div>
 </main>
 
-<script src="../dist/string-diff.min.js"></script>
+<script src="./string-diff.min.js"></script>
 <script>
   const $ = id => document.getElementById(id);
 
@@ -123,9 +137,11 @@ <h1><code>@krkarma777/string-diff</code> demo</h1>
     const a = $('a').value;
     const b = $('b').value;
     const mode = $('mode').value;
+    const refine = $('refine').checked;
+    const heuristic = $('heuristic').checked;
 
     const t0 = performance.now();
-    const entries = StringDiff.diff(a, b, { mode });
+    const entries = StringDiff.diff(a, b, { mode, refine, heuristic });
     const elapsed = performance.now() - t0;
 
     const result = $('result');
diff --git a/package.json b/package.json
index 76b3b1f..52d5bbb 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "build": "tsup",
     "test": "node --test test/*.test.ts",
     "typecheck": "tsc --noEmit",
+    "demo": "npm run build && cp dist/string-diff.min.js demo/",
     "bench": "node bench/compare.mjs",
     "bench:legacy": "node bench/bench.mjs",
     "prepublishOnly": "npm run typecheck && npm test && npm run build"