util/gpu/web/shell.html - third_party/harfbuzz - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 <title>HarfBuzz GPU Demo</title>
 <script>
 if (location.pathname.indexOf('webgpu') !== -1)
   document.title = 'HarfBuzz WebGPU Demo';
 else
   document.title = 'HarfBuzz WebGL Demo';
 </script>
 <style>
   body { margin: 0; background: #fff; overflow: hidden; touch-action: none; }
   #loading { position: fixed; inset: 0; z-index: 100;
              display: flex; justify-content: center; align-items: center;
              background: #fff; color: #999; font: 32px monospace; }
   canvas { display: block; width: 100vw; height: 100vh; }
   #fps { position: fixed; top: 8px; right: 12px; color: #999;
          font: 14px monospace; pointer-events: none; z-index: 1; }
   #help { position: fixed; bottom: 12px; left: 12px; color: #999;
           font: 12px monospace; pointer-events: none; z-index: 1;
           line-height: 1.6; }
   #controls { position: fixed; top: 8px; left: 12px; z-index: 1;
               display: flex; gap: 6px; }
   @media (hover: none) { #controls { display: none; }
                          #help-desktop { display: none; } }
   @media (hover: hover)  { #help-mobile { display: none; } }
   #controls label { color: #fff; font: 12px monospace; cursor: pointer;
                     padding: 4px 8px; border: 1px solid #888; border-radius: 4px;
                     background: rgba(128,128,128,0.5);
                     text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
   #controls label:hover { border-color: #ccc; background: rgba(128,128,128,0.7); }
   #controls input[type=file] { display: none; }
   #controls button { color: #fff; font: 12px monospace; cursor: pointer;
                      padding: 4px 8px; border: 1px solid #888; border-radius: 4px;
                      background: rgba(128,128,128,0.5);
                      text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
   #controls button:hover { border-color: #ccc; background: rgba(128,128,128,0.7); }
   #controls select { color: #fff; font: 12px monospace; cursor: pointer;
                      padding: 3px 4px; border: 1px solid #888; border-radius: 4px;
                      background: rgba(128,128,128,0.5);
                      text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
   #drop-overlay { display: none; position: fixed; inset: 0; z-index: 10;
                   background: rgba(0,0,0,0.6); color: #fff;
                   font: 24px monospace; justify-content: center;
                   align-items: center; }
   #text-modal { display: none; position: fixed; inset: 0; z-index: 20;
                 background: rgba(0,0,0,0.7); justify-content: center;
                 align-items: center; }
   #text-modal-inner { background: #333; border: 1px solid #666; border-radius: 8px;
                       padding: 16px; width: 90vw; max-width: 1600px; }
   #text-modal textarea { width: 100%; height: 70vh; background: #222; color: #ccc;
                          border: 1px solid #555; border-radius: 4px;
                          font: 14px monospace; padding: 8px; resize: vertical;
                          outline: none; box-sizing: border-box; }
   #text-modal textarea:focus { border-color: #999; }
   #text-modal-buttons { margin-top: 10px; text-align: right; }
   #text-modal-buttons button { color: #fff; font: 13px monospace; cursor: pointer;
                                padding: 6px 16px; border: 1px solid #888;
                                border-radius: 4px; background: rgba(128,128,128,0.5);
                                margin-left: 8px; }
   #text-modal-buttons button:hover { border-color: #ccc; background: rgba(128,128,128,0.7); }
   #help-modal { display: none; position: fixed; inset: 0; z-index: 20;
                 background: rgba(0,0,0,0.7); justify-content: center;
                 align-items: center; }
   #help-modal pre { background: #333; color: #ccc; font: 14px monospace;
                     padding: 24px 32px; border-radius: 8px; border: 1px solid #666;
                     line-height: 1.8; }
 </style>
 </head>
 <body>
 <div id="loading">loading</div>
 <div id="fps"></div>
 <div id="controls">
   <label>font <input type="file" id="font-input" accept=".ttf,.otf"></label>
   <button id="text-btn">text</button>
   <select id="backend-sel">
     <option value="index.html">WebGL</option>
     <option value="webgpu.html">WebGPU</option>
   </select>
 </div>
 <div id="drop-overlay">drop font file</div>
 <div id="text-modal">
   <div id="text-modal-inner">
     <textarea id="text-area"></textarea>
     <div id="text-modal-buttons">
       <button id="text-cancel">cancel</button>
       <button id="text-apply">apply</button>
     </div>
   </div>
 </div>
 <div id="help-modal"><pre>
 Keyboard:                        Mouse:
   space     toggle animation       drag          pan
   b         dark mode              scroll        zoom
   g         gamma (2.2/none)       right-drag    rotate
   s         stem darkening         click         toggle animation
   d         debug heatmap          dblclick      reset view
   r         reset view             middle-drag   zoom
   =/-       zoom in/out
   [ ] { }   stretch              Touch:
   arrows    pan                    drag          pan
   h j k l   pan (vim)             pinch         zoom
   /         clean screen           3-finger      rotate
   ?         this help              tap           animate

 Shortcuts:                       Text editor:
   t         edit text              Ctrl+Enter    apply
   f         load font              Esc           cancel
   w         switch backend
   R         reload page                  <a href="https://github.com/harfbuzz/harfbuzz" style="color:#88f">HarfBuzz</a>
 </pre></div>
 <div id="help">
 <span id="help-desktop">drag: pan · scroll: zoom · click: animate · dblclick: reset · right-drag: rotate<br>
 space: animate · b: dark mode · g: gamma · s: stem · d: debug · r: reset · ?: help</span>
 <span id="help-mobile">drag: pan · pinch: zoom/rotate · 3-finger: 3D rotate<br>
 tap: animate · dbl-tap+drag: zoom · long-press: reset</span>
 </div>
 <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
 <script>
   var canvas = document.getElementById('canvas');
   function resizeCanvas () {
     var dpr = window.devicePixelRatio || 1;
     var width = Math.round(canvas.clientWidth * dpr);
     var height = Math.round(canvas.clientHeight * dpr);
     if (canvas.width !== width)
       canvas.width = width;
     if (canvas.height !== height)
       canvas.height = height;
   }
   function requestRedraw () {
     if (typeof _web_request_redraw === 'function')
       _web_request_redraw();
   }
   function handleResume () {
     resizeCanvas();
     requestRedraw();
   }
   resizeCanvas();
   window.addEventListener('resize', resizeCanvas);
   window.addEventListener('focus', handleResume);
   window.addEventListener('pageshow', handleResume);
   document.addEventListener('visibilitychange', function () {
     if (!document.hidden)
       handleResume();
   });
   canvas.addEventListener('webglcontextrestored', handleResume);

   /* Backend selector */
   var isWebGPU = location.pathname.indexOf('webgpu') !== -1;
   var backendSel = document.getElementById('backend-sel');
   if (isWebGPU)
     backendSel.value = 'webgpu.html';
   backendSel.addEventListener('change', function () {
     backendSel.blur();
     location.href = backendSel.value;
   });

   /* Early WebGL2 availability check */
   if (!isWebGPU && !canvas.getContext('webgl2')) {
     var el = document.getElementById('loading');
     el.innerHTML = 'WebGL2 not available.<br>' +
                    'Check that hardware acceleration is enabled in your browser settings.<br>' +
                    '<a href="https://webglreport.com/?v=2" style="color:#88f">WebGL2 support status</a>';
     el.style.font = '18px sans-serif';
     el.style.color = '#666';
     el.style.textAlign = 'center';
     el.style.flexDirection = 'column';
     window._webglError = true;
   }

   /* Early WebGPU availability check */
   if (isWebGPU && !navigator.gpu) {
     var el = document.getElementById('loading');
     var html = 'WebGPU not available in this browser.<br>' +
                '<a href="https://github.com/gpuweb/gpuweb/wiki/Implementation-Status" ' +
                'style="color:#88f">Browser support status</a>';
     if (navigator.userAgent.indexOf('Linux') !== -1 &&
         navigator.userAgent.indexOf('Chrome') !== -1)
       html += '<br><br>On Linux Chrome, try restarting with:<br>' +
               '<code style="font-size:13px">google-chrome --enable-unsafe-webgpu --ozone-platform=x11 ' +
               '--use-angle=vulkan --enable-features=Vulkan,VulkanFromANGLE</code>';
     el.innerHTML = html;
     el.style.font = '18px sans-serif';
     el.style.color = '#666';
     el.style.textAlign = 'center';
     el.style.flexDirection = 'column';
     window._webgpuError = true;
   }

   var fpsEl = document.getElementById('fps');
   var frames = 0, lastTime = performance.now();
   (function fpsLoop () {
     requestAnimationFrame(fpsLoop);
     frames++;
     var now = performance.now();
     if (now - lastTime >= 1000) {
       fpsEl.textContent = Math.round(frames * 1000 / (now - lastTime)) + ' fps';
       frames = 0;
       lastTime = now;
     }
   })();

   /* Multi-touch: 2-finger pinch → zoom, 3-finger drag → 3D rotate. */
   var pinchDist = 0;
   var pinchAngle = 0;
   var pinchCX = 0, pinchCY = 0;
   var gestureX = 0, gestureY = 0;
   var pinchActive = false;
   var singlePanActive = false;
   var threeFingerActive = false;
   var skipNextPinchMove = false;
   var longPressTimer = null;
   var longPressFired = false;
   var lastTapTime = 0;
   var doubleTapZoom = false;
   var doubleTapY = 0;
   function swallowTouch (e) {
     e.preventDefault();
     e.stopImmediatePropagation();
   }
   if (!isWebGPU) canvas.addEventListener('touchstart', function (e) {
     if (e.touches.length === 1) {
       var now = performance.now();
       if (now - lastTapTime < 300) {
         /* Double-tap: start zoom drag.
          * Undo animation toggle from first tap. */
         e.preventDefault();
         if (typeof _web_toggle_animation === 'function')
           _web_toggle_animation();
         doubleTapZoom = true;
         doubleTapY = e.touches[0].clientY;
         lastTapTime = 0;
         if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
       } else {
         lastTapTime = now;
         longPressX = e.touches[0].clientX;
         longPressY = e.touches[0].clientY;
         longPressTimer = setTimeout(function () {
           longPressTimer = null;
           longPressFired = true;
           if (typeof _web_reset === 'function') _web_reset();
         }, 500);
       }
     } else if (longPressTimer) {
       clearTimeout(longPressTimer);
       longPressTimer = null;
     }
     if (e.touches.length === 2) {
       swallowTouch(e);
       pinchActive = true;
       singlePanActive = false;
       var t = e.touches;
       pinchDist = Math.hypot(t[1].clientX - t[0].clientX,
                              t[1].clientY - t[0].clientY);
       pinchAngle = Math.atan2(t[1].clientY - t[0].clientY,
                               t[1].clientX - t[0].clientX);
       pinchCX = (t[0].clientX + t[1].clientX) / 2;
       pinchCY = (t[0].clientY + t[1].clientY) / 2;
       gestureX = pinchCX;
       gestureY = pinchCY;
       if (typeof _web_cancel_gesture === 'function')
         _web_cancel_gesture();
       canvas.dispatchEvent(new MouseEvent('mouseup', {
         button: 0, clientX: pinchCX, clientY: pinchCY
       }));
       skipNextPinchMove = false;
     } else if (e.touches.length >= 3) {
       swallowTouch(e);
       pinchActive = false;
       singlePanActive = false;
       threeFingerActive = true;
       skipNextPinchMove = false;
       var t = e.touches;
       var cx = (t[0].clientX + t[1].clientX + t[2].clientX) / 3;
       var cy = (t[0].clientY + t[1].clientY + t[2].clientY) / 3;
       gestureX = cx;
       gestureY = cy;
       if (typeof _web_cancel_gesture === 'function')
         _web_cancel_gesture();
       canvas.dispatchEvent(new MouseEvent('mouseup', {
         button: 0, clientX: cx, clientY: cy
       }));
       /* Synthesize right-button press at centroid */
       canvas.dispatchEvent(new MouseEvent('mousedown', {
         button: 2, clientX: cx, clientY: cy
       }));
     }
   }, {passive: false, capture: true});
   var longPressX = 0, longPressY = 0;
   if (!isWebGPU) canvas.addEventListener('touchmove', function (e) {
     if (singlePanActive && e.touches.length === 1) {
       swallowTouch(e);
       gestureX = e.touches[0].clientX;
       gestureY = e.touches[0].clientY;
       canvas.dispatchEvent(new MouseEvent('mousemove', {
         clientX: gestureX, clientY: gestureY
       }));
       return;
     }
     if (longPressTimer && e.touches.length === 1) {
       var dx = e.touches[0].clientX - longPressX;
       var dy = e.touches[0].clientY - longPressY;
       if (dx*dx + dy*dy > 100) { clearTimeout(longPressTimer); longPressTimer = null; }
     }
     if (doubleTapZoom && e.touches.length === 1) {
       swallowTouch(e);
       var dy = e.touches[0].clientY - doubleTapY;
       doubleTapY = e.touches[0].clientY;
       canvas.dispatchEvent(new WheelEvent('wheel', {
         deltaY: dy * 5,
         clientX: e.touches[0].clientX,
         clientY: e.touches[0].clientY
       }));
       return;
     }
     if (e.touches.length >= 3 && threeFingerActive) {
       swallowTouch(e);
       pinchActive = false;
       var t = e.touches;
       var cx = (t[0].clientX + t[1].clientX + t[2].clientX) / 3;
       var cy = (t[0].clientY + t[1].clientY + t[2].clientY) / 3;
       gestureX = cx;
       gestureY = cy;
       canvas.dispatchEvent(new MouseEvent('mousemove', {
         clientX: cx, clientY: cy
       }));
       return;
     }
     if (e.touches.length === 2) {
       swallowTouch(e);
       pinchActive = true;
       var t = e.touches;
       var cx = (t[0].clientX + t[1].clientX) / 2;
       var cy = (t[0].clientY + t[1].clientY) / 2;
       var dist = Math.hypot(t[1].clientX - t[0].clientX,
                             t[1].clientY - t[0].clientY);
       var angle = Math.atan2(t[1].clientY - t[0].clientY,
                              t[1].clientX - t[0].clientX);
       if (skipNextPinchMove) {
         pinchDist = dist;
         pinchAngle = angle;
         pinchCX = cx;
         pinchCY = cy;
         gestureX = cx;
         gestureY = cy;
         skipNextPinchMove = false;
         return;
       }
       var dAngle = angle - pinchAngle;
       if (dAngle > Math.PI) dAngle -= 2 * Math.PI;
       if (dAngle < -Math.PI) dAngle += 2 * Math.PI;
       var factor = pinchDist > 0 ? dist / pinchDist : 1;
       if (typeof _web_pinch === 'function')
         _web_pinch(cx - pinchCX, cy - pinchCY,
                    factor, dAngle,
                    cx, cy, canvas.clientWidth, canvas.clientHeight);
       else {
         /* Fallback: zoom only via wheel */
         var delta = (factor - 1) * 5;
         canvas.dispatchEvent(new WheelEvent('wheel', { deltaY: -delta * 120 }));
       }
       pinchDist = dist;
       pinchAngle = angle;
       pinchCX = cx; pinchCY = cy;
       gestureX = cx;
       gestureY = cy;
     }
   }, {passive: false, capture: true});
   if (!isWebGPU) canvas.addEventListener('touchend', function (e) {
     var pinchEnding = pinchActive && e.touches.length < 2;
     var singlePanEnding = singlePanActive && e.touches.length === 0;
     if (threeFingerActive || pinchEnding || singlePanEnding ||
         skipNextPinchMove ||
         e.touches.length >= 2 || doubleTapZoom)
       swallowTouch(e);
     if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
     if (longPressFired) {
       longPressFired = false;
       e.preventDefault(); /* Don't let GLFW see this as a click */
     }
     doubleTapZoom = false;
     if (threeFingerActive && e.touches.length < 3) {
       threeFingerActive = false;
       var releaseX = gestureX, releaseY = gestureY;
       if (e.touches.length === 2) {
         var t = e.touches;
         releaseX = (t[0].clientX + t[1].clientX) / 2;
         releaseY = (t[0].clientY + t[1].clientY) / 2;
         pinchDist = Math.hypot(t[1].clientX - t[0].clientX,
                                t[1].clientY - t[0].clientY);
         pinchAngle = Math.atan2(t[1].clientY - t[0].clientY,
                                 t[1].clientX - t[0].clientX);
         pinchCX = releaseX;
         pinchCY = releaseY;
         gestureX = releaseX;
         gestureY = releaseY;
         pinchActive = true;
         skipNextPinchMove = true;
       } else {
         pinchActive = false;
         skipNextPinchMove = false;
       }
       if (typeof _web_cancel_gesture === 'function')
         _web_cancel_gesture();
       canvas.dispatchEvent(new MouseEvent('mouseup', {
         button: 2, clientX: releaseX, clientY: releaseY
       }));
     } else if (pinchEnding) {
       pinchActive = false;
       skipNextPinchMove = false;
       if (e.touches.length === 1) {
         /* Hand single-finger pan off from the remaining touch point. */
         singlePanActive = true;
         gestureX = e.touches[0].clientX;
         gestureY = e.touches[0].clientY;
         canvas.dispatchEvent(new MouseEvent('mousemove', {
           clientX: gestureX,
           clientY: gestureY
         }));
         canvas.dispatchEvent(new MouseEvent('mousedown', {
           button: 0,
           clientX: gestureX,
           clientY: gestureY
         }));
       }
     } else if (singlePanEnding) {
       singlePanActive = false;
       if (typeof _web_cancel_gesture === 'function')
         _web_cancel_gesture();
       canvas.dispatchEvent(new MouseEvent('mouseup', {
         button: 0, clientX: gestureX, clientY: gestureY
       }));
     } else if (e.touches.length < 2) {
       skipNextPinchMove = false;
     }
   }, {passive: false, capture: true});
   if (!isWebGPU) canvas.addEventListener('touchcancel', function (e) {
     var handledGesture = threeFingerActive || pinchActive ||
                          singlePanActive ||
                          skipNextPinchMove ||
                          e.touches.length >= 2 || doubleTapZoom;
     if (handledGesture)
       swallowTouch(e);
     if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
     longPressFired = false;
     doubleTapZoom = false;
     pinchActive = false;
     if (singlePanActive) {
       singlePanActive = false;
       if (typeof _web_cancel_gesture === 'function')
         _web_cancel_gesture();
       canvas.dispatchEvent(new MouseEvent('mouseup', {
         button: 0, clientX: gestureX, clientY: gestureY
       }));
     }
     skipNextPinchMove = false;
     if (threeFingerActive) {
       threeFingerActive = false;
       if (typeof _web_cancel_gesture === 'function')
         _web_cancel_gesture();
       canvas.dispatchEvent(new MouseEvent('mouseup', {
         button: 2, clientX: gestureX, clientY: gestureY
       }));
     }
   }, {passive: false, capture: true});

   /* Block Emscripten/GLFW from eating key events while the text modal is open.
    * Registered before Module so it runs before Emscripten's capture-phase handlers. */
   var textModalEl = document.getElementById('text-modal');
   function blockKeysIfModal(e) {
     if (textModalEl.style.display !== 'flex') {
       if (e.key === '?') {
         if (e.type === 'keydown') {
           var hm = document.getElementById('help-modal');
           hm.style.display = hm.style.display === 'flex' ? 'none' : 'flex';
         }
         e.preventDefault();
         e.stopImmediatePropagation();
         return;
       }
       if (e.key === '/') {
         if (e.type === 'keydown') {
           var h = document.getElementById('help');
           var fp = document.getElementById('fps');
           var c = document.getElementById('controls');
           var hidden = h.style.display === 'none';
           h.style.display = hidden ? '' : 'none';
           fp.style.display = hidden ? '' : 'none';
           if (c) c.style.display = hidden ? '' : 'none';
         }
         e.preventDefault();
         e.stopImmediatePropagation();
         return;
       }
       if (e.key === 'Escape') {
         var hm = document.getElementById('help-modal');
         if (hm.style.display === 'flex') {
           hm.style.display = 'none';
           e.stopImmediatePropagation();
           return;
         }
       }
       if (e.key === 'R') {
         location.reload();
         return;
       }
       if (e.key === 't') {
         e.preventDefault();
         if (e.type === 'keydown')
           document.getElementById('text-btn').click();
         e.stopImmediatePropagation();
         return;
       }
       if (e.type === 'keydown' && e.key === 'f') {
         document.getElementById('font-input').click();
         e.stopImmediatePropagation();
       }
       if (e.type === 'keydown' && e.key === 'w') {
         var sel = document.getElementById('backend-sel');
         sel.value = sel.value === 'webgpu.html' ? 'index.html' : 'webgpu.html';
         location.href = sel.value;
         e.stopImmediatePropagation();
       }
       return;
     }
     if (e.key === 'Escape') { textModalEl.style.display = 'none'; e.stopImmediatePropagation(); return; }
     if (e.key === 'Enter' && (e.shiftKey || e.ctrlKey || e.metaKey)) {
       document.getElementById('text-apply').click();
       e.stopImmediatePropagation(); return;
     }
     e.stopImmediatePropagation();
   }
   window.addEventListener('keydown', blockKeysIfModal, true);
   window.addEventListener('keyup', blockKeysIfModal, true);
   window.addEventListener('keypress', blockKeysIfModal, true);

   var Module = {
     canvas: canvas,
     onRuntimeInitialized: function () {
       if (!window._webgpuError && !window._webglError) {
         document.getElementById('loading').style.display = 'none';
         document.body.style.background = '#222';
       }
       console.log('HarfBuzz GPU Demo loaded');

       /* Font file input */
       var fontInput = document.getElementById('font-input');
       fontInput.addEventListener('change', function () {
         if (fontInput.files.length)
           loadFontFile(fontInput.files[0]);
       });

       /* Drag and drop */
       var overlay = document.getElementById('drop-overlay');
       document.addEventListener('dragover', function (e) {
         e.preventDefault();
         overlay.style.display = 'flex';
       });
       document.addEventListener('dragleave', function (e) {
         if (e.relatedTarget === null)
           overlay.style.display = 'none';
       });
       document.addEventListener('drop', function (e) {
         e.preventDefault();
         overlay.style.display = 'none';
         if (e.dataTransfer.files.length)
           loadFontFile(e.dataTransfer.files[0]);
       });

       /* Text editor modal */
       var textModal = document.getElementById('text-modal');
       var textArea = document.getElementById('text-area');
       var textBtn = document.getElementById('text-btn');

       textBtn.addEventListener('click', function () {
         var ptr = _web_get_text();
         textArea.value = UTF8ToString(ptr);
         textModal.style.display = 'flex';
         textArea.focus();
       });

       document.getElementById('text-cancel').addEventListener('click', function () {
         textModal.style.display = 'none';
       });

       document.getElementById('text-apply').addEventListener('click', function () {
         var text = textArea.value.trim();
         if (!text) { textModal.style.display = 'none'; return; }
         var len = lengthBytesUTF8(text) + 1;
         var buf = _malloc(len);
         stringToUTF8(text, buf, len);
         _web_set_text(buf);
         _free(buf);
         textModal.style.display = 'none';
       });


       /* Prevent mouse events on the modal from reaching the canvas/GLFW. */
       textModal.addEventListener('mousedown', function (e) { e.stopPropagation(); });
       textModal.addEventListener('mouseup', function (e) { e.stopPropagation(); });
       textModal.addEventListener('click', function (e) { e.stopPropagation(); });

       function loadFontFile(file) {
         var reader = new FileReader();
         reader.onload = function () {
           var data = new Uint8Array(reader.result);
           var buf = _malloc(data.length);
           HEAPU8.set(data, buf);
           _web_load_font(buf, data.length);
           _free(buf);
         };
         reader.readAsArrayBuffer(file);
       }
     }
   };
 </script>
 {{{ SCRIPT }}}
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>HarfBuzz GPU Demo</title>
	<script>
	if (location.pathname.indexOf('webgpu') !== -1)
	document.title = 'HarfBuzz WebGPU Demo';
	else
	document.title = 'HarfBuzz WebGL Demo';
	</script>
	<style>
	body { margin: 0; background: #fff; overflow: hidden; touch-action: none; }
	#loading { position: fixed; inset: 0; z-index: 100;
	display: flex; justify-content: center; align-items: center;
	background: #fff; color: #999; font: 32px monospace; }
	canvas { display: block; width: 100vw; height: 100vh; }
	#fps { position: fixed; top: 8px; right: 12px; color: #999;
	font: 14px monospace; pointer-events: none; z-index: 1; }
	#help { position: fixed; bottom: 12px; left: 12px; color: #999;
	font: 12px monospace; pointer-events: none; z-index: 1;
	line-height: 1.6; }
	#controls { position: fixed; top: 8px; left: 12px; z-index: 1;
	display: flex; gap: 6px; }
	@media (hover: none) { #controls { display: none; }
	#help-desktop { display: none; } }
	@media (hover: hover) { #help-mobile { display: none; } }
	#controls label { color: #fff; font: 12px monospace; cursor: pointer;
	padding: 4px 8px; border: 1px solid #888; border-radius: 4px;
	background: rgba(128,128,128,0.5);
	text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
	#controls label:hover { border-color: #ccc; background: rgba(128,128,128,0.7); }
	#controls input[type=file] { display: none; }
	#controls button { color: #fff; font: 12px monospace; cursor: pointer;
	padding: 4px 8px; border: 1px solid #888; border-radius: 4px;
	background: rgba(128,128,128,0.5);
	text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
	#controls button:hover { border-color: #ccc; background: rgba(128,128,128,0.7); }
	#controls select { color: #fff; font: 12px monospace; cursor: pointer;
	padding: 3px 4px; border: 1px solid #888; border-radius: 4px;
	background: rgba(128,128,128,0.5);
	text-shadow: 0 1px 2px rgba(0,0,0,0.8); }
	#drop-overlay { display: none; position: fixed; inset: 0; z-index: 10;
	background: rgba(0,0,0,0.6); color: #fff;
	font: 24px monospace; justify-content: center;
	align-items: center; }
	#text-modal { display: none; position: fixed; inset: 0; z-index: 20;
	background: rgba(0,0,0,0.7); justify-content: center;
	align-items: center; }
	#text-modal-inner { background: #333; border: 1px solid #666; border-radius: 8px;
	padding: 16px; width: 90vw; max-width: 1600px; }
	#text-modal textarea { width: 100%; height: 70vh; background: #222; color: #ccc;
	border: 1px solid #555; border-radius: 4px;
	font: 14px monospace; padding: 8px; resize: vertical;
	outline: none; box-sizing: border-box; }
	#text-modal textarea:focus { border-color: #999; }
	#text-modal-buttons { margin-top: 10px; text-align: right; }
	#text-modal-buttons button { color: #fff; font: 13px monospace; cursor: pointer;
	padding: 6px 16px; border: 1px solid #888;
	border-radius: 4px; background: rgba(128,128,128,0.5);
	margin-left: 8px; }
	#text-modal-buttons button:hover { border-color: #ccc; background: rgba(128,128,128,0.7); }
	#help-modal { display: none; position: fixed; inset: 0; z-index: 20;
	background: rgba(0,0,0,0.7); justify-content: center;
	align-items: center; }
	#help-modal pre { background: #333; color: #ccc; font: 14px monospace;
	padding: 24px 32px; border-radius: 8px; border: 1px solid #666;
	line-height: 1.8; }
	</style>
	</head>
	<body>
	<div id="loading">loading</div>
	<div id="fps"></div>
	<div id="controls">
	<label>font <input type="file" id="font-input" accept=".ttf,.otf"></label>
	<button id="text-btn">text</button>
	<select id="backend-sel">
	<option value="index.html">WebGL</option>
	<option value="webgpu.html">WebGPU</option>
	</select>
	</div>
	<div id="drop-overlay">drop font file</div>
	<div id="text-modal">
	<div id="text-modal-inner">
	<textarea id="text-area"></textarea>
	<div id="text-modal-buttons">
	<button id="text-cancel">cancel</button>
	<button id="text-apply">apply</button>
	</div>
	</div>
	</div>
	<div id="help-modal"><pre>
	Keyboard: Mouse:
	space toggle animation drag pan
	b dark mode scroll zoom
	g gamma (2.2/none) right-drag rotate
	s stem darkening click toggle animation
	d debug heatmap dblclick reset view
	r reset view middle-drag zoom
	=/- zoom in/out
	[ ] { } stretch Touch:
	arrows pan drag pan
	h j k l pan (vim) pinch zoom
	/ clean screen 3-finger rotate
	? this help tap animate

	Shortcuts: Text editor:
	t edit text Ctrl+Enter apply
	f load font Esc cancel
	w switch backend
	R reload page <a href="https://github.com/harfbuzz/harfbuzz" style="color:#88f">HarfBuzz</a>
	</pre></div>
	<div id="help">
	<span id="help-desktop">drag: pan · scroll: zoom · click: animate · dblclick: reset · right-drag: rotate<br>
	space: animate · b: dark mode · g: gamma · s: stem · d: debug · r: reset · ?: help</span>
	<span id="help-mobile">drag: pan · pinch: zoom/rotate · 3-finger: 3D rotate<br>
	tap: animate · dbl-tap+drag: zoom · long-press: reset</span>
	</div>
	<canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex="-1"></canvas>
	<script>
	var canvas = document.getElementById('canvas');
	function resizeCanvas () {
	var dpr = window.devicePixelRatio \|\| 1;
	var width = Math.round(canvas.clientWidth * dpr);
	var height = Math.round(canvas.clientHeight * dpr);
	if (canvas.width !== width)
	canvas.width = width;
	if (canvas.height !== height)
	canvas.height = height;
	}
	function requestRedraw () {
	if (typeof _web_request_redraw === 'function')
	_web_request_redraw();
	}
	function handleResume () {
	resizeCanvas();
	requestRedraw();
	}
	resizeCanvas();
	window.addEventListener('resize', resizeCanvas);
	window.addEventListener('focus', handleResume);
	window.addEventListener('pageshow', handleResume);
	document.addEventListener('visibilitychange', function () {
	if (!document.hidden)
	handleResume();
	});
	canvas.addEventListener('webglcontextrestored', handleResume);

	/* Backend selector */
	var isWebGPU = location.pathname.indexOf('webgpu') !== -1;
	var backendSel = document.getElementById('backend-sel');
	if (isWebGPU)
	backendSel.value = 'webgpu.html';
	backendSel.addEventListener('change', function () {
	backendSel.blur();
	location.href = backendSel.value;
	});

	/* Early WebGL2 availability check */
	if (!isWebGPU && !canvas.getContext('webgl2')) {
	var el = document.getElementById('loading');
	el.innerHTML = 'WebGL2 not available.<br>' +
	'Check that hardware acceleration is enabled in your browser settings.<br>' +
	'<a href="https://webglreport.com/?v=2" style="color:#88f">WebGL2 support status</a>';
	el.style.font = '18px sans-serif';
	el.style.color = '#666';
	el.style.textAlign = 'center';
	el.style.flexDirection = 'column';
	window._webglError = true;
	}

	/* Early WebGPU availability check */
	if (isWebGPU && !navigator.gpu) {
	var el = document.getElementById('loading');
	var html = 'WebGPU not available in this browser.<br>' +
	'<a href="https://github.com/gpuweb/gpuweb/wiki/Implementation-Status" ' +
	'style="color:#88f">Browser support status</a>';
	if (navigator.userAgent.indexOf('Linux') !== -1 &&
	navigator.userAgent.indexOf('Chrome') !== -1)
	html += '<br><br>On Linux Chrome, try restarting with:<br>' +
	'<code style="font-size:13px">google-chrome --enable-unsafe-webgpu --ozone-platform=x11 ' +
	'--use-angle=vulkan --enable-features=Vulkan,VulkanFromANGLE</code>';
	el.innerHTML = html;
	el.style.font = '18px sans-serif';
	el.style.color = '#666';
	el.style.textAlign = 'center';
	el.style.flexDirection = 'column';
	window._webgpuError = true;
	}

	var fpsEl = document.getElementById('fps');
	var frames = 0, lastTime = performance.now();
	(function fpsLoop () {
	requestAnimationFrame(fpsLoop);
	frames++;
	var now = performance.now();
	if (now - lastTime >= 1000) {
	fpsEl.textContent = Math.round(frames * 1000 / (now - lastTime)) + ' fps';
	frames = 0;
	lastTime = now;
	}
	})();

	/* Multi-touch: 2-finger pinch → zoom, 3-finger drag → 3D rotate. */
	var pinchDist = 0;
	var pinchAngle = 0;
	var pinchCX = 0, pinchCY = 0;
	var gestureX = 0, gestureY = 0;
	var pinchActive = false;
	var singlePanActive = false;
	var threeFingerActive = false;
	var skipNextPinchMove = false;
	var longPressTimer = null;
	var longPressFired = false;
	var lastTapTime = 0;
	var doubleTapZoom = false;
	var doubleTapY = 0;
	function swallowTouch (e) {
	e.preventDefault();
	e.stopImmediatePropagation();
	}
	if (!isWebGPU) canvas.addEventListener('touchstart', function (e) {
	if (e.touches.length === 1) {
	var now = performance.now();
	if (now - lastTapTime < 300) {
	/* Double-tap: start zoom drag.
	* Undo animation toggle from first tap. */
	e.preventDefault();
	if (typeof _web_toggle_animation === 'function')
	_web_toggle_animation();
	doubleTapZoom = true;
	doubleTapY = e.touches[0].clientY;
	lastTapTime = 0;
	if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
	} else {
	lastTapTime = now;
	longPressX = e.touches[0].clientX;
	longPressY = e.touches[0].clientY;
	longPressTimer = setTimeout(function () {
	longPressTimer = null;
	longPressFired = true;
	if (typeof _web_reset === 'function') _web_reset();
	}, 500);
	}
	} else if (longPressTimer) {
	clearTimeout(longPressTimer);
	longPressTimer = null;
	}
	if (e.touches.length === 2) {
	swallowTouch(e);
	pinchActive = true;
	singlePanActive = false;
	var t = e.touches;
	pinchDist = Math.hypot(t[1].clientX - t[0].clientX,
	t[1].clientY - t[0].clientY);
	pinchAngle = Math.atan2(t[1].clientY - t[0].clientY,
	t[1].clientX - t[0].clientX);
	pinchCX = (t[0].clientX + t[1].clientX) / 2;
	pinchCY = (t[0].clientY + t[1].clientY) / 2;
	gestureX = pinchCX;
	gestureY = pinchCY;
	if (typeof _web_cancel_gesture === 'function')
	_web_cancel_gesture();
	canvas.dispatchEvent(new MouseEvent('mouseup', {
	button: 0, clientX: pinchCX, clientY: pinchCY
	}));
	skipNextPinchMove = false;
	} else if (e.touches.length >= 3) {
	swallowTouch(e);
	pinchActive = false;
	singlePanActive = false;
	threeFingerActive = true;
	skipNextPinchMove = false;
	var t = e.touches;
	var cx = (t[0].clientX + t[1].clientX + t[2].clientX) / 3;
	var cy = (t[0].clientY + t[1].clientY + t[2].clientY) / 3;
	gestureX = cx;
	gestureY = cy;
	if (typeof _web_cancel_gesture === 'function')
	_web_cancel_gesture();
	canvas.dispatchEvent(new MouseEvent('mouseup', {
	button: 0, clientX: cx, clientY: cy
	}));
	/* Synthesize right-button press at centroid */
	canvas.dispatchEvent(new MouseEvent('mousedown', {
	button: 2, clientX: cx, clientY: cy
	}));
	}
	}, {passive: false, capture: true});
	var longPressX = 0, longPressY = 0;
	if (!isWebGPU) canvas.addEventListener('touchmove', function (e) {
	if (singlePanActive && e.touches.length === 1) {
	swallowTouch(e);
	gestureX = e.touches[0].clientX;
	gestureY = e.touches[0].clientY;
	canvas.dispatchEvent(new MouseEvent('mousemove', {
	clientX: gestureX, clientY: gestureY
	}));
	return;
	}
	if (longPressTimer && e.touches.length === 1) {
	var dx = e.touches[0].clientX - longPressX;
	var dy = e.touches[0].clientY - longPressY;
	if (dxdx + dydy > 100) { clearTimeout(longPressTimer); longPressTimer = null; }
	}
	if (doubleTapZoom && e.touches.length === 1) {
	swallowTouch(e);
	var dy = e.touches[0].clientY - doubleTapY;
	doubleTapY = e.touches[0].clientY;
	canvas.dispatchEvent(new WheelEvent('wheel', {
	deltaY: dy * 5,
	clientX: e.touches[0].clientX,
	clientY: e.touches[0].clientY
	}));
	return;
	}
	if (e.touches.length >= 3 && threeFingerActive) {
	swallowTouch(e);
	pinchActive = false;
	var t = e.touches;
	var cx = (t[0].clientX + t[1].clientX + t[2].clientX) / 3;
	var cy = (t[0].clientY + t[1].clientY + t[2].clientY) / 3;
	gestureX = cx;
	gestureY = cy;
	canvas.dispatchEvent(new MouseEvent('mousemove', {
	clientX: cx, clientY: cy
	}));
	return;
	}
	if (e.touches.length === 2) {
	swallowTouch(e);
	pinchActive = true;
	var t = e.touches;
	var cx = (t[0].clientX + t[1].clientX) / 2;
	var cy = (t[0].clientY + t[1].clientY) / 2;
	var dist = Math.hypot(t[1].clientX - t[0].clientX,
	t[1].clientY - t[0].clientY);
	var angle = Math.atan2(t[1].clientY - t[0].clientY,
	t[1].clientX - t[0].clientX);
	if (skipNextPinchMove) {
	pinchDist = dist;
	pinchAngle = angle;
	pinchCX = cx;
	pinchCY = cy;
	gestureX = cx;
	gestureY = cy;
	skipNextPinchMove = false;
	return;
	}
	var dAngle = angle - pinchAngle;
	if (dAngle > Math.PI) dAngle -= 2 * Math.PI;
	if (dAngle < -Math.PI) dAngle += 2 * Math.PI;
	var factor = pinchDist > 0 ? dist / pinchDist : 1;
	if (typeof _web_pinch === 'function')
	_web_pinch(cx - pinchCX, cy - pinchCY,
	factor, dAngle,
	cx, cy, canvas.clientWidth, canvas.clientHeight);
	else {
	/* Fallback: zoom only via wheel */
	var delta = (factor - 1) * 5;
	canvas.dispatchEvent(new WheelEvent('wheel', { deltaY: -delta * 120 }));
	}
	pinchDist = dist;
	pinchAngle = angle;
	pinchCX = cx; pinchCY = cy;
	gestureX = cx;
	gestureY = cy;
	}
	}, {passive: false, capture: true});
	if (!isWebGPU) canvas.addEventListener('touchend', function (e) {
	var pinchEnding = pinchActive && e.touches.length < 2;
	var singlePanEnding = singlePanActive && e.touches.length === 0;
	if (threeFingerActive \|\| pinchEnding \|\| singlePanEnding \|\|
	skipNextPinchMove \|\|
	e.touches.length >= 2 \|\| doubleTapZoom)
	swallowTouch(e);
	if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
	if (longPressFired) {
	longPressFired = false;
	e.preventDefault(); /* Don't let GLFW see this as a click */
	}
	doubleTapZoom = false;
	if (threeFingerActive && e.touches.length < 3) {
	threeFingerActive = false;
	var releaseX = gestureX, releaseY = gestureY;
	if (e.touches.length === 2) {
	var t = e.touches;
	releaseX = (t[0].clientX + t[1].clientX) / 2;
	releaseY = (t[0].clientY + t[1].clientY) / 2;
	pinchDist = Math.hypot(t[1].clientX - t[0].clientX,
	t[1].clientY - t[0].clientY);
	pinchAngle = Math.atan2(t[1].clientY - t[0].clientY,
	t[1].clientX - t[0].clientX);
	pinchCX = releaseX;
	pinchCY = releaseY;
	gestureX = releaseX;
	gestureY = releaseY;
	pinchActive = true;
	skipNextPinchMove = true;
	} else {
	pinchActive = false;
	skipNextPinchMove = false;
	}
	if (typeof _web_cancel_gesture === 'function')
	_web_cancel_gesture();
	canvas.dispatchEvent(new MouseEvent('mouseup', {
	button: 2, clientX: releaseX, clientY: releaseY
	}));
	} else if (pinchEnding) {
	pinchActive = false;
	skipNextPinchMove = false;
	if (e.touches.length === 1) {
	/* Hand single-finger pan off from the remaining touch point. */
	singlePanActive = true;
	gestureX = e.touches[0].clientX;
	gestureY = e.touches[0].clientY;
	canvas.dispatchEvent(new MouseEvent('mousemove', {
	clientX: gestureX,
	clientY: gestureY
	}));
	canvas.dispatchEvent(new MouseEvent('mousedown', {
	button: 0,
	clientX: gestureX,
	clientY: gestureY
	}));
	}
	} else if (singlePanEnding) {
	singlePanActive = false;
	if (typeof _web_cancel_gesture === 'function')
	_web_cancel_gesture();
	canvas.dispatchEvent(new MouseEvent('mouseup', {
	button: 0, clientX: gestureX, clientY: gestureY
	}));
	} else if (e.touches.length < 2) {
	skipNextPinchMove = false;
	}
	}, {passive: false, capture: true});
	if (!isWebGPU) canvas.addEventListener('touchcancel', function (e) {
	var handledGesture = threeFingerActive \|\| pinchActive \|\|
	singlePanActive \|\|
	skipNextPinchMove \|\|
	e.touches.length >= 2 \|\| doubleTapZoom;
	if (handledGesture)
	swallowTouch(e);
	if (longPressTimer) { clearTimeout(longPressTimer); longPressTimer = null; }
	longPressFired = false;
	doubleTapZoom = false;
	pinchActive = false;
	if (singlePanActive) {
	singlePanActive = false;
	if (typeof _web_cancel_gesture === 'function')
	_web_cancel_gesture();
	canvas.dispatchEvent(new MouseEvent('mouseup', {
	button: 0, clientX: gestureX, clientY: gestureY
	}));
	}
	skipNextPinchMove = false;
	if (threeFingerActive) {
	threeFingerActive = false;
	if (typeof _web_cancel_gesture === 'function')
	_web_cancel_gesture();
	canvas.dispatchEvent(new MouseEvent('mouseup', {
	button: 2, clientX: gestureX, clientY: gestureY
	}));
	}
	}, {passive: false, capture: true});

	/* Block Emscripten/GLFW from eating key events while the text modal is open.
	* Registered before Module so it runs before Emscripten's capture-phase handlers. */
	var textModalEl = document.getElementById('text-modal');
	function blockKeysIfModal(e) {
	if (textModalEl.style.display !== 'flex') {
	if (e.key === '?') {
	if (e.type === 'keydown') {
	var hm = document.getElementById('help-modal');
	hm.style.display = hm.style.display === 'flex' ? 'none' : 'flex';
	}
	e.preventDefault();
	e.stopImmediatePropagation();
	return;
	}
	if (e.key === '/') {
	if (e.type === 'keydown') {
	var h = document.getElementById('help');
	var fp = document.getElementById('fps');
	var c = document.getElementById('controls');
	var hidden = h.style.display === 'none';
	h.style.display = hidden ? '' : 'none';
	fp.style.display = hidden ? '' : 'none';
	if (c) c.style.display = hidden ? '' : 'none';
	}
	e.preventDefault();
	e.stopImmediatePropagation();
	return;
	}
	if (e.key === 'Escape') {
	var hm = document.getElementById('help-modal');
	if (hm.style.display === 'flex') {
	hm.style.display = 'none';
	e.stopImmediatePropagation();
	return;
	}
	}
	if (e.key === 'R') {
	location.reload();
	return;
	}
	if (e.key === 't') {
	e.preventDefault();
	if (e.type === 'keydown')
	document.getElementById('text-btn').click();
	e.stopImmediatePropagation();
	return;
	}
	if (e.type === 'keydown' && e.key === 'f') {
	document.getElementById('font-input').click();
	e.stopImmediatePropagation();
	}
	if (e.type === 'keydown' && e.key === 'w') {
	var sel = document.getElementById('backend-sel');
	sel.value = sel.value === 'webgpu.html' ? 'index.html' : 'webgpu.html';
	location.href = sel.value;
	e.stopImmediatePropagation();
	}
	return;
	}
	if (e.key === 'Escape') { textModalEl.style.display = 'none'; e.stopImmediatePropagation(); return; }
	if (e.key === 'Enter' && (e.shiftKey \|\| e.ctrlKey \|\| e.metaKey)) {
	document.getElementById('text-apply').click();
	e.stopImmediatePropagation(); return;
	}
	e.stopImmediatePropagation();
	}
	window.addEventListener('keydown', blockKeysIfModal, true);
	window.addEventListener('keyup', blockKeysIfModal, true);
	window.addEventListener('keypress', blockKeysIfModal, true);

	var Module = {
	canvas: canvas,
	onRuntimeInitialized: function () {
	if (!window._webgpuError && !window._webglError) {
	document.getElementById('loading').style.display = 'none';
	document.body.style.background = '#222';
	}
	console.log('HarfBuzz GPU Demo loaded');

	/* Font file input */
	var fontInput = document.getElementById('font-input');
	fontInput.addEventListener('change', function () {
	if (fontInput.files.length)
	loadFontFile(fontInput.files[0]);
	});

	/* Drag and drop */
	var overlay = document.getElementById('drop-overlay');
	document.addEventListener('dragover', function (e) {
	e.preventDefault();
	overlay.style.display = 'flex';
	});
	document.addEventListener('dragleave', function (e) {
	if (e.relatedTarget === null)
	overlay.style.display = 'none';
	});
	document.addEventListener('drop', function (e) {
	e.preventDefault();
	overlay.style.display = 'none';
	if (e.dataTransfer.files.length)
	loadFontFile(e.dataTransfer.files[0]);
	});

	/* Text editor modal */
	var textModal = document.getElementById('text-modal');
	var textArea = document.getElementById('text-area');
	var textBtn = document.getElementById('text-btn');

	textBtn.addEventListener('click', function () {
	var ptr = _web_get_text();
	textArea.value = UTF8ToString(ptr);
	textModal.style.display = 'flex';
	textArea.focus();
	});

	document.getElementById('text-cancel').addEventListener('click', function () {
	textModal.style.display = 'none';
	});

	document.getElementById('text-apply').addEventListener('click', function () {
	var text = textArea.value.trim();
	if (!text) { textModal.style.display = 'none'; return; }
	var len = lengthBytesUTF8(text) + 1;
	var buf = _malloc(len);
	stringToUTF8(text, buf, len);
	_web_set_text(buf);
	_free(buf);
	textModal.style.display = 'none';
	});


	/* Prevent mouse events on the modal from reaching the canvas/GLFW. */
	textModal.addEventListener('mousedown', function (e) { e.stopPropagation(); });
	textModal.addEventListener('mouseup', function (e) { e.stopPropagation(); });
	textModal.addEventListener('click', function (e) { e.stopPropagation(); });

	function loadFontFile(file) {
	var reader = new FileReader();
	reader.onload = function () {
	var data = new Uint8Array(reader.result);
	var buf = _malloc(data.length);
	HEAPU8.set(data, buf);
	_web_load_font(buf, data.length);
	_free(buf);
	};
	reader.readAsArrayBuffer(file);
	}
	}
	};
	</script>
	{{{ SCRIPT }}}
	</body>
	</html>