{"_id":"@burnmark-io/designer-react","_rev":"5-84b56c09c2a4a3998e205ed9bf4f799f","name":"@burnmark-io/designer-react","dist-tags":{"latest":"0.5.1"},"versions":{"0.0.1":{"name":"@burnmark-io/designer-react","version":"0.0.1","keywords":["label","designer","react","hook","thermal","printer","barcode"],"author":{"name":"Mannes Brak"},"license":"MIT","_id":"@burnmark-io/designer-react@0.0.1","maintainers":[{"name":"bankersman","email":"broodje@warmvle.es"}],"homepage":"https://burnmark-io.github.io/designer-core/","bugs":{"url":"https://github.com/burnmark-io/designer-core/issues"},"dist":{"shasum":"b0129ea12a0a154974f4876abe23231ad8ceab4b","tarball":"https://registry.npmjs.org/@burnmark-io/designer-react/-/designer-react-0.0.1.tgz","fileCount":7,"integrity":"sha512-oBjTvVCIBlL0jbFqUNIWVHQBqsfeNXWvTUmmTY+RmBuRhNfuxOJFThbY+w2/cjFFbtU8aZDiR9WePnTOh84eug==","signatures":[{"sig":"MEUCIQCVTjqE4iCAoMTV/Txs9nV/lJqMeRXY4buYzvII797wbAIgI+4OHCILS+FRbmVFA1PLKPZ4bhgGlldGtQzxfERO26g=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":29852},"type":"module","_from":"file:burnmark-io-designer-react-0.0.1.tgz","types":"./src/index.ts","engines":{"node":">=24.0.0"},"exports":{".":{"types":"./src/index.ts","import":"./dist/index.js"}},"funding":[{"url":"https://github.com/sponsors/mannes","type":"github"},{"url":"https://ko-fi.com/mannes","type":"ko-fi"}],"scripts":{"test":"vitest run","build":"tsc -p tsconfig.build.json","typecheck":"tsc -p tsconfig.json --noEmit","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"bankersman","email":"broodje@warmvle.es"},"_resolved":"/tmp/cbdb0d0c2d34eddac3ef3910d55c2360/burnmark-io-designer-react-0.0.1.tgz","_integrity":"sha512-oBjTvVCIBlL0jbFqUNIWVHQBqsfeNXWvTUmmTY+RmBuRhNfuxOJFThbY+w2/cjFFbtU8aZDiR9WePnTOh84eug==","repository":{"url":"git+https://github.com/burnmark-io/designer-core.git","type":"git","directory":"packages/react"},"_npmVersion":"11.9.0","description":"React hook for the burnmark label design engine","directories":{},"sideEffects":false,"_nodeVersion":"24.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.0","vitest":"^2.0.0","happy-dom":"^15.0.0","react-dom":"^18.3.0","typescript":"~5.5.0","@types/node":"^22.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@mbtech-nl/tsconfig":"^1.0.0","@vitest/coverage-v8":"^2.0.0","@testing-library/react":"^16.0.0","@burnmark-io/designer-core":"0.0.1"},"peerDependencies":{"react":">=18.0.0","@burnmark-io/designer-core":"0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/designer-react_0.0.1_1776993791770_0.6094480048633011","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@burnmark-io/designer-react","version":"0.1.0","keywords":["label","designer","react","hook","thermal","printer","barcode"],"author":{"name":"Mannes Brak"},"license":"MIT","_id":"@burnmark-io/designer-react@0.1.0","maintainers":[{"name":"bankersman","email":"broodje@warmvle.es"}],"homepage":"https://burnmark-io.github.io/designer-core/","bugs":{"url":"https://github.com/burnmark-io/designer-core/issues"},"dist":{"shasum":"2415c7b35e47200bcf11112c363cd9e5d3573e9e","tarball":"https://registry.npmjs.org/@burnmark-io/designer-react/-/designer-react-0.1.0.tgz","fileCount":7,"integrity":"sha512-sRcPdpC4dPMNQMvf96fnRbLLkqhG+DJWpkQy8E7DvDgzzl8gEHNKOizqytwgDfLTeObDqb82X80azpY3GnSnKw==","signatures":[{"sig":"MEQCICijMz6whAws3726EXHzcxl2zV9JiZv/QLf7k/tbNxlBAiAvK16/Z4yBdAXdXdVwSxz/IwmS9vjey3Wx+JDZNkGA/Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@burnmark-io%2fdesigner-react@0.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":28211},"type":"module","_from":"file:burnmark-io-designer-react-0.1.0.tgz","types":"./src/index.ts","engines":{"node":">=24.0.0"},"exports":{".":{"types":"./src/index.ts","import":"./dist/index.js"}},"funding":[{"url":"https://github.com/sponsors/mannes","type":"github"},{"url":"https://ko-fi.com/mannes","type":"ko-fi"}],"scripts":{"test":"vitest run","build":"tsc -p tsconfig.build.json","typecheck":"tsc -p tsconfig.json --noEmit","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:c32a7981-de8a-4aa8-a974-3baf0284867d"}},"_resolved":"/tmp/af997d244060ea6e601c13b8a436e508/burnmark-io-designer-react-0.1.0.tgz","_integrity":"sha512-sRcPdpC4dPMNQMvf96fnRbLLkqhG+DJWpkQy8E7DvDgzzl8gEHNKOizqytwgDfLTeObDqb82X80azpY3GnSnKw==","repository":{"url":"git+https://github.com/burnmark-io/designer-core.git","type":"git","directory":"packages/react"},"_npmVersion":"11.11.0","description":"React hook for the burnmark label design engine","directories":{},"sideEffects":false,"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.0","vitest":"^2.0.0","happy-dom":"^15.0.0","react-dom":"^18.3.0","typescript":"~5.5.0","@types/node":"^22.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@mbtech-nl/tsconfig":"^1.0.0","@vitest/coverage-v8":"^2.0.0","@testing-library/react":"^16.0.0","@burnmark-io/designer-core":"0.1.0"},"peerDependencies":{"react":">=18.0.0","@burnmark-io/designer-core":"0.1.0"},"_npmOperationalInternal":{"tmp":"tmp/designer-react_0.1.0_1777075576115_0.5598188003173425","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@burnmark-io/designer-react","version":"0.2.0","keywords":["label","designer","react","hook","thermal","printer","barcode"],"author":{"name":"Mannes Brak"},"license":"MIT","_id":"@burnmark-io/designer-react@0.2.0","maintainers":[{"name":"bankersman","email":"broodje@warmvle.es"}],"homepage":"https://burnmark-io.github.io/designer-core/","bugs":{"url":"https://github.com/burnmark-io/designer-core/issues"},"dist":{"shasum":"214e67bbf97a4d0f7ad6fcc340e9035337387ecb","tarball":"https://registry.npmjs.org/@burnmark-io/designer-react/-/designer-react-0.2.0.tgz","fileCount":7,"integrity":"sha512-4Bo6QAL4Bs1RyzWqQuly9kkGRWzl3SWtrhQ4Tj1J0aDlL+qh8sAPV06pAVvS2f8lgnLN3VwumOEV2CuFhGRHNg==","signatures":[{"sig":"MEQCIDqDjj72FKZh4BJvQyXX+ggm86Xwd3NlxZ33pYjBDeVBAiAtt0UmEcGFtl2tMvm2butCRAZYUYtOqBWCWK5EWpp8xA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@burnmark-io%2fdesigner-react@0.2.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":31309},"type":"module","_from":"file:burnmark-io-designer-react-0.2.0.tgz","types":"./src/index.ts","engines":{"node":">=24.0.0"},"exports":{".":{"types":"./src/index.ts","import":"./dist/index.js"}},"funding":[{"url":"https://github.com/sponsors/mannes","type":"github"},{"url":"https://ko-fi.com/mannes","type":"ko-fi"}],"scripts":{"test":"vitest run","build":"tsc -p tsconfig.build.json","typecheck":"tsc -p tsconfig.json --noEmit","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:c32a7981-de8a-4aa8-a974-3baf0284867d"}},"_resolved":"/tmp/73e36d5ee2130f6ea2107545003ba82c/burnmark-io-designer-react-0.2.0.tgz","_integrity":"sha512-4Bo6QAL4Bs1RyzWqQuly9kkGRWzl3SWtrhQ4Tj1J0aDlL+qh8sAPV06pAVvS2f8lgnLN3VwumOEV2CuFhGRHNg==","repository":{"url":"git+https://github.com/burnmark-io/designer-core.git","type":"git","directory":"packages/react"},"_npmVersion":"11.11.0","description":"React hook for the burnmark label design engine","directories":{},"sideEffects":false,"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.0","vitest":"^2.0.0","happy-dom":"^15.0.0","react-dom":"^18.3.0","typescript":"~5.5.0","@types/node":"^22.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@mbtech-nl/tsconfig":"^1.0.1","@vitest/coverage-v8":"^2.0.0","@testing-library/react":"^16.0.0","@burnmark-io/designer-core":"0.2.0"},"peerDependencies":{"react":">=18.0.0","@burnmark-io/designer-core":"0.2.0"},"_npmOperationalInternal":{"tmp":"tmp/designer-react_0.2.0_1777318553225_0.12763949427864563","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@burnmark-io/designer-react","version":"0.5.0","keywords":["label","designer","react","hook","thermal","printer","barcode"],"author":{"name":"Mannes Brak"},"license":"MIT","_id":"@burnmark-io/designer-react@0.5.0","maintainers":[{"name":"bankersman","email":"broodje@warmvle.es"}],"homepage":"https://burnmark-io.github.io/designer-core/","bugs":{"url":"https://github.com/burnmark-io/designer-core/issues"},"dist":{"shasum":"2bc67c76b014f832944a49a560531ad3f4df852c","tarball":"https://registry.npmjs.org/@burnmark-io/designer-react/-/designer-react-0.5.0.tgz","fileCount":7,"integrity":"sha512-4vxzUn6DGVa7wXlsFnYNvsRefHAwnCTKvPIjQobV4zbUiR63cbpMLXN82AvXSJ/oKT6VYVPEa4eQL7PFEC+1NQ==","signatures":[{"sig":"MEQCIBi5QpN2t2iVKo3PI+pVokTQVT7A/hk3vjhk6/DYJRz1AiA+q+VHgYqeylKSt0aDmpHyC2gAdiZ5TwtExJhIrDKpuw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@burnmark-io%2fdesigner-react@0.5.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":31309},"type":"module","_from":"file:burnmark-io-designer-react-0.5.0.tgz","types":"./src/index.ts","engines":{"node":">=24.0.0"},"exports":{".":{"types":"./src/index.ts","import":"./dist/index.js"}},"funding":[{"url":"https://github.com/sponsors/mannes","type":"github"},{"url":"https://ko-fi.com/mannes","type":"ko-fi"}],"scripts":{"test":"vitest run","build":"tsc -p tsconfig.build.json","typecheck":"tsc -p tsconfig.json --noEmit","test:coverage":"vitest run --coverage"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:c32a7981-de8a-4aa8-a974-3baf0284867d"}},"_resolved":"/tmp/c031bedd3bff091757dab5c338870dd1/burnmark-io-designer-react-0.5.0.tgz","_integrity":"sha512-4vxzUn6DGVa7wXlsFnYNvsRefHAwnCTKvPIjQobV4zbUiR63cbpMLXN82AvXSJ/oKT6VYVPEa4eQL7PFEC+1NQ==","repository":{"url":"git+https://github.com/burnmark-io/designer-core.git","type":"git","directory":"packages/react"},"_npmVersion":"11.11.0","description":"React hook for the burnmark label design engine","directories":{},"sideEffects":false,"_nodeVersion":"24.14.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.3.0","vitest":"^2.0.0","happy-dom":"^15.0.0","react-dom":"^18.3.0","typescript":"~5.5.0","@types/node":"^22.0.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0","@mbtech-nl/tsconfig":"^1.0.1","@vitest/coverage-v8":"^2.0.0","@testing-library/react":"^16.0.0","@burnmark-io/designer-core":"0.5.0"},"peerDependencies":{"react":">=18.0.0","@burnmark-io/designer-core":"0.5.0"},"_npmOperationalInternal":{"tmp":"tmp/designer-react_0.5.0_1777837874704_0.4050372718493449","host":"s3://npm-registry-packages-npm-production"}},"0.5.1":{"name":"@burnmark-io/designer-react","version":"0.5.1","description":"React hook for the burnmark label design engine","type":"module","author":{"name":"Mannes Brak"},"license":"MIT","homepage":"https://burnmark-io.github.io/designer-core/","repository":{"type":"git","url":"git+https://github.com/burnmark-io/designer-core.git","directory":"packages/react"},"bugs":{"url":"https://github.com/burnmark-io/designer-core/issues"},"funding":[{"type":"github","url":"https://github.com/sponsors/mannes"},{"type":"ko-fi","url":"https://ko-fi.com/mannes"}],"keywords":["label","designer","react","hook","thermal","printer","barcode"],"engines":{"node":">=24.0.0"},"publishConfig":{"access":"public"},"sideEffects":false,"types":"./src/index.ts","exports":{".":{"types":"./src/index.ts","import":"./dist/index.js"}},"peerDependencies":{"react":">=18.0.0","@burnmark-io/designer-core":"0.5.1"},"devDependencies":{"@mbtech-nl/tsconfig":"^1.0.1","@testing-library/react":"^16.0.0","@types/node":"^22.0.0","@types/react":"^18.3.0","@vitest/coverage-v8":"^2.0.0","happy-dom":"^15.0.0","react":"^18.3.0","react-dom":"^18.3.0","@types/react-dom":"^18.3.0","typescript":"~5.5.0","vitest":"^2.0.0","@burnmark-io/designer-core":"0.5.1"},"scripts":{"build":"tsc -p tsconfig.build.json","typecheck":"tsc -p tsconfig.json --noEmit","test":"vitest run","test:coverage":"vitest run --coverage"},"_id":"@burnmark-io/designer-react@0.5.1","_integrity":"sha512-q8hUA2no1iuCMZFcsff3xNhGa1Pi45VMa1lKNrEqJHrX9RA3qhdRquY5r1u0fNOQzyVEiFwBRBB4hKmbzu6KRg==","_resolved":"/tmp/05f5f6edac392dc62e0a09522970023b/burnmark-io-designer-react-0.5.1.tgz","_from":"file:burnmark-io-designer-react-0.5.1.tgz","_nodeVersion":"24.14.1","_npmVersion":"11.11.0","dist":{"integrity":"sha512-q8hUA2no1iuCMZFcsff3xNhGa1Pi45VMa1lKNrEqJHrX9RA3qhdRquY5r1u0fNOQzyVEiFwBRBB4hKmbzu6KRg==","shasum":"087cbe85fc5f801da584238a37dffd7c6db5c5b8","tarball":"https://registry.npmjs.org/@burnmark-io/designer-react/-/designer-react-0.5.1.tgz","fileCount":7,"unpackedSize":31309,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@burnmark-io%2fdesigner-react@0.5.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEtl0K7GwS1jKsDzpMIFFwC6uqUCficITg9xxVXAivkgAiBn5Wt/AdoZHIQsuYum7JOfXQ+SyhCc4WO50HqPqBc8Vg=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:c32a7981-de8a-4aa8-a974-3baf0284867d"}},"directories":{},"maintainers":[{"name":"bankersman","email":"broodje@warmvle.es"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/designer-react_0.5.1_1777910503487_0.38764428973126375"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-24T01:23:11.678Z","modified":"2026-05-04T16:01:43.977Z","0.0.1":"2026-04-24T01:23:11.902Z","0.1.0":"2026-04-25T00:06:16.263Z","0.2.0":"2026-04-27T19:35:53.357Z","0.5.0":"2026-05-03T19:51:14.862Z","0.5.1":"2026-05-04T16:01:43.632Z"},"bugs":{"url":"https://github.com/burnmark-io/designer-core/issues"},"author":{"name":"Mannes Brak"},"license":"MIT","homepage":"https://burnmark-io.github.io/designer-core/","keywords":["label","designer","react","hook","thermal","printer","barcode"],"repository":{"type":"git","url":"git+https://github.com/burnmark-io/designer-core.git","directory":"packages/react"},"description":"React hook for the burnmark label design engine","maintainers":[{"name":"bankersman","email":"broodje@warmvle.es"}],"readme":"# @burnmark-io/designer-react\n\nReact 18+ hook for [`@burnmark-io/designer-core`](https://burnmark-io.github.io/designer-core/) — the headless label design engine behind [burnmark.io](https://burnmark.io).\n\nWraps a `LabelDesigner` instance with reactive state, a debounced render loop with stale-result cancellation, selection management, and the full designer action surface.\n\n## Install\n\n```sh\npnpm add @burnmark-io/designer-react @burnmark-io/designer-core react\n```\n\n`react` (>=18) and `@burnmark-io/designer-core` are peer dependencies.\n\n## Quick start\n\n```tsx\nimport { useLabelDesigner } from '@burnmark-io/designer-react';\n\nexport function Editor() {\n  const { document, bitmap, isRendering, canUndo, canRedo, add, undo, redo } = useLabelDesigner({\n    canvas: { widthDots: 696, heightDots: 0, dpi: 300 },\n  });\n\n  function addHello() {\n    add({\n      type: 'text',\n      x: 10,\n      y: 10,\n      width: 200,\n      height: 40,\n      rotation: 0,\n      opacity: 1,\n      locked: false,\n      visible: true,\n      color: '#000000',\n      content: 'Hello',\n      fontFamily: 'Burnmark Sans',\n      fontSize: 20,\n      fontWeight: 'normal',\n      fontStyle: 'normal',\n      textAlign: 'left',\n      verticalAlign: 'top',\n      letterSpacing: 0,\n      lineHeight: 1.2,\n      invert: false,\n      wrap: false,\n      autoHeight: false,\n    });\n  }\n\n  return (\n    <div>\n      <button onClick={addHello}>Add text</button>\n      <button disabled={!canUndo} onClick={undo}>\n        Undo\n      </button>\n      <button disabled={!canRedo} onClick={redo}>\n        Redo\n      </button>\n      {isRendering && <p>rendering…</p>}\n      <p>{document.objects.length} objects</p>\n    </div>\n  );\n}\n```\n\n## What you get back\n\n| name                  | type                               | description                                     |\n| --------------------- | ---------------------------------- | ----------------------------------------------- |\n| `designer`            | `LabelDesigner`                    | Raw instance — escape hatch                     |\n| `document`            | `LabelDocument`                    | Current document. Re-reads on every render      |\n| `canUndo` / `canRedo` | `boolean`                          | History state                                   |\n| `bitmap`              | `LabelBitmap \\| null`              | Latest render (debounced 200ms)                 |\n| `planes`              | `Map<string, LabelBitmap> \\| null` | Multi-plane render when `capabilities` is set   |\n| `isRendering`         | `boolean`                          | True while a render is in flight                |\n| `renderWarning`       | `RenderWarning \\| null`            | Non-fatal warning from the core render pipeline |\n| `renderError`         | `Error \\| null`                    | Render failure                                  |\n| `selection`           | `string[]`                         | Selected object IDs — auto-pruned on remove     |\n| `select` / `deselect` | `(ids) => void` / `() => void`     | Selection actions                               |\n\nPlus the full designer action surface: `add`, `update`, `remove`, `reorder`, `get`, `getAll`, `setCanvas`, `undo`, `redo`, `clearHistory`, `loadDocument`, `newDocument`, `toJSON`, `fromJSON`, `getPlaceholders`, `applyVariables`, `render` (force immediate), `exportPng`, `exportPdf`, `exportSheet`, `exportBundled`.\n\n## Options\n\n```ts\nuseLabelDesigner({\n  canvas?: Partial<CanvasConfig>;            // when hook constructs the designer\n  name?: string;\n  designer?: LabelDesigner;                  // wrap an externally-owned instance\n  capabilities?: PrinterCapabilities;        // switches render to multi-plane mode\n  renderDebounceMs?: number;                 // default 200\n  renderOnMount?: boolean;                   // default true — initial bitmap without user action\n  maxHistoryDepth?: number;\n  assetLoader?: AssetLoader;\n});\n```\n\n## Notes\n\n- The designer is constructed once and cached in a ref — subsequent re-renders with a new options object do **not** re-initialise it. If you need to reset state, call `loadDocument`, `newDocument`, or `fromJSON`.\n- Core mutates the document object in place. The hook forces re-renders via a version counter so in-place mutations are visible.\n- `renderBitmap`/`renderPlanes` are cancellable via a generation counter — stale async results from superseded renders are discarded silently.\n- **StrictMode safe:** the effect's subscribe/cleanup cycle is idempotent.\n- **SSR safe:** no browser APIs are touched at construction; render scheduling only starts inside `useEffect`, which does not run on the server.\n- `exportBundled()` returns `{ blob, missing }` — the list of asset keys the bundler could not resolve, mirroring the core contract.\n\n## License\n\nMIT\n","readmeFilename":"README.md"}