Add Dazzle print server integration to ZPL renderer

[BrianLeishman]

Summary

Add the ability to print directly to a physical thermal printer from the GitHub Pages ZPL renderer via the Dazzle print server, alongside the existing browser print dialog.

Current State

The site currently has a single Print button (site/layouts/index.html) that opens a browser print dialog via window.print() / popup window (site/assets/js/app.js:1025-1099). This prints a rasterized image of the label through the OS print system, which loses the native ZPL—thermal printers receive a bitmap instead of vector ZPL commands.

Proposed Changes

1. Use the dazzle-zpl npm client library

There's already an npm package dazzle-zpl that handles all the Dazzle server communication, including status polling and binary-safe ZPL transmission. The integration would look something like:

import { Dazzle } from 'dazzle-zpl';

const dazzle = new Dazzle(); // defaults to localhost:29100

// Watch for server availability (polls every 5s, fires on change)
dazzle.watch((running) => {
  dazzlePrintBtn.classList.toggle('d-none', !running);
  dazzleBanner.classList.toggle('d-none', running);
});

// Print raw ZPL from the editor
dazzlePrintBtn.addEventListener('click', async () => {
  const zpl = editor.getValue();
  await dazzle.print(zpl);
});

The library's watch() method handles the polling/status detection, print() handles base64 encoding automatically, and printers() can optionally let users pick a target printer.

2. "Print with Dazzle" button

Add a second button (or a split/dropdown on the existing Print button) that sends the raw ZPL text directly to the Dazzle print server. This preserves the native ZPL commands so the thermal printer gets vector data instead of a rasterized bitmap.

3. Dazzle status indicator / download prompt

When Dazzle is not running (detected via the watch() callback), show an informational alert near the Print area—something like a Bootstrap-style alert-info or a small (i) icon that says:

Print directly to your thermal printer — Download Dazzle, a free cross-platform ZPL print server, to send labels straight to your printer without the browser print dialog.

When Dazzle is detected as running, show the "Print with Dazzle" button instead (or in addition to the browser Print button).

4. UX flow

1. On page load, dazzle.watch() starts polling localhost:29100/status
2. Running → show "Print with Dazzle" button (printer icon + "Dazzle" label to differentiate from browser print)
3. Not running → show a subtle info banner/tooltip linking to the Dazzle releases page
4. When "Print with Dazzle" is clicked, dazzle.print(editor.getValue()) sends the raw ZPL
5. Show success/failure feedback (resolves with { job_id } on success, throws DazzleError on failure)

Technical Notes

dazzle-zpl npm package

• Package: dazzle-zpl (v0.2.1)
• Key methods: watch(), isRunning(), print(), printers(), status()
• Default port: 29100
• Handles base64 encoding, binary ZPL, CORS, and error handling out of the box

Relevant files in go-zpl

• site/layouts/index.html — page layout, controls bar with Print button
• site/assets/js/app.js — print handler at line 1024-1099
• site/assets/sass/main.scss — .action-btn styles at line 95
• site/package.json — add dazzle-zpl dependency here

Acceptance Criteria

• dazzle-zpl npm package is used for all Dazzle server communication
• "Print with Dazzle" button appears when Dazzle is detected running on localhost:29100
• Clicking it sends the raw ZPL text from the editor to the print server
• Success/error feedback is shown to the user
• When Dazzle is not running, an info banner/tooltip links to the Dazzle releases page
• Existing browser Print button continues to work as before