retail-print-kit 0.3.0 → 0.3.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 (5) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/dist/label-designer/designer.js +51 -13
  3. package/dist/label-designer/styles.d.ts +1 -1
  4. package/dist/label-designer/styles.js +1 -1
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.3.1 (2026-10-17)
4
+
5
+ * `<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.
6
+
3
7
  ## 0.3.0 (2026-10-17)
4
8
 
5
9
  * `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/`.
package/dist/label-designer/designer.js CHANGED
@@ -5,9 +5,32 @@ const label_design_1 = require("../label-design");
5
5
  const preview_1 = require("./preview");
6
6
  const styles_1 = require("./styles");
7
7
  const BASIC_PALETTE = [
8
- { kind: 'text', label: 'Text', icon: 'T' }, { kind: 'line', label: 'Line', icon: '—' }, { kind: 'box', label: 'Box', icon: '▢' },
9
- { kind: 'fill', label: 'Filled box', icon: '■' }, { kind: 'qr', label: 'QR code', icon: '⌗' }, { kind: 'image', label: 'Logo', icon: '◪' }
8
+ { kind: 'text', label: 'Text', icon: 'type' }, { kind: 'line', label: 'Line', icon: 'line' }, { kind: 'box', label: 'Box', icon: 'square' },
9
+ { kind: 'fill', label: 'Filled box', icon: 'fill' }, { kind: 'qr', label: 'QR code', icon: 'qr' }, { kind: 'image', label: 'Logo', icon: 'image' }
10
10
  ];
11
+ const ICON_PATHS = {
12
+ search: '<circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/>',
13
+ info: '<circle cx="12" cy="12" r="8.5"/><path d="M12 11v5M12 8h.01"/>',
14
+ text: '<path d="M4 6.5h16M4 12h16M4 17.5h10"/>',
15
+ type: '<path d="M5 6h14M12 6v13M9.5 19h5"/>',
16
+ dollar: '<path d="M12 3.5v17M16 7.5c-.6-1.4-2.1-2.2-4-2.2-2.3 0-4 1.2-4 3 0 4.4 8.2 2.3 8.2 6.6 0 1.9-1.8 3.1-4.2 3.1-2 0-3.7-.9-4.3-2.5"/>',
17
+ box: '<path d="M3.5 7.5L12 3.5l8.5 4v9L12 20.5l-8.5-4z"/><path d="M3.5 7.5L12 11.5l8.5-4M12 11.5v9"/>',
18
+ store: '<path d="M4.5 10.5v9h15v-9"/><path d="M3.5 10.5l1.8-6h13.4l1.8 6c0 1.4-1.2 2.3-2.6 2.3s-2.6-.9-2.6-2.3c0 1.4-1.2 2.3-2.6 2.3s-2.7-.9-2.7-2.3c0 1.4-1.2 2.3-2.6 2.3s-2.5-.9-2.5-2.3z"/><path d="M10 19.5v-4.5h4v4.5"/>',
19
+ layers: '<path d="M12 3.5l8.5 4.5-8.5 4.5L3.5 8z"/><path d="M3.5 12.5l8.5 4.5 8.5-4.5M3.5 16.5l8.5 4.5 8.5-4.5"/>',
20
+ truck: '<path d="M3 6.5h11v9H3zM14 9.5h3.5l3 3.2v2.8H14"/><circle cx="7" cy="17.5" r="1.8"/><circle cx="17" cy="17.5" r="1.8"/>',
21
+ hash: '<path d="M5 9h14M5 15h14M10.5 4l-2 16M15.5 4l-2 16"/>',
22
+ barcode: '<path d="M4 5v14M7 5v14M10.5 5v14M13 5v14M16.5 5v14M20 5v14"/>',
23
+ calendar: '<rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/>',
24
+ line: '<path d="M4 12h16"/>',
25
+ square: '<rect x="4.5" y="4.5" width="15" height="15" rx="2"/>',
26
+ fill: '<rect x="4.5" y="4.5" width="15" height="15" rx="2" fill="currentColor"/>',
27
+ qr: '<rect x="3.5" y="3.5" width="7" height="7" rx="1"/><rect x="13.5" y="3.5" width="7" height="7" rx="1"/><rect x="3.5" y="13.5" width="7" height="7" rx="1"/><path d="M14 14h2.5v2.5H14zM18 18h2.5v2.5H18zM18 14h2.5M14 18v2.5"/>',
28
+ image: '<rect x="3.5" y="5" width="17" height="14" rx="2.5"/><circle cx="9" cy="10" r="1.6"/><path d="M20.5 15.5l-4.8-4.8-8.2 8.3"/>'
29
+ };
30
+ const ELEMENT_ICONS = { text: 'type', price: 'dollar', barcode: 'barcode', qr: 'qr', box: 'square', fill: 'fill', line: 'line', image: 'image' };
31
+ function icon(name) {
32
+ return `<svg class="ld-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${ICON_PATHS[name] || ICON_PATHS.text}</svg>`;
33
+ }
11
34
  const HANDLES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
12
35
  const ZOOMS = [0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4];
13
36
  const CSS_PX_PER_MM = 96 / label_design_1.MM_PER_INCH;
@@ -328,14 +351,20 @@ function defineLabelDesigner(tag = 'rpk-label-designer') {
328
351
  </div>
329
352
  <div class="ld-body" data-ref="body">
330
353
  <aside class="ld-left">
331
- <input class="lt-input" type="text" placeholder="Search fields…" data-input="palette">
332
- <span class="lt-eyebrow">Item fields</span>
333
- <div class="ld-tiles" data-ref="fields"></div>
334
- <span class="lt-eyebrow">Basic</span>
335
- <div class="ld-tiles" data-ref="basic"></div>
336
- <p class="lt-note">Drag a field onto the label, or click it to add it at the top left.</p>
337
- <span class="lt-eyebrow">Layers</span>
338
- <div class="ld-layers" data-ref="layers"></div>
354
+ <label class="ld-search">${icon('search')}<input class="lt-input" type="text" placeholder="Search fields…" aria-label="Search fields" data-input="palette"></label>
355
+ <div class="ld-group">
356
+ <div class="ld-group-head"><span class="lt-eyebrow">Item fields</span><span class="ld-count" data-ref="fieldCount"></span></div>
357
+ <div class="ld-tiles" data-ref="fields"></div>
358
+ </div>
359
+ <div class="ld-group">
360
+ <div class="ld-group-head"><span class="lt-eyebrow">Basic</span></div>
361
+ <div class="ld-tiles ld-tiles-basic" data-ref="basic"></div>
362
+ </div>
363
+ <p class="ld-tip">${icon('info')}<span>Drag a field onto the label, or click it to add it at the top left.</span></p>
364
+ <div class="ld-group">
365
+ <div class="ld-group-head"><span class="lt-eyebrow">Layers</span><span class="ld-count" data-ref="layerCount"></span></div>
366
+ <div class="ld-layers" data-ref="layers"></div>
367
+ </div>
339
368
  </aside>
340
369
  <section class="ld-center" data-ref="center">
341
370
  <div class="ld-board">
@@ -1077,15 +1106,24 @@ function defineLabelDesigner(tag = 'rpk-label-designer') {
1077
1106
  const q = this.paletteFilter.trim().toLowerCase();
1078
1107
  const fields = label_design_1.FIELDS.filter((f) => !q || f.label.toLowerCase().includes(q));
1079
1108
  const dis = this.canWrite ? '' : ' disabled';
1080
- this.refs.fields.innerHTML = fields.map((f) => `<button type="button" class="ld-tile" draggable="true" data-act="add" data-kind="${this.kindFor(f.key)}" data-field="${esc(f.key)}"${dis}>${esc(f.label)}</button>`).join('');
1081
- this.refs.basic.innerHTML = BASIC_PALETTE.map((b) => `<button type="button" class="ld-tile" draggable="true" data-act="add" data-kind="${b.kind}"${dis}><i>${b.icon}</i>${esc(b.label)}</button>`).join('');
1109
+ this.refs.fields.innerHTML = fields.length
1110
+ ? fields.map((f) => `<button type="button" class="ld-tile" draggable="true" data-act="add" data-kind="${this.kindFor(f.key)}" data-field="${esc(f.key)}"${dis}><span class="ld-tile-ico">${icon(f.icon)}</span><span class="ld-tile-label">${esc(f.label)}</span></button>`).join('')
1111
+ : '<span class="lt-note ld-none">No fields match.</span>';
1112
+ this.refs.fieldCount.textContent = String(fields.length);
1113
+ this.refs.basic.innerHTML = BASIC_PALETTE.map((b) => `<button type="button" class="ld-tile" draggable="true" data-act="add" data-kind="${b.kind}"${dis}><span class="ld-tile-ico">${icon(b.icon)}</span><span class="ld-tile-label">${esc(b.label)}</span></button>`).join('');
1114
+ }
1115
+ layerIcon(el) {
1116
+ const f = this.boundField(el);
1117
+ const field = el.type === 'text' && f ? label_design_1.FIELDS.find((x) => x.key === f) : undefined;
1118
+ return field ? field.icon : ELEMENT_ICONS[el.type] || 'square';
1082
1119
  }
1083
1120
  renderLayers() {
1084
1121
  const d = this.d;
1085
1122
  if (!d)
1086
1123
  return;
1124
+ this.refs.layerCount.textContent = String(d.elements.length);
1087
1125
  this.refs.layers.innerHTML = d.elements.length
1088
- ? d.elements.slice().reverse().map((el) => `<button type="button" class="ld-layer${on(el.id === this.selectedId)}" data-act="layer" data-v="${esc(el.id)}">${esc(this.elementTitle(el))}${this.isNative(el) ? '<small>printer font</small>' : ''}</button>`).join('')
1126
+ ? d.elements.slice().reverse().map((el) => `<button type="button" class="ld-layer${on(el.id === this.selectedId)}" data-act="layer" data-v="${esc(el.id)}">${icon(this.layerIcon(el))}<span class="ld-layer-name">${esc(this.elementTitle(el))}</span>${this.isNative(el) ? '<small>printer font</small>' : ''}</button>`).join('')
1089
1127
  : '<span class="lt-note">Nothing on the label yet.</span>';
1090
1128
  }
1091
1129
  ticks(axis) {
package/dist/label-designer/styles.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const DESIGNER_CSS = ":host {\n display: block;\n height: 100%;\n font-family: var(--rpk-font, Poppins, system-ui, sans-serif);\n color: var(--rpk-text-body, #344054);\n font-size: 12.5px;\n}\n\n.lt-sp { flex: 1; }\n\n.lt-btn {\n height: 36px; padding: 0 14px; border-radius: var(--rpk-radius-control, 10px); display: inline-flex; align-items: center; gap: 7px;\n font: 500 12.5px var(--rpk-font, Poppins, sans-serif); border: 1px solid var(--rpk-border-strong, #d0d5dd);\n background: var(--rpk-bg-card, #fff); color: var(--rpk-text-body, #344054); cursor: pointer; white-space: nowrap;\n}\n.lt-btn:hover { background: var(--rpk-bg-subtle, #f9fafb); }\n.lt-btn[disabled] { opacity: .55; cursor: not-allowed; }\n.lt-btn-primary { background: var(--rpk-accent-grad, linear-gradient(135deg, #2563eb, #7c3aed)); border: 0; color: #fff; box-shadow: 0 6px 16px -8px rgba(79, 70, 229, .8); }\n.lt-btn-primary:hover { background: var(--rpk-accent-grad, linear-gradient(135deg, #2563eb, #7c3aed)); filter: brightness(1.05); }\n.lt-btn-danger { background: var(--rpk-bg-card, #fff); border-color: var(--rpk-danger-border, #fda29b); color: var(--rpk-danger-fg, #b42318); }\n.lt-btn-sm { height: 30px; padding: 0 10px; border-radius: 8px; }\n\n.lt-icon-btn {\n width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent; color: var(--rpk-text-muted, #667085);\n display: inline-grid; place-items: center; cursor: pointer; font-size: 15px; flex: none;\n}\n.lt-icon-btn:hover { background: var(--rpk-bg-muted, #f2f4f7); }\n.lt-icon-btn.on { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n\n.lt-input {\n height: 34px; border: 1px solid var(--rpk-border-strong, #d0d5dd); border-radius: 9px; background: var(--rpk-bg-card, #fff);\n color: var(--rpk-text, #101828); font: 500 12.5px var(--rpk-font, Poppins, sans-serif); padding: 0 10px; outline: none; width: 100%; box-sizing: border-box;\n}\n.lt-input:focus { border: 1.5px solid var(--rpk-link, #1668e3); box-shadow: var(--rpk-focus-ring, 0 0 0 3px rgba(22, 104, 227, .14)); }\n.lt-num { width: 90px; }\nselect.lt-input { padding-right: 6px; }\n\n.lt-seg { display: inline-flex; padding: 3px; background: var(--rpk-bg-muted, #f2f4f7); border-radius: 10px; gap: 2px; }\n.lt-seg button {\n height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; border: 0; background: transparent;\n font: 500 12.5px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text-muted, #667085); cursor: pointer; white-space: nowrap;\n}\n.lt-seg button b { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: rgba(16, 24, 40, .06); font-weight: 500; }\n.lt-seg button.on { background: var(--rpk-bg-card, #fff); color: var(--rpk-text, #101828); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }\n.lt-seg button.on b { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n.lt-seg button[disabled] { opacity: .4; cursor: not-allowed; }\n.lt-seg-sm button { height: 24px; padding: 0 9px; font-size: 11.5px; }\n\n.lt-eyebrow { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--rpk-text-subtle, #98a2b3); }\n.lt-chip { height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; background: var(--rpk-bg-muted, #f2f4f7); color: var(--rpk-text-body, #344054); white-space: nowrap; }\n.lt-chip-acc { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n.lt-chip-warn { background: var(--rpk-warn-bg, #fff4ed); color: var(--rpk-warn-fg, #b93815); }\n\n.lt-overlay { position: fixed; inset: 0; background: var(--rpk-bg-overlay, rgba(16, 24, 40, .45)); display: grid; place-items: center; z-index: 1100; padding: 16px; }\n.lt-dialog { width: min(900px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--rpk-bg-card, #fff); border-radius: 16px; box-shadow: var(--rpk-shadow-popover, 0 18px 36px -16px rgba(16, 24, 40, .4)); }\n.lt-dialog-sm { width: min(460px, 100%); }\n.lt-dh { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); }\n.lt-dh > div { flex: 1; }\n.lt-dt { font-size: 16px; font-weight: 600; color: var(--rpk-text, #101828); }\n.lt-ds { font-size: 12px; color: var(--rpk-text-muted, #667085); margin-top: 2px; }\n.lt-dfoot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--rpk-hairline, #eaecf0); }\n.lt-error { color: var(--rpk-danger-fg, #b42318); font-size: 12px; }\n.lt-field { display: grid; gap: 6px; }\n.lt-row { display: flex; gap: 10px; align-items: center; }\n.lt-wrap { flex-wrap: wrap; gap: 16px; align-items: flex-start; }\n.lt-inline { display: inline-flex; align-items: center; gap: 6px; color: var(--rpk-text-subtle, #98a2b3); }\n.lt-check { display: inline-flex; align-items: center; gap: 8px; color: var(--rpk-text-body, #344054); }\n.lt-note { margin: 0; font-size: 12px; color: var(--rpk-text-muted, #667085); }\n\n.lt-card { background: var(--rpk-bg-card, #fff); border: 1px solid var(--rpk-border, rgba(16, 24, 40, .08)); border-radius: var(--rpk-radius-card, 14px); }\n.lt-empty { padding: 40px 16px; text-align: center; color: var(--rpk-text-muted, #667085); }\n.lt-warn-text { color: var(--rpk-warn-fg, #b93815); }\n\n.ld { display: flex; flex-direction: column; height: 100%; min-height: 520px; background: var(--rpk-bg-page, #f2f4f7); border: 1px solid var(--rpk-border, rgba(16, 24, 40, .08)); border-radius: var(--rpk-radius-card, 14px); overflow: hidden; }\n.ld-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--rpk-bg-card, #fff); border-bottom: 1px solid var(--rpk-hairline, #eaecf0); flex-wrap: wrap; }\n.ld-name { border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; font: 600 15px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); background: transparent; min-width: 160px; max-width: 320px; }\n.ld-name:hover, .ld-name:focus { border-color: var(--rpk-border-strong, #d0d5dd); outline: none; background: var(--rpk-bg-card, #fff); }\n.ld-saved { font-size: 11.5px; color: var(--rpk-text-muted, #667085); white-space: nowrap; }\n.ld-unsaved { color: var(--rpk-warn-fg, #b93815); }\n.ld-div { width: 1px; height: 20px; background: var(--rpk-hairline, #eaecf0); }\n.ld-zoom { width: 46px; text-align: center; font-weight: 500; color: var(--rpk-text, #101828); }\n.ld-sample { position: relative; }\n.ld-sample .lt-btn { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }\n.ld-picker {\n position: absolute; right: 0; top: 36px; z-index: 30; width: 320px; padding: 8px; display: grid; gap: 4px;\n background: var(--rpk-bg-card, #fff); border-radius: 12px; box-shadow: var(--rpk-shadow-popover, 0 18px 36px -16px rgba(16, 24, 40, .4)), 0 0 0 1px var(--rpk-border, rgba(16, 24, 40, .08));\n}\n.ld-pick { display: flex; justify-content: space-between; gap: 8px; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 7px 8px; cursor: pointer; font: 500 12px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); }\n.ld-pick:hover { background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-pick small { color: var(--rpk-text-muted, #667085); }\n.ld-pick-empty { padding: 8px; color: var(--rpk-text-muted, #667085); }\n\n.ld-body { flex: 1; display: grid; grid-template-columns: 240px 1fr 300px; min-height: 0; }\n.ld-left, .ld-right { background: var(--rpk-bg-card, #fff); overflow: auto; }\n.ld-left { border-right: 1px solid var(--rpk-hairline, #eaecf0); padding: 12px; display: flex; flex-direction: column; gap: 10px; }\n.ld-right { border-left: 1px solid var(--rpk-hairline, #eaecf0); }\n.ld-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }\n.ld-tile {\n min-height: 32px; border: 1px solid var(--rpk-border-strong, #d0d5dd); border-radius: 9px; background: var(--rpk-bg-card, #fff); display: flex; align-items: center; gap: 6px;\n padding: 4px 8px; font: 500 12px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); cursor: grab; text-align: left;\n white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;\n}\n.ld-tile i { font-style: normal; color: var(--rpk-text-muted, #667085); width: 14px; text-align: center; }\n.ld-tile:hover { border-color: var(--rpk-link, #1668e3); }\n.ld-tile[disabled] { opacity: .5; cursor: not-allowed; }\n.ld-layers { display: grid; gap: 2px; }\n.ld-layer { display: flex; justify-content: space-between; align-items: center; gap: 6px; text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; font: 500 12px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); cursor: pointer; }\n.ld-layer small { color: var(--rpk-text-subtle, #98a2b3); font-weight: 400; }\n.ld-layer:hover { background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-layer.on { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n\n.ld-center { position: relative; overflow: auto; display: flex; flex-direction: column; background-color: var(--rpk-bg-page, #e9ecf1); background-image: radial-gradient(rgba(16, 24, 40, .09) 1px, transparent 1px); background-size: 14px 14px; }\n.ld-board { position: relative; margin: 56px auto 40px; padding: 24px 0 0 24px; }\n.ld-ruler-x, .ld-ruler-y { position: absolute; background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-ruler-x { top: 0; left: 24px; height: 20px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); }\n.ld-ruler-y { top: 24px; left: 0; width: 20px; border-right: 1px solid var(--rpk-hairline, #eaecf0); }\n.ld-ruler-x i, .ld-ruler-y i { position: absolute; background: #c4cad4; }\n.ld-ruler-x i { bottom: 0; width: 1px; }\n.ld-ruler-y i { right: 0; height: 1px; }\n.ld-ruler-x b, .ld-ruler-y b { position: absolute; font: 500 9.5px var(--rpk-font-mono, monospace); color: var(--rpk-text-muted, #667085); }\n.ld-ruler-x b { left: 3px; top: -1px; }\n.ld-ruler-y b { top: 2px; left: -16px; }\n.ld-stage { position: relative; touch-action: none; }\n.ld-stage > canvas { position: absolute; left: 0; top: 0; }\n.ld-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(79, 70, 229, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 70, 229, .08) 1px, transparent 1px); }\n.ld-el { position: absolute; border: 1px dashed rgba(16, 24, 40, .22); cursor: move; box-sizing: border-box; }\n.ld-el:hover { border-color: rgba(79, 70, 229, .6); }\n.ld-el.warn { border: 1px dashed #f79009; }\n.ld-el.on { border: 1.5px solid #4f46e5; }\n.ld-h { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid #4f46e5; border-radius: 2px; box-sizing: border-box; }\n.ld-h-nw { left: -5px; top: -5px; cursor: nwse-resize; }\n.ld-h-n { left: calc(50% - 4.5px); top: -5px; cursor: ns-resize; }\n.ld-h-ne { right: -5px; top: -5px; cursor: nesw-resize; }\n.ld-h-e { right: -5px; top: calc(50% - 4.5px); cursor: ew-resize; }\n.ld-h-se { right: -5px; bottom: -5px; cursor: nwse-resize; }\n.ld-h-s { left: calc(50% - 4.5px); bottom: -5px; cursor: ns-resize; }\n.ld-h-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }\n.ld-h-w { left: -5px; top: calc(50% - 4.5px); cursor: ew-resize; }\n.ld-guide { position: absolute; background: #e11d74; pointer-events: none; }\n.ld-guide-x { top: -8px; bottom: -8px; width: 1px; }\n.ld-guide-y { left: -8px; right: -8px; height: 1px; }\n.ld-stocktag { margin-top: 10px; font-size: 11px; color: #8a6d00; }\n.ld-status { position: sticky; bottom: 0; margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--rpk-bg-card, #fff); border-top: 1px solid var(--rpk-hairline, #eaecf0); font-size: 11.5px; color: var(--rpk-text-muted, #667085); flex-wrap: wrap; }\n.ld-status b { color: var(--rpk-text, #101828); font-weight: 500; }\n\n.ld-sec { padding: 12px 16px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); display: grid; gap: 10px; }\n.ld-head { display: flex; align-items: center; gap: 4px; }\n.ld-title { font-size: 13.5px; font-weight: 600; color: var(--rpk-text, #101828); }\n.ld-label { font-size: 11px; font-weight: 500; color: var(--rpk-text-muted, #667085); }\n.ld-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.ld-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }\n\n.ld-check { flex: 1; display: grid; grid-template-columns: 1fr 320px; gap: 16px; padding: 16px; min-height: 0; overflow: auto; }\n.ld-check-main { display: grid; gap: 16px; align-content: start; min-width: 0; }\n.ld-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); flex-wrap: wrap; }\n.ld-card-head b { color: var(--rpk-text, #101828); font-weight: 600; }\n.ld-printer-body { padding: 14px 16px; display: grid; justify-items: center; gap: 10px; background: var(--rpk-bg-subtle, #f9fafb); border-radius: 0 0 14px 14px; overflow: auto; }\n.ld-problems { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 14px 16px; }\n.ld-problem { display: grid; gap: 6px; justify-items: start; text-align: left; border: 1px solid #fec84b; border-radius: 10px; padding: 10px; background: var(--rpk-bg-card, #fff); cursor: pointer; font: inherit; }\n.ld-problem.on { box-shadow: 0 0 0 3px rgba(247, 144, 9, .25); }\n.ld-pmsg { color: var(--rpk-warn-fg, #b93815); font-size: 11.5px; }\n.ld-summary { padding: 16px; display: grid; gap: 12px; align-content: start; }\n.ld-metric { font-size: 26px; font-weight: 600; color: var(--rpk-text, #101828); letter-spacing: -.02em; }\n.ld-bar { height: 8px; border-radius: 999px; overflow: hidden; display: flex; background: var(--rpk-bg-muted, #f2f4f7); }\n.ld-bar .ok { background: #12b76a; }\n.ld-bar .bad { background: #f79009; }\n.ld-li { display: flex; align-items: center; gap: 8px; }\n.ld-li i { width: 8px; height: 8px; border-radius: 3px; }\n.ld-li i.ok { background: #12b76a; }\n.ld-li i.bad { background: #f79009; }\n.ld-li b { margin-left: auto; color: var(--rpk-text, #101828); font-variant-numeric: tabular-nums; }\n.ld-fix { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--rpk-border-strong, #d0d5dd); border-radius: 10px; padding: 10px 12px; }\n.ld-fix b { color: var(--rpk-text, #101828); font-weight: 600; }\n.ld-fix p { margin: 4px 0 0; }\n\n@media (max-width: 1100px) {\n .ld-body { grid-template-columns: 200px 1fr 260px; }\n .ld-check { grid-template-columns: 1fr; }\n}\n.ld-upload { cursor: pointer; justify-self: start; }\n.ld-upload.disabled { opacity: .5; pointer-events: none; }\n\n.lt-canvas { display: block; background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 40, .12), 0 1px 2px rgba(16, 24, 40, .08); border-radius: 2px; }\n.lt-pixel { image-rendering: pixelated; }\n.ld-actions { display: inline-flex; gap: 8px; align-items: center; }\n.ld-empty { padding: 40px 16px; text-align: center; color: var(--rpk-text-muted, #667085); }\n[hidden] { display: none !important; }\n";
1
+ export declare const DESIGNER_CSS = ":host {\n display: block;\n height: 100%;\n font-family: var(--rpk-font, Poppins, system-ui, sans-serif);\n color: var(--rpk-text-body, #344054);\n font-size: 12.5px;\n}\n\n.lt-sp { flex: 1; }\n\n.lt-btn {\n height: 36px; padding: 0 14px; border-radius: var(--rpk-radius-control, 10px); display: inline-flex; align-items: center; gap: 7px;\n font: 500 12.5px var(--rpk-font, Poppins, sans-serif); border: 1px solid var(--rpk-border-strong, #d0d5dd);\n background: var(--rpk-bg-card, #fff); color: var(--rpk-text-body, #344054); cursor: pointer; white-space: nowrap;\n}\n.lt-btn:hover { background: var(--rpk-bg-subtle, #f9fafb); }\n.lt-btn[disabled] { opacity: .55; cursor: not-allowed; }\n.lt-btn-primary { background: var(--rpk-accent-grad, linear-gradient(135deg, #2563eb, #7c3aed)); border: 0; color: #fff; box-shadow: 0 6px 16px -8px rgba(79, 70, 229, .8); }\n.lt-btn-primary:hover { background: var(--rpk-accent-grad, linear-gradient(135deg, #2563eb, #7c3aed)); filter: brightness(1.05); }\n.lt-btn-danger { background: var(--rpk-bg-card, #fff); border-color: var(--rpk-danger-border, #fda29b); color: var(--rpk-danger-fg, #b42318); }\n.lt-btn-sm { height: 30px; padding: 0 10px; border-radius: 8px; }\n\n.lt-icon-btn {\n width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent; color: var(--rpk-text-muted, #667085);\n display: inline-grid; place-items: center; cursor: pointer; font-size: 15px; flex: none;\n}\n.lt-icon-btn:hover { background: var(--rpk-bg-muted, #f2f4f7); }\n.lt-icon-btn.on { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n\n.lt-input {\n height: 34px; border: 1px solid var(--rpk-border-strong, #d0d5dd); border-radius: 9px; background: var(--rpk-bg-card, #fff);\n color: var(--rpk-text, #101828); font: 500 12.5px var(--rpk-font, Poppins, sans-serif); padding: 0 10px; outline: none; width: 100%; box-sizing: border-box;\n}\n.lt-input:focus { border: 1.5px solid var(--rpk-link, #1668e3); box-shadow: var(--rpk-focus-ring, 0 0 0 3px rgba(22, 104, 227, .14)); }\n.lt-num { width: 90px; }\nselect.lt-input { padding-right: 6px; }\n\n.lt-seg { display: inline-flex; padding: 3px; background: var(--rpk-bg-muted, #f2f4f7); border-radius: 10px; gap: 2px; }\n.lt-seg button {\n height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; border: 0; background: transparent;\n font: 500 12.5px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text-muted, #667085); cursor: pointer; white-space: nowrap;\n}\n.lt-seg button b { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: rgba(16, 24, 40, .06); font-weight: 500; }\n.lt-seg button.on { background: var(--rpk-bg-card, #fff); color: var(--rpk-text, #101828); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }\n.lt-seg button.on b { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n.lt-seg button[disabled] { opacity: .4; cursor: not-allowed; }\n.lt-seg-sm button { height: 24px; padding: 0 9px; font-size: 11.5px; }\n\n.lt-eyebrow { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--rpk-text-subtle, #98a2b3); }\n.lt-chip { height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; background: var(--rpk-bg-muted, #f2f4f7); color: var(--rpk-text-body, #344054); white-space: nowrap; }\n.lt-chip-acc { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n.lt-chip-warn { background: var(--rpk-warn-bg, #fff4ed); color: var(--rpk-warn-fg, #b93815); }\n\n.lt-overlay { position: fixed; inset: 0; background: var(--rpk-bg-overlay, rgba(16, 24, 40, .45)); display: grid; place-items: center; z-index: 1100; padding: 16px; }\n.lt-dialog { width: min(900px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--rpk-bg-card, #fff); border-radius: 16px; box-shadow: var(--rpk-shadow-popover, 0 18px 36px -16px rgba(16, 24, 40, .4)); }\n.lt-dialog-sm { width: min(460px, 100%); }\n.lt-dh { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); }\n.lt-dh > div { flex: 1; }\n.lt-dt { font-size: 16px; font-weight: 600; color: var(--rpk-text, #101828); }\n.lt-ds { font-size: 12px; color: var(--rpk-text-muted, #667085); margin-top: 2px; }\n.lt-dfoot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--rpk-hairline, #eaecf0); }\n.lt-error { color: var(--rpk-danger-fg, #b42318); font-size: 12px; }\n.lt-field { display: grid; gap: 6px; }\n.lt-row { display: flex; gap: 10px; align-items: center; }\n.lt-wrap { flex-wrap: wrap; gap: 16px; align-items: flex-start; }\n.lt-inline { display: inline-flex; align-items: center; gap: 6px; color: var(--rpk-text-subtle, #98a2b3); }\n.lt-check { display: inline-flex; align-items: center; gap: 8px; color: var(--rpk-text-body, #344054); }\n.lt-note { margin: 0; font-size: 12px; color: var(--rpk-text-muted, #667085); }\n\n.lt-card { background: var(--rpk-bg-card, #fff); border: 1px solid var(--rpk-border, rgba(16, 24, 40, .08)); border-radius: var(--rpk-radius-card, 14px); }\n.lt-empty { padding: 40px 16px; text-align: center; color: var(--rpk-text-muted, #667085); }\n.lt-warn-text { color: var(--rpk-warn-fg, #b93815); }\n\n.ld { display: flex; flex-direction: column; height: 100%; min-height: 520px; background: var(--rpk-bg-page, #f2f4f7); border: 1px solid var(--rpk-border, rgba(16, 24, 40, .08)); border-radius: var(--rpk-radius-card, 14px); overflow: hidden; }\n.ld-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--rpk-bg-card, #fff); border-bottom: 1px solid var(--rpk-hairline, #eaecf0); flex-wrap: wrap; }\n.ld-name { border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; font: 600 15px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); background: transparent; min-width: 160px; max-width: 320px; }\n.ld-name:hover, .ld-name:focus { border-color: var(--rpk-border-strong, #d0d5dd); outline: none; background: var(--rpk-bg-card, #fff); }\n.ld-saved { font-size: 11.5px; color: var(--rpk-text-muted, #667085); white-space: nowrap; }\n.ld-unsaved { color: var(--rpk-warn-fg, #b93815); }\n.ld-div { width: 1px; height: 20px; background: var(--rpk-hairline, #eaecf0); }\n.ld-zoom { width: 46px; text-align: center; font-weight: 500; color: var(--rpk-text, #101828); }\n.ld-sample { position: relative; }\n.ld-sample .lt-btn { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }\n.ld-picker {\n position: absolute; right: 0; top: 36px; z-index: 30; width: 320px; padding: 8px; display: grid; gap: 4px;\n background: var(--rpk-bg-card, #fff); border-radius: 12px; box-shadow: var(--rpk-shadow-popover, 0 18px 36px -16px rgba(16, 24, 40, .4)), 0 0 0 1px var(--rpk-border, rgba(16, 24, 40, .08));\n}\n.ld-pick { display: flex; justify-content: space-between; gap: 8px; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 7px 8px; cursor: pointer; font: 500 12px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); }\n.ld-pick:hover { background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-pick small { color: var(--rpk-text-muted, #667085); }\n.ld-pick-empty { padding: 8px; color: var(--rpk-text-muted, #667085); }\n\n.ld-body { flex: 1; display: grid; grid-template-columns: 272px 1fr 300px; min-height: 0; }\n.ld-left, .ld-right { background: var(--rpk-bg-card, #fff); overflow: auto; }\n.ld-left { border-right: 1px solid var(--rpk-hairline, #eaecf0); padding: 14px 12px 16px; display: flex; flex-direction: column; gap: 16px; }\n.ld-left > * { flex: none; }\n.ld-search { position: relative; display: block; }\n.ld-search .ld-ico { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--rpk-text-subtle, #98a2b3); pointer-events: none; }\n.ld-search .lt-input { padding-left: 34px; }\n.ld-group { display: grid; gap: 8px; }\n.ld-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }\n.ld-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--rpk-bg-muted, #f2f4f7); color: var(--rpk-text-muted, #667085); font-size: 10.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }\n.ld-tip { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; background: var(--rpk-bg-subtle, #f9fafb); border: 1px solid var(--rpk-hairline, #eaecf0); color: var(--rpk-text-muted, #667085); font-size: 11.5px; line-height: 1.45; }\n.ld-tip .ld-ico { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--rpk-link, #1668e3); }\n.ld-none { grid-column: 1 / -1; padding: 6px 2px; }\n.ld-ico { display: block; width: 16px; height: 16px; }\n.ld-right { border-left: 1px solid var(--rpk-hairline, #eaecf0); }\n.ld-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }\n.ld-tile {\n min-height: 36px; border: 1px solid var(--rpk-border, rgba(16, 24, 40, .1)); border-radius: 10px; background: var(--rpk-bg-card, #fff); display: flex; align-items: center; gap: 7px;\n padding: 5px 7px 5px 5px; font: 500 12px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); cursor: grab; text-align: left;\n min-width: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .05);\n}\n.ld-tile-ico { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n.ld-tile-ico .ld-ico { width: 14px; height: 14px; }\n.ld-tiles-basic .ld-tile-ico { background: var(--rpk-bg-muted, #f2f4f7); color: var(--rpk-text-body, #344054); }\n.ld-tile-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ld-tile:hover { border-color: var(--rpk-link, #1668e3); background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-tile:active { cursor: grabbing; }\n.ld-tile:focus-visible { outline: none; border-color: var(--rpk-link, #1668e3); box-shadow: var(--rpk-focus-ring, 0 0 0 3px rgba(22, 104, 227, .14)); }\n.ld-tile[disabled] { opacity: .5; cursor: not-allowed; }\n.ld-tile[disabled]:hover { border-color: var(--rpk-border, rgba(16, 24, 40, .1)); background: var(--rpk-bg-card, #fff); }\n.ld-layers { display: grid; gap: 2px; }\n.ld-layer { position: relative; display: flex; align-items: center; gap: 9px; min-height: 34px; text-align: left; border: 0; background: transparent; padding: 6px 8px 6px 10px; border-radius: 8px; font: 500 12px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); cursor: pointer; }\n.ld-layer .ld-ico { flex: none; width: 15px; height: 15px; color: var(--rpk-text-muted, #667085); }\n.ld-layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ld-layer small { flex: none; padding: 1px 6px; border-radius: 999px; background: var(--rpk-bg-muted, #f2f4f7); color: var(--rpk-text-muted, #667085); font-size: 10px; font-weight: 500; }\n.ld-layer:hover { background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-layer.on { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n.ld-layer.on .ld-ico { color: var(--rpk-accent-ink, #3730a3); }\n.ld-layer.on::before { content: \"\"; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--rpk-link, #1668e3); }\n\n.ld-center { position: relative; overflow: auto; display: flex; flex-direction: column; background-color: var(--rpk-bg-page, #e9ecf1); background-image: radial-gradient(rgba(16, 24, 40, .09) 1px, transparent 1px); background-size: 14px 14px; }\n.ld-board { position: relative; margin: 56px auto 40px; padding: 24px 0 0 24px; }\n.ld-ruler-x, .ld-ruler-y { position: absolute; background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-ruler-x { top: 0; left: 24px; height: 20px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); }\n.ld-ruler-y { top: 24px; left: 0; width: 20px; border-right: 1px solid var(--rpk-hairline, #eaecf0); }\n.ld-ruler-x i, .ld-ruler-y i { position: absolute; background: #c4cad4; }\n.ld-ruler-x i { bottom: 0; width: 1px; }\n.ld-ruler-y i { right: 0; height: 1px; }\n.ld-ruler-x b, .ld-ruler-y b { position: absolute; font: 500 9.5px var(--rpk-font-mono, monospace); color: var(--rpk-text-muted, #667085); }\n.ld-ruler-x b { left: 3px; top: -1px; }\n.ld-ruler-y b { top: 2px; left: -16px; }\n.ld-stage { position: relative; touch-action: none; }\n.ld-stage > canvas { position: absolute; left: 0; top: 0; }\n.ld-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(79, 70, 229, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 70, 229, .08) 1px, transparent 1px); }\n.ld-el { position: absolute; border: 1px dashed rgba(16, 24, 40, .22); cursor: move; box-sizing: border-box; }\n.ld-el:hover { border-color: rgba(79, 70, 229, .6); }\n.ld-el.warn { border: 1px dashed #f79009; }\n.ld-el.on { border: 1.5px solid #4f46e5; }\n.ld-h { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid #4f46e5; border-radius: 2px; box-sizing: border-box; }\n.ld-h-nw { left: -5px; top: -5px; cursor: nwse-resize; }\n.ld-h-n { left: calc(50% - 4.5px); top: -5px; cursor: ns-resize; }\n.ld-h-ne { right: -5px; top: -5px; cursor: nesw-resize; }\n.ld-h-e { right: -5px; top: calc(50% - 4.5px); cursor: ew-resize; }\n.ld-h-se { right: -5px; bottom: -5px; cursor: nwse-resize; }\n.ld-h-s { left: calc(50% - 4.5px); bottom: -5px; cursor: ns-resize; }\n.ld-h-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }\n.ld-h-w { left: -5px; top: calc(50% - 4.5px); cursor: ew-resize; }\n.ld-guide { position: absolute; background: #e11d74; pointer-events: none; }\n.ld-guide-x { top: -8px; bottom: -8px; width: 1px; }\n.ld-guide-y { left: -8px; right: -8px; height: 1px; }\n.ld-stocktag { margin-top: 10px; font-size: 11px; color: #8a6d00; }\n.ld-status { position: sticky; bottom: 0; margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--rpk-bg-card, #fff); border-top: 1px solid var(--rpk-hairline, #eaecf0); font-size: 11.5px; color: var(--rpk-text-muted, #667085); flex-wrap: wrap; }\n.ld-status b { color: var(--rpk-text, #101828); font-weight: 500; }\n\n.ld-sec { padding: 12px 16px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); display: grid; gap: 10px; }\n.ld-head { display: flex; align-items: center; gap: 4px; }\n.ld-title { font-size: 13.5px; font-weight: 600; color: var(--rpk-text, #101828); }\n.ld-label { font-size: 11px; font-weight: 500; color: var(--rpk-text-muted, #667085); }\n.ld-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.ld-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }\n\n.ld-check { flex: 1; display: grid; grid-template-columns: 1fr 320px; gap: 16px; padding: 16px; min-height: 0; overflow: auto; }\n.ld-check-main { display: grid; gap: 16px; align-content: start; min-width: 0; }\n.ld-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); flex-wrap: wrap; }\n.ld-card-head b { color: var(--rpk-text, #101828); font-weight: 600; }\n.ld-printer-body { padding: 14px 16px; display: grid; justify-items: center; gap: 10px; background: var(--rpk-bg-subtle, #f9fafb); border-radius: 0 0 14px 14px; overflow: auto; }\n.ld-problems { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 14px 16px; }\n.ld-problem { display: grid; gap: 6px; justify-items: start; text-align: left; border: 1px solid #fec84b; border-radius: 10px; padding: 10px; background: var(--rpk-bg-card, #fff); cursor: pointer; font: inherit; }\n.ld-problem.on { box-shadow: 0 0 0 3px rgba(247, 144, 9, .25); }\n.ld-pmsg { color: var(--rpk-warn-fg, #b93815); font-size: 11.5px; }\n.ld-summary { padding: 16px; display: grid; gap: 12px; align-content: start; }\n.ld-metric { font-size: 26px; font-weight: 600; color: var(--rpk-text, #101828); letter-spacing: -.02em; }\n.ld-bar { height: 8px; border-radius: 999px; overflow: hidden; display: flex; background: var(--rpk-bg-muted, #f2f4f7); }\n.ld-bar .ok { background: #12b76a; }\n.ld-bar .bad { background: #f79009; }\n.ld-li { display: flex; align-items: center; gap: 8px; }\n.ld-li i { width: 8px; height: 8px; border-radius: 3px; }\n.ld-li i.ok { background: #12b76a; }\n.ld-li i.bad { background: #f79009; }\n.ld-li b { margin-left: auto; color: var(--rpk-text, #101828); font-variant-numeric: tabular-nums; }\n.ld-fix { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--rpk-border-strong, #d0d5dd); border-radius: 10px; padding: 10px 12px; }\n.ld-fix b { color: var(--rpk-text, #101828); font-weight: 600; }\n.ld-fix p { margin: 4px 0 0; }\n\n@media (max-width: 1100px) {\n .ld-body { grid-template-columns: 220px 1fr 260px; }\n .ld-tiles { grid-template-columns: 1fr; }\n .ld-check { grid-template-columns: 1fr; }\n}\n.ld-upload { cursor: pointer; justify-self: start; }\n.ld-upload.disabled { opacity: .5; pointer-events: none; }\n\n.lt-canvas { display: block; background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 40, .12), 0 1px 2px rgba(16, 24, 40, .08); border-radius: 2px; }\n.lt-pixel { image-rendering: pixelated; }\n.ld-actions { display: inline-flex; gap: 8px; align-items: center; }\n.ld-empty { padding: 40px 16px; text-align: center; color: var(--rpk-text-muted, #667085); }\n[hidden] { display: none !important; }\n";
package/dist/label-designer/styles.js CHANGED
@@ -1,4 +1,4 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.DESIGNER_CSS = void 0;
4
- exports.DESIGNER_CSS = ':host {\n display: block;\n height: 100%;\n font-family: var(--rpk-font, Poppins, system-ui, sans-serif);\n color: var(--rpk-text-body, #344054);\n font-size: 12.5px;\n}\n\n.lt-sp { flex: 1; }\n\n.lt-btn {\n height: 36px; padding: 0 14px; border-radius: var(--rpk-radius-control, 10px); display: inline-flex; align-items: center; gap: 7px;\n font: 500 12.5px var(--rpk-font, Poppins, sans-serif); border: 1px solid var(--rpk-border-strong, #d0d5dd);\n background: var(--rpk-bg-card, #fff); color: var(--rpk-text-body, #344054); cursor: pointer; white-space: nowrap;\n}\n.lt-btn:hover { background: var(--rpk-bg-subtle, #f9fafb); }\n.lt-btn[disabled] { opacity: .55; cursor: not-allowed; }\n.lt-btn-primary { background: var(--rpk-accent-grad, linear-gradient(135deg, #2563eb, #7c3aed)); border: 0; color: #fff; box-shadow: 0 6px 16px -8px rgba(79, 70, 229, .8); }\n.lt-btn-primary:hover { background: var(--rpk-accent-grad, linear-gradient(135deg, #2563eb, #7c3aed)); filter: brightness(1.05); }\n.lt-btn-danger { background: var(--rpk-bg-card, #fff); border-color: var(--rpk-danger-border, #fda29b); color: var(--rpk-danger-fg, #b42318); }\n.lt-btn-sm { height: 30px; padding: 0 10px; border-radius: 8px; }\n\n.lt-icon-btn {\n width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent; color: var(--rpk-text-muted, #667085);\n display: inline-grid; place-items: center; cursor: pointer; font-size: 15px; flex: none;\n}\n.lt-icon-btn:hover { background: var(--rpk-bg-muted, #f2f4f7); }\n.lt-icon-btn.on { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n\n.lt-input {\n height: 34px; border: 1px solid var(--rpk-border-strong, #d0d5dd); border-radius: 9px; background: var(--rpk-bg-card, #fff);\n color: var(--rpk-text, #101828); font: 500 12.5px var(--rpk-font, Poppins, sans-serif); padding: 0 10px; outline: none; width: 100%; box-sizing: border-box;\n}\n.lt-input:focus { border: 1.5px solid var(--rpk-link, #1668e3); box-shadow: var(--rpk-focus-ring, 0 0 0 3px rgba(22, 104, 227, .14)); }\n.lt-num { width: 90px; }\nselect.lt-input { padding-right: 6px; }\n\n.lt-seg { display: inline-flex; padding: 3px; background: var(--rpk-bg-muted, #f2f4f7); border-radius: 10px; gap: 2px; }\n.lt-seg button {\n height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; border: 0; background: transparent;\n font: 500 12.5px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text-muted, #667085); cursor: pointer; white-space: nowrap;\n}\n.lt-seg button b { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: rgba(16, 24, 40, .06); font-weight: 500; }\n.lt-seg button.on { background: var(--rpk-bg-card, #fff); color: var(--rpk-text, #101828); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }\n.lt-seg button.on b { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n.lt-seg button[disabled] { opacity: .4; cursor: not-allowed; }\n.lt-seg-sm button { height: 24px; padding: 0 9px; font-size: 11.5px; }\n\n.lt-eyebrow { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--rpk-text-subtle, #98a2b3); }\n.lt-chip { height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; background: var(--rpk-bg-muted, #f2f4f7); color: var(--rpk-text-body, #344054); white-space: nowrap; }\n.lt-chip-acc { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n.lt-chip-warn { background: var(--rpk-warn-bg, #fff4ed); color: var(--rpk-warn-fg, #b93815); }\n\n.lt-overlay { position: fixed; inset: 0; background: var(--rpk-bg-overlay, rgba(16, 24, 40, .45)); display: grid; place-items: center; z-index: 1100; padding: 16px; }\n.lt-dialog { width: min(900px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--rpk-bg-card, #fff); border-radius: 16px; box-shadow: var(--rpk-shadow-popover, 0 18px 36px -16px rgba(16, 24, 40, .4)); }\n.lt-dialog-sm { width: min(460px, 100%); }\n.lt-dh { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); }\n.lt-dh > div { flex: 1; }\n.lt-dt { font-size: 16px; font-weight: 600; color: var(--rpk-text, #101828); }\n.lt-ds { font-size: 12px; color: var(--rpk-text-muted, #667085); margin-top: 2px; }\n.lt-dfoot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--rpk-hairline, #eaecf0); }\n.lt-error { color: var(--rpk-danger-fg, #b42318); font-size: 12px; }\n.lt-field { display: grid; gap: 6px; }\n.lt-row { display: flex; gap: 10px; align-items: center; }\n.lt-wrap { flex-wrap: wrap; gap: 16px; align-items: flex-start; }\n.lt-inline { display: inline-flex; align-items: center; gap: 6px; color: var(--rpk-text-subtle, #98a2b3); }\n.lt-check { display: inline-flex; align-items: center; gap: 8px; color: var(--rpk-text-body, #344054); }\n.lt-note { margin: 0; font-size: 12px; color: var(--rpk-text-muted, #667085); }\n\n.lt-card { background: var(--rpk-bg-card, #fff); border: 1px solid var(--rpk-border, rgba(16, 24, 40, .08)); border-radius: var(--rpk-radius-card, 14px); }\n.lt-empty { padding: 40px 16px; text-align: center; color: var(--rpk-text-muted, #667085); }\n.lt-warn-text { color: var(--rpk-warn-fg, #b93815); }\n\n.ld { display: flex; flex-direction: column; height: 100%; min-height: 520px; background: var(--rpk-bg-page, #f2f4f7); border: 1px solid var(--rpk-border, rgba(16, 24, 40, .08)); border-radius: var(--rpk-radius-card, 14px); overflow: hidden; }\n.ld-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--rpk-bg-card, #fff); border-bottom: 1px solid var(--rpk-hairline, #eaecf0); flex-wrap: wrap; }\n.ld-name { border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; font: 600 15px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); background: transparent; min-width: 160px; max-width: 320px; }\n.ld-name:hover, .ld-name:focus { border-color: var(--rpk-border-strong, #d0d5dd); outline: none; background: var(--rpk-bg-card, #fff); }\n.ld-saved { font-size: 11.5px; color: var(--rpk-text-muted, #667085); white-space: nowrap; }\n.ld-unsaved { color: var(--rpk-warn-fg, #b93815); }\n.ld-div { width: 1px; height: 20px; background: var(--rpk-hairline, #eaecf0); }\n.ld-zoom { width: 46px; text-align: center; font-weight: 500; color: var(--rpk-text, #101828); }\n.ld-sample { position: relative; }\n.ld-sample .lt-btn { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }\n.ld-picker {\n position: absolute; right: 0; top: 36px; z-index: 30; width: 320px; padding: 8px; display: grid; gap: 4px;\n background: var(--rpk-bg-card, #fff); border-radius: 12px; box-shadow: var(--rpk-shadow-popover, 0 18px 36px -16px rgba(16, 24, 40, .4)), 0 0 0 1px var(--rpk-border, rgba(16, 24, 40, .08));\n}\n.ld-pick { display: flex; justify-content: space-between; gap: 8px; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 7px 8px; cursor: pointer; font: 500 12px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); }\n.ld-pick:hover { background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-pick small { color: var(--rpk-text-muted, #667085); }\n.ld-pick-empty { padding: 8px; color: var(--rpk-text-muted, #667085); }\n\n.ld-body { flex: 1; display: grid; grid-template-columns: 240px 1fr 300px; min-height: 0; }\n.ld-left, .ld-right { background: var(--rpk-bg-card, #fff); overflow: auto; }\n.ld-left { border-right: 1px solid var(--rpk-hairline, #eaecf0); padding: 12px; display: flex; flex-direction: column; gap: 10px; }\n.ld-right { border-left: 1px solid var(--rpk-hairline, #eaecf0); }\n.ld-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }\n.ld-tile {\n min-height: 32px; border: 1px solid var(--rpk-border-strong, #d0d5dd); border-radius: 9px; background: var(--rpk-bg-card, #fff); display: flex; align-items: center; gap: 6px;\n padding: 4px 8px; font: 500 12px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); cursor: grab; text-align: left;\n white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;\n}\n.ld-tile i { font-style: normal; color: var(--rpk-text-muted, #667085); width: 14px; text-align: center; }\n.ld-tile:hover { border-color: var(--rpk-link, #1668e3); }\n.ld-tile[disabled] { opacity: .5; cursor: not-allowed; }\n.ld-layers { display: grid; gap: 2px; }\n.ld-layer { display: flex; justify-content: space-between; align-items: center; gap: 6px; text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; font: 500 12px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); cursor: pointer; }\n.ld-layer small { color: var(--rpk-text-subtle, #98a2b3); font-weight: 400; }\n.ld-layer:hover { background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-layer.on { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n\n.ld-center { position: relative; overflow: auto; display: flex; flex-direction: column; background-color: var(--rpk-bg-page, #e9ecf1); background-image: radial-gradient(rgba(16, 24, 40, .09) 1px, transparent 1px); background-size: 14px 14px; }\n.ld-board { position: relative; margin: 56px auto 40px; padding: 24px 0 0 24px; }\n.ld-ruler-x, .ld-ruler-y { position: absolute; background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-ruler-x { top: 0; left: 24px; height: 20px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); }\n.ld-ruler-y { top: 24px; left: 0; width: 20px; border-right: 1px solid var(--rpk-hairline, #eaecf0); }\n.ld-ruler-x i, .ld-ruler-y i { position: absolute; background: #c4cad4; }\n.ld-ruler-x i { bottom: 0; width: 1px; }\n.ld-ruler-y i { right: 0; height: 1px; }\n.ld-ruler-x b, .ld-ruler-y b { position: absolute; font: 500 9.5px var(--rpk-font-mono, monospace); color: var(--rpk-text-muted, #667085); }\n.ld-ruler-x b { left: 3px; top: -1px; }\n.ld-ruler-y b { top: 2px; left: -16px; }\n.ld-stage { position: relative; touch-action: none; }\n.ld-stage > canvas { position: absolute; left: 0; top: 0; }\n.ld-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(79, 70, 229, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 70, 229, .08) 1px, transparent 1px); }\n.ld-el { position: absolute; border: 1px dashed rgba(16, 24, 40, .22); cursor: move; box-sizing: border-box; }\n.ld-el:hover { border-color: rgba(79, 70, 229, .6); }\n.ld-el.warn { border: 1px dashed #f79009; }\n.ld-el.on { border: 1.5px solid #4f46e5; }\n.ld-h { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid #4f46e5; border-radius: 2px; box-sizing: border-box; }\n.ld-h-nw { left: -5px; top: -5px; cursor: nwse-resize; }\n.ld-h-n { left: calc(50% - 4.5px); top: -5px; cursor: ns-resize; }\n.ld-h-ne { right: -5px; top: -5px; cursor: nesw-resize; }\n.ld-h-e { right: -5px; top: calc(50% - 4.5px); cursor: ew-resize; }\n.ld-h-se { right: -5px; bottom: -5px; cursor: nwse-resize; }\n.ld-h-s { left: calc(50% - 4.5px); bottom: -5px; cursor: ns-resize; }\n.ld-h-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }\n.ld-h-w { left: -5px; top: calc(50% - 4.5px); cursor: ew-resize; }\n.ld-guide { position: absolute; background: #e11d74; pointer-events: none; }\n.ld-guide-x { top: -8px; bottom: -8px; width: 1px; }\n.ld-guide-y { left: -8px; right: -8px; height: 1px; }\n.ld-stocktag { margin-top: 10px; font-size: 11px; color: #8a6d00; }\n.ld-status { position: sticky; bottom: 0; margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--rpk-bg-card, #fff); border-top: 1px solid var(--rpk-hairline, #eaecf0); font-size: 11.5px; color: var(--rpk-text-muted, #667085); flex-wrap: wrap; }\n.ld-status b { color: var(--rpk-text, #101828); font-weight: 500; }\n\n.ld-sec { padding: 12px 16px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); display: grid; gap: 10px; }\n.ld-head { display: flex; align-items: center; gap: 4px; }\n.ld-title { font-size: 13.5px; font-weight: 600; color: var(--rpk-text, #101828); }\n.ld-label { font-size: 11px; font-weight: 500; color: var(--rpk-text-muted, #667085); }\n.ld-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.ld-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }\n\n.ld-check { flex: 1; display: grid; grid-template-columns: 1fr 320px; gap: 16px; padding: 16px; min-height: 0; overflow: auto; }\n.ld-check-main { display: grid; gap: 16px; align-content: start; min-width: 0; }\n.ld-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); flex-wrap: wrap; }\n.ld-card-head b { color: var(--rpk-text, #101828); font-weight: 600; }\n.ld-printer-body { padding: 14px 16px; display: grid; justify-items: center; gap: 10px; background: var(--rpk-bg-subtle, #f9fafb); border-radius: 0 0 14px 14px; overflow: auto; }\n.ld-problems { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 14px 16px; }\n.ld-problem { display: grid; gap: 6px; justify-items: start; text-align: left; border: 1px solid #fec84b; border-radius: 10px; padding: 10px; background: var(--rpk-bg-card, #fff); cursor: pointer; font: inherit; }\n.ld-problem.on { box-shadow: 0 0 0 3px rgba(247, 144, 9, .25); }\n.ld-pmsg { color: var(--rpk-warn-fg, #b93815); font-size: 11.5px; }\n.ld-summary { padding: 16px; display: grid; gap: 12px; align-content: start; }\n.ld-metric { font-size: 26px; font-weight: 600; color: var(--rpk-text, #101828); letter-spacing: -.02em; }\n.ld-bar { height: 8px; border-radius: 999px; overflow: hidden; display: flex; background: var(--rpk-bg-muted, #f2f4f7); }\n.ld-bar .ok { background: #12b76a; }\n.ld-bar .bad { background: #f79009; }\n.ld-li { display: flex; align-items: center; gap: 8px; }\n.ld-li i { width: 8px; height: 8px; border-radius: 3px; }\n.ld-li i.ok { background: #12b76a; }\n.ld-li i.bad { background: #f79009; }\n.ld-li b { margin-left: auto; color: var(--rpk-text, #101828); font-variant-numeric: tabular-nums; }\n.ld-fix { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--rpk-border-strong, #d0d5dd); border-radius: 10px; padding: 10px 12px; }\n.ld-fix b { color: var(--rpk-text, #101828); font-weight: 600; }\n.ld-fix p { margin: 4px 0 0; }\n\n@media (max-width: 1100px) {\n .ld-body { grid-template-columns: 200px 1fr 260px; }\n .ld-check { grid-template-columns: 1fr; }\n}\n.ld-upload { cursor: pointer; justify-self: start; }\n.ld-upload.disabled { opacity: .5; pointer-events: none; }\n\n.lt-canvas { display: block; background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 40, .12), 0 1px 2px rgba(16, 24, 40, .08); border-radius: 2px; }\n.lt-pixel { image-rendering: pixelated; }\n.ld-actions { display: inline-flex; gap: 8px; align-items: center; }\n.ld-empty { padding: 40px 16px; text-align: center; color: var(--rpk-text-muted, #667085); }\n[hidden] { display: none !important; }\n';
4
+ exports.DESIGNER_CSS = ':host {\n display: block;\n height: 100%;\n font-family: var(--rpk-font, Poppins, system-ui, sans-serif);\n color: var(--rpk-text-body, #344054);\n font-size: 12.5px;\n}\n\n.lt-sp { flex: 1; }\n\n.lt-btn {\n height: 36px; padding: 0 14px; border-radius: var(--rpk-radius-control, 10px); display: inline-flex; align-items: center; gap: 7px;\n font: 500 12.5px var(--rpk-font, Poppins, sans-serif); border: 1px solid var(--rpk-border-strong, #d0d5dd);\n background: var(--rpk-bg-card, #fff); color: var(--rpk-text-body, #344054); cursor: pointer; white-space: nowrap;\n}\n.lt-btn:hover { background: var(--rpk-bg-subtle, #f9fafb); }\n.lt-btn[disabled] { opacity: .55; cursor: not-allowed; }\n.lt-btn-primary { background: var(--rpk-accent-grad, linear-gradient(135deg, #2563eb, #7c3aed)); border: 0; color: #fff; box-shadow: 0 6px 16px -8px rgba(79, 70, 229, .8); }\n.lt-btn-primary:hover { background: var(--rpk-accent-grad, linear-gradient(135deg, #2563eb, #7c3aed)); filter: brightness(1.05); }\n.lt-btn-danger { background: var(--rpk-bg-card, #fff); border-color: var(--rpk-danger-border, #fda29b); color: var(--rpk-danger-fg, #b42318); }\n.lt-btn-sm { height: 30px; padding: 0 10px; border-radius: 8px; }\n\n.lt-icon-btn {\n width: 28px; height: 28px; border-radius: 7px; border: 0; background: transparent; color: var(--rpk-text-muted, #667085);\n display: inline-grid; place-items: center; cursor: pointer; font-size: 15px; flex: none;\n}\n.lt-icon-btn:hover { background: var(--rpk-bg-muted, #f2f4f7); }\n.lt-icon-btn.on { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n\n.lt-input {\n height: 34px; border: 1px solid var(--rpk-border-strong, #d0d5dd); border-radius: 9px; background: var(--rpk-bg-card, #fff);\n color: var(--rpk-text, #101828); font: 500 12.5px var(--rpk-font, Poppins, sans-serif); padding: 0 10px; outline: none; width: 100%; box-sizing: border-box;\n}\n.lt-input:focus { border: 1.5px solid var(--rpk-link, #1668e3); box-shadow: var(--rpk-focus-ring, 0 0 0 3px rgba(22, 104, 227, .14)); }\n.lt-num { width: 90px; }\nselect.lt-input { padding-right: 6px; }\n\n.lt-seg { display: inline-flex; padding: 3px; background: var(--rpk-bg-muted, #f2f4f7); border-radius: 10px; gap: 2px; }\n.lt-seg button {\n height: 28px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; border: 0; background: transparent;\n font: 500 12.5px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text-muted, #667085); cursor: pointer; white-space: nowrap;\n}\n.lt-seg button b { font-size: 10.5px; padding: 1px 6px; border-radius: 999px; background: rgba(16, 24, 40, .06); font-weight: 500; }\n.lt-seg button.on { background: var(--rpk-bg-card, #fff); color: var(--rpk-text, #101828); box-shadow: 0 1px 2px rgba(16, 24, 40, .1); }\n.lt-seg button.on b { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n.lt-seg button[disabled] { opacity: .4; cursor: not-allowed; }\n.lt-seg-sm button { height: 24px; padding: 0 9px; font-size: 11.5px; }\n\n.lt-eyebrow { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--rpk-text-subtle, #98a2b3); }\n.lt-chip { height: 22px; padding: 0 8px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; background: var(--rpk-bg-muted, #f2f4f7); color: var(--rpk-text-body, #344054); white-space: nowrap; }\n.lt-chip-acc { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n.lt-chip-warn { background: var(--rpk-warn-bg, #fff4ed); color: var(--rpk-warn-fg, #b93815); }\n\n.lt-overlay { position: fixed; inset: 0; background: var(--rpk-bg-overlay, rgba(16, 24, 40, .45)); display: grid; place-items: center; z-index: 1100; padding: 16px; }\n.lt-dialog { width: min(900px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--rpk-bg-card, #fff); border-radius: 16px; box-shadow: var(--rpk-shadow-popover, 0 18px 36px -16px rgba(16, 24, 40, .4)); }\n.lt-dialog-sm { width: min(460px, 100%); }\n.lt-dh { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); }\n.lt-dh > div { flex: 1; }\n.lt-dt { font-size: 16px; font-weight: 600; color: var(--rpk-text, #101828); }\n.lt-ds { font-size: 12px; color: var(--rpk-text-muted, #667085); margin-top: 2px; }\n.lt-dfoot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--rpk-hairline, #eaecf0); }\n.lt-error { color: var(--rpk-danger-fg, #b42318); font-size: 12px; }\n.lt-field { display: grid; gap: 6px; }\n.lt-row { display: flex; gap: 10px; align-items: center; }\n.lt-wrap { flex-wrap: wrap; gap: 16px; align-items: flex-start; }\n.lt-inline { display: inline-flex; align-items: center; gap: 6px; color: var(--rpk-text-subtle, #98a2b3); }\n.lt-check { display: inline-flex; align-items: center; gap: 8px; color: var(--rpk-text-body, #344054); }\n.lt-note { margin: 0; font-size: 12px; color: var(--rpk-text-muted, #667085); }\n\n.lt-card { background: var(--rpk-bg-card, #fff); border: 1px solid var(--rpk-border, rgba(16, 24, 40, .08)); border-radius: var(--rpk-radius-card, 14px); }\n.lt-empty { padding: 40px 16px; text-align: center; color: var(--rpk-text-muted, #667085); }\n.lt-warn-text { color: var(--rpk-warn-fg, #b93815); }\n\n.ld { display: flex; flex-direction: column; height: 100%; min-height: 520px; background: var(--rpk-bg-page, #f2f4f7); border: 1px solid var(--rpk-border, rgba(16, 24, 40, .08)); border-radius: var(--rpk-radius-card, 14px); overflow: hidden; }\n.ld-top { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--rpk-bg-card, #fff); border-bottom: 1px solid var(--rpk-hairline, #eaecf0); flex-wrap: wrap; }\n.ld-name { border: 1px solid transparent; border-radius: 8px; padding: 4px 8px; font: 600 15px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); background: transparent; min-width: 160px; max-width: 320px; }\n.ld-name:hover, .ld-name:focus { border-color: var(--rpk-border-strong, #d0d5dd); outline: none; background: var(--rpk-bg-card, #fff); }\n.ld-saved { font-size: 11.5px; color: var(--rpk-text-muted, #667085); white-space: nowrap; }\n.ld-unsaved { color: var(--rpk-warn-fg, #b93815); }\n.ld-div { width: 1px; height: 20px; background: var(--rpk-hairline, #eaecf0); }\n.ld-zoom { width: 46px; text-align: center; font-weight: 500; color: var(--rpk-text, #101828); }\n.ld-sample { position: relative; }\n.ld-sample .lt-btn { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }\n.ld-picker {\n position: absolute; right: 0; top: 36px; z-index: 30; width: 320px; padding: 8px; display: grid; gap: 4px;\n background: var(--rpk-bg-card, #fff); border-radius: 12px; box-shadow: var(--rpk-shadow-popover, 0 18px 36px -16px rgba(16, 24, 40, .4)), 0 0 0 1px var(--rpk-border, rgba(16, 24, 40, .08));\n}\n.ld-pick { display: flex; justify-content: space-between; gap: 8px; text-align: left; border: 0; background: transparent; border-radius: 8px; padding: 7px 8px; cursor: pointer; font: 500 12px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); }\n.ld-pick:hover { background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-pick small { color: var(--rpk-text-muted, #667085); }\n.ld-pick-empty { padding: 8px; color: var(--rpk-text-muted, #667085); }\n\n.ld-body { flex: 1; display: grid; grid-template-columns: 272px 1fr 300px; min-height: 0; }\n.ld-left, .ld-right { background: var(--rpk-bg-card, #fff); overflow: auto; }\n.ld-left { border-right: 1px solid var(--rpk-hairline, #eaecf0); padding: 14px 12px 16px; display: flex; flex-direction: column; gap: 16px; }\n.ld-left > * { flex: none; }\n.ld-search { position: relative; display: block; }\n.ld-search .ld-ico { position: absolute; left: 11px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--rpk-text-subtle, #98a2b3); pointer-events: none; }\n.ld-search .lt-input { padding-left: 34px; }\n.ld-group { display: grid; gap: 8px; }\n.ld-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 18px; }\n.ld-count { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--rpk-bg-muted, #f2f4f7); color: var(--rpk-text-muted, #667085); font-size: 10.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }\n.ld-tip { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 9px 10px; border-radius: 10px; background: var(--rpk-bg-subtle, #f9fafb); border: 1px solid var(--rpk-hairline, #eaecf0); color: var(--rpk-text-muted, #667085); font-size: 11.5px; line-height: 1.45; }\n.ld-tip .ld-ico { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--rpk-link, #1668e3); }\n.ld-none { grid-column: 1 / -1; padding: 6px 2px; }\n.ld-ico { display: block; width: 16px; height: 16px; }\n.ld-right { border-left: 1px solid var(--rpk-hairline, #eaecf0); }\n.ld-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }\n.ld-tile {\n min-height: 36px; border: 1px solid var(--rpk-border, rgba(16, 24, 40, .1)); border-radius: 10px; background: var(--rpk-bg-card, #fff); display: flex; align-items: center; gap: 7px;\n padding: 5px 7px 5px 5px; font: 500 12px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); cursor: grab; text-align: left;\n min-width: 0; box-shadow: 0 1px 2px rgba(16, 24, 40, .05);\n}\n.ld-tile-ico { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n.ld-tile-ico .ld-ico { width: 14px; height: 14px; }\n.ld-tiles-basic .ld-tile-ico { background: var(--rpk-bg-muted, #f2f4f7); color: var(--rpk-text-body, #344054); }\n.ld-tile-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ld-tile:hover { border-color: var(--rpk-link, #1668e3); background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-tile:active { cursor: grabbing; }\n.ld-tile:focus-visible { outline: none; border-color: var(--rpk-link, #1668e3); box-shadow: var(--rpk-focus-ring, 0 0 0 3px rgba(22, 104, 227, .14)); }\n.ld-tile[disabled] { opacity: .5; cursor: not-allowed; }\n.ld-tile[disabled]:hover { border-color: var(--rpk-border, rgba(16, 24, 40, .1)); background: var(--rpk-bg-card, #fff); }\n.ld-layers { display: grid; gap: 2px; }\n.ld-layer { position: relative; display: flex; align-items: center; gap: 9px; min-height: 34px; text-align: left; border: 0; background: transparent; padding: 6px 8px 6px 10px; border-radius: 8px; font: 500 12px var(--rpk-font, Poppins, sans-serif); color: var(--rpk-text, #101828); cursor: pointer; }\n.ld-layer .ld-ico { flex: none; width: 15px; height: 15px; color: var(--rpk-text-muted, #667085); }\n.ld-layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ld-layer small { flex: none; padding: 1px 6px; border-radius: 999px; background: var(--rpk-bg-muted, #f2f4f7); color: var(--rpk-text-muted, #667085); font-size: 10px; font-weight: 500; }\n.ld-layer:hover { background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-layer.on { background: var(--rpk-accent-soft, #eef2ff); color: var(--rpk-accent-ink, #3730a3); }\n.ld-layer.on .ld-ico { color: var(--rpk-accent-ink, #3730a3); }\n.ld-layer.on::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--rpk-link, #1668e3); }\n\n.ld-center { position: relative; overflow: auto; display: flex; flex-direction: column; background-color: var(--rpk-bg-page, #e9ecf1); background-image: radial-gradient(rgba(16, 24, 40, .09) 1px, transparent 1px); background-size: 14px 14px; }\n.ld-board { position: relative; margin: 56px auto 40px; padding: 24px 0 0 24px; }\n.ld-ruler-x, .ld-ruler-y { position: absolute; background: var(--rpk-bg-subtle, #f9fafb); }\n.ld-ruler-x { top: 0; left: 24px; height: 20px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); }\n.ld-ruler-y { top: 24px; left: 0; width: 20px; border-right: 1px solid var(--rpk-hairline, #eaecf0); }\n.ld-ruler-x i, .ld-ruler-y i { position: absolute; background: #c4cad4; }\n.ld-ruler-x i { bottom: 0; width: 1px; }\n.ld-ruler-y i { right: 0; height: 1px; }\n.ld-ruler-x b, .ld-ruler-y b { position: absolute; font: 500 9.5px var(--rpk-font-mono, monospace); color: var(--rpk-text-muted, #667085); }\n.ld-ruler-x b { left: 3px; top: -1px; }\n.ld-ruler-y b { top: 2px; left: -16px; }\n.ld-stage { position: relative; touch-action: none; }\n.ld-stage > canvas { position: absolute; left: 0; top: 0; }\n.ld-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(79, 70, 229, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 70, 229, .08) 1px, transparent 1px); }\n.ld-el { position: absolute; border: 1px dashed rgba(16, 24, 40, .22); cursor: move; box-sizing: border-box; }\n.ld-el:hover { border-color: rgba(79, 70, 229, .6); }\n.ld-el.warn { border: 1px dashed #f79009; }\n.ld-el.on { border: 1.5px solid #4f46e5; }\n.ld-h { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid #4f46e5; border-radius: 2px; box-sizing: border-box; }\n.ld-h-nw { left: -5px; top: -5px; cursor: nwse-resize; }\n.ld-h-n { left: calc(50% - 4.5px); top: -5px; cursor: ns-resize; }\n.ld-h-ne { right: -5px; top: -5px; cursor: nesw-resize; }\n.ld-h-e { right: -5px; top: calc(50% - 4.5px); cursor: ew-resize; }\n.ld-h-se { right: -5px; bottom: -5px; cursor: nwse-resize; }\n.ld-h-s { left: calc(50% - 4.5px); bottom: -5px; cursor: ns-resize; }\n.ld-h-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }\n.ld-h-w { left: -5px; top: calc(50% - 4.5px); cursor: ew-resize; }\n.ld-guide { position: absolute; background: #e11d74; pointer-events: none; }\n.ld-guide-x { top: -8px; bottom: -8px; width: 1px; }\n.ld-guide-y { left: -8px; right: -8px; height: 1px; }\n.ld-stocktag { margin-top: 10px; font-size: 11px; color: #8a6d00; }\n.ld-status { position: sticky; bottom: 0; margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--rpk-bg-card, #fff); border-top: 1px solid var(--rpk-hairline, #eaecf0); font-size: 11.5px; color: var(--rpk-text-muted, #667085); flex-wrap: wrap; }\n.ld-status b { color: var(--rpk-text, #101828); font-weight: 500; }\n\n.ld-sec { padding: 12px 16px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); display: grid; gap: 10px; }\n.ld-head { display: flex; align-items: center; gap: 4px; }\n.ld-title { font-size: 13.5px; font-weight: 600; color: var(--rpk-text, #101828); }\n.ld-label { font-size: 11px; font-weight: 500; color: var(--rpk-text-muted, #667085); }\n.ld-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }\n.ld-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }\n\n.ld-check { flex: 1; display: grid; grid-template-columns: 1fr 320px; gap: 16px; padding: 16px; min-height: 0; overflow: auto; }\n.ld-check-main { display: grid; gap: 16px; align-content: start; min-width: 0; }\n.ld-card-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--rpk-hairline, #eaecf0); flex-wrap: wrap; }\n.ld-card-head b { color: var(--rpk-text, #101828); font-weight: 600; }\n.ld-printer-body { padding: 14px 16px; display: grid; justify-items: center; gap: 10px; background: var(--rpk-bg-subtle, #f9fafb); border-radius: 0 0 14px 14px; overflow: auto; }\n.ld-problems { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 14px 16px; }\n.ld-problem { display: grid; gap: 6px; justify-items: start; text-align: left; border: 1px solid #fec84b; border-radius: 10px; padding: 10px; background: var(--rpk-bg-card, #fff); cursor: pointer; font: inherit; }\n.ld-problem.on { box-shadow: 0 0 0 3px rgba(247, 144, 9, .25); }\n.ld-pmsg { color: var(--rpk-warn-fg, #b93815); font-size: 11.5px; }\n.ld-summary { padding: 16px; display: grid; gap: 12px; align-content: start; }\n.ld-metric { font-size: 26px; font-weight: 600; color: var(--rpk-text, #101828); letter-spacing: -.02em; }\n.ld-bar { height: 8px; border-radius: 999px; overflow: hidden; display: flex; background: var(--rpk-bg-muted, #f2f4f7); }\n.ld-bar .ok { background: #12b76a; }\n.ld-bar .bad { background: #f79009; }\n.ld-li { display: flex; align-items: center; gap: 8px; }\n.ld-li i { width: 8px; height: 8px; border-radius: 3px; }\n.ld-li i.ok { background: #12b76a; }\n.ld-li i.bad { background: #f79009; }\n.ld-li b { margin-left: auto; color: var(--rpk-text, #101828); font-variant-numeric: tabular-nums; }\n.ld-fix { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; border: 1px solid var(--rpk-border-strong, #d0d5dd); border-radius: 10px; padding: 10px 12px; }\n.ld-fix b { color: var(--rpk-text, #101828); font-weight: 600; }\n.ld-fix p { margin: 4px 0 0; }\n\n@media (max-width: 1100px) {\n .ld-body { grid-template-columns: 220px 1fr 260px; }\n .ld-tiles { grid-template-columns: 1fr; }\n .ld-check { grid-template-columns: 1fr; }\n}\n.ld-upload { cursor: pointer; justify-self: start; }\n.ld-upload.disabled { opacity: .5; pointer-events: none; }\n\n.lt-canvas { display: block; background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 40, .12), 0 1px 2px rgba(16, 24, 40, .08); border-radius: 2px; }\n.lt-pixel { image-rendering: pixelated; }\n.ld-actions { display: inline-flex; gap: 8px; align-items: center; }\n.ld-empty { padding: 40px 16px; text-align: center; color: var(--rpk-text-muted, #667085); }\n[hidden] { display: none !important; }\n';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "retail-print-kit",
3
- "version": "0.3.0",
3
+ "version": "0.3.1",
4
4
  "description": "ESC/POS thermal receipt printer, cash drawer and label printer (ZPL, TSPL, EZPL) library for Node.js and Electron. Epson, Star TSP100 and compatibles over USB, network or serial, with templates, previews, a visual designer and a CLI.",
5
5
  "author": "Arkaprova Majumder <arka162@gmail.com>",
6
6
  "license": "MIT",