retail-print-kit 0.2.3 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.3.1 (2026-10-17)
+
+* `<rpk-label-designer>`: a clearer left bar. The search field keeps its full height and matches the other inputs, item fields and basic elements show icons, sections show their counts, the drag tip sits in its own box and layers show the element icon with an accent bar on the selected one. The left bar is a little wider so field names are not cut.
+
+## 0.3.0 (2026-10-17)
+
+* `retail-print-kit/label-design`: label designs in millimetres (design JSON version 1) with validation, one canvas renderer for screen and print, an EZPL/ZPL encoder (printer-font elements as native commands, designer fonts, QR codes and logos as graphics), printer offsets, eleven built-in shelf-label layouts and the fonts with their licences in `dist/label-fonts/`.
+* `retail-print-kit/label-designer`: the `<rpk-label-designer>` Web Component (palette, drag and resize, guides, undo/redo, properties, logo upload, printer view, check against real items) and `<rpk-label-preview>`. Defined only in a browser; requiring it in Node does nothing.
+* `typesVersions` so TypeScript projects using `moduleResolution: node` find the types of every subpath.
+* Guide on the website: shelf labels from a label design.
+
 ## 0.2.3 (2026-10-05)
 
 * Website with a landing page and ten task guides (receipts, Electron, cash drawer, Star TSP100, labels, templates, QR and barcodes, logos, discovery and status, migration from escpos / node-thermal-printer).

package/README.md

@@ -85,6 +85,7 @@ const { SerialTransport } = require('retail-print-kit/serial'); // new SerialTra
 * [Print to a Star TSP100 or TSP143](https://arka162.github.io/retail-print-kit/guides/star-tsp100-nodejs.html)
 * [Print ZPL, TSPL and EZPL labels](https://arka162.github.io/retail-print-kit/guides/zpl-tspl-ezpl-label-printing-nodejs.html)
 * [Receipt and label templates and the visual designer](https://arka162.github.io/retail-print-kit/guides/receipt-template-designer.html)
+* [Design shelf labels in millimetres and print them on Godex or Zebra](https://arka162.github.io/retail-print-kit/guides/label-design-shelf-labels.html)
 * [QR codes and barcodes](https://arka162.github.io/retail-print-kit/guides/print-qr-code-barcode-receipt.html)
 * [Print a logo or image](https://arka162.github.io/retail-print-kit/guides/print-logo-image-thermal-printer.html)
 * [Find printers on the network and read status](https://arka162.github.io/retail-print-kit/guides/network-printer-discovery-status.html)
@@ -170,6 +171,49 @@ const label = renderLabel(labelTemplate, data); // from a designer JSON
 
 ![Label designer](https://raw.githubusercontent.com/arka162/retail-print-kit/main/docs/images/designer-label.png)
 
+## Label designs (`retail-print-kit/label-design`)
+
+A label design is a JSON document in millimetres (`version: 1`) made of text, price, barcode, QR, line,
+box, fill and image elements with `{{field}}` placeholders. One renderer draws it on screen and at
+printer resolution, so the preview is the print; one encoder turns it into EZPL (Godex) or ZPL (Zebra).
+Elements with a printer-font pattern print as native commands byte for byte; designer fonts, prices,
+QR codes and logos go as graphics (ZPL `^GFA`, EZPL `Q`). Eleven classic shelf-label layouts ship as
+built-ins.
+
+```js
+const ld = require('retail-print-kit/label-design');
+
+ld.validateDesign(design);                                      // null, or the first problem
+const data = ld.labelDataFromItem(item, { storeName: 'Main' }); // itemName, price, barcode, ...
+ld.drawLabel(canvas, design, data, { ppm: 8 });                 // screen preview, returns warnings
+const rasterize = ld.createRasterizer();                        // browser canvas, or pass canvasFactory
+const bytes = ld.encodeDesignLabel(design, 'zpl', data, rasterize, { x: 0, y: 0 });
+
+const builtin = ld.findBuiltinTemplate('2 X 1', 'dual', 'ezpl');
+ld.encodeBuiltinLabel(builtin, 'ezpl', data);                   // printer fonts only
+ld.designFromBuiltin(builtin, 'ezpl');                          // editable copy, prints the same
+```
+
+The import has no DOM access, so it runs in Node, Electron and the browser. The fonts the designer
+uses are in `dist/label-fonts/` with their licences; serve them and call `ld.ensureLabelFonts(url)`.
+
+### The label designer element (`retail-print-kit/label-designer`)
+
+A framework-free Web Component for apps where people design labels: palette of item fields, drag and
+resize with guides and snapping, undo and redo, properties per element, logo upload, printer view
+and a check against real items. It works in any framework (Angular, React, plain pages) and in Electron.
+
+```js
+import 'retail-print-kit/label-designer';              // defines <rpk-label-designer> and <rpk-label-preview>
+const el = document.querySelector('rpk-label-designer');
+el.fontsUrl = '/assets/label-fonts/';
+el.design = design; el.name = 'Shelf tag';
+el.itemSource = { search: (q) => api.items(q), page: (offset, limit) => api.page(offset, limit) };
+el.addEventListener('designsave', (e) => api.save(e.detail.name, e.detail.design).then(() => el.markSaved()));
+```
+
+Put your own buttons in its toolbar with `slot="actions"`. Colours come from `--rpk-*` CSS variables.
+
 ## Designer
 
 **https://arka162.github.io/retail-print-kit/designer/** edits receipt and label templates in the browser:
@@ -232,7 +276,7 @@ previews show the result.
 
 Encoders are covered by byte-exact tests. Items still to be confirmed on real units are listed in
 the [hardware checklist](docs/hardware-checklist.md): Star raster cut modes, Star status bits,
-Godex font sizes, and QR syntax on EZPL and TSPL. Reports from the field are welcome as issues.
+Godex font sizes, QR syntax on EZPL and TSPL, and the `label-design` graphics commands (EZPL `Q`, ZPL `^GFA`). Reports from the field are welcome as issues.
 
 ## License
 

package/dist/label-design/builtins-data.d.ts

@@ -0,0 +1,2 @@
+import { BuiltinTemplate } from './types';
+export declare const BUILTIN_TEMPLATES: BuiltinTemplate[];