{"_id":"@bpmn-sdk/ui","_rev":"4-d782debed806e899d404d2bddce443c4","name":"@bpmn-sdk/ui","dist-tags":{"latest":"0.0.4"},"versions":{"0.0.1":{"name":"@bpmn-sdk/ui","version":"0.0.1","keywords":["bpmn","ui","design-tokens","theme","components","css-variables","typescript"],"license":"MIT","_id":"@bpmn-sdk/ui@0.0.1","maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"homepage":"https://github.com/bpmn-sdk/monorepo#readme","bugs":{"url":"https://github.com/bpmn-sdk/monorepo/issues"},"dist":{"shasum":"2268eee495028a928a44e2961ebae479fb0dee3d","tarball":"https://registry.npmjs.org/@bpmn-sdk/ui/-/ui-0.0.1.tgz","fileCount":20,"integrity":"sha512-9ZlGIGGRly4Qk/4Ttb4RH0BjjW2I2m9kJ51PhQJdd2jfi2u+W8+vt9hC6SGVVQYZrRofzl1mwqyqSHDlllmagQ==","signatures":[{"sig":"MEYCIQDUJoA4WtoTVFmvfT+Mx8FNRRqQqVNC5OFaS0hXDEfNZgIhAJpSQNiJbfz16NRXOf4syEkCBV21PmZ+DNn/ZJ1bwlKp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":41834},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"09bc945842eaf12aeff67ec087dc0ee6779000a6","scripts":{"build":"tsc","check":"biome check .","typecheck":"tsc --noEmit"},"_npmUser":{"name":"urbanisierung","email":"adam.urban@gmail.com"},"repository":{"url":"git+https://github.com/bpmn-sdk/monorepo.git","type":"git"},"_npmVersion":"11.6.1","description":"Shared design tokens, theme management, and UI components for bpmn-sdk frontends","directories":{},"_nodeVersion":"24.11.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ui_0.0.1_1773254328734_0.19613381100619565","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@bpmn-sdk/ui","version":"0.0.2","keywords":["bpmn","ui","design-tokens","theme","components","css-variables","typescript"],"license":"MIT","_id":"@bpmn-sdk/ui@0.0.2","maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"homepage":"https://github.com/bpmn-sdk/monorepo#readme","bugs":{"url":"https://github.com/bpmn-sdk/monorepo/issues"},"dist":{"shasum":"e83e974ae0b16a187cde090d2ec0531a1ca31361","tarball":"https://registry.npmjs.org/@bpmn-sdk/ui/-/ui-0.0.2.tgz","fileCount":21,"integrity":"sha512-n1UGEutQu4UfMWXwPewZG75POSbjQiUGPlM5UIJ0oUJ2Hyx/03iCy7JZCsmHxqnkxxpp+1s9r9jdjigGbIjS9Q==","signatures":[{"sig":"MEUCIQCti3XwRrns1HEdIgnq0uxO7q5W8ltthI8B+bV+G7JBmQIgXqJa5qyKYnBZnqf4SAzBnMXJ00aM5aYzcHEC1PZ3fG0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bpmn-sdk%2fui@0.0.2","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":42986},"main":"./dist/index.js","type":"module","_from":"file:bpmn-sdk-ui-0.0.2.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"build":"tsc","check":"biome check .","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:33ae0c57-7854-44ca-af30-1ef5f657dd93"}},"_resolved":"/tmp/347b2c58e0d3268108f57e9d682e9409/bpmn-sdk-ui-0.0.2.tgz","_integrity":"sha512-n1UGEutQu4UfMWXwPewZG75POSbjQiUGPlM5UIJ0oUJ2Hyx/03iCy7JZCsmHxqnkxxpp+1s9r9jdjigGbIjS9Q==","repository":{"url":"git+https://github.com/bpmn-sdk/monorepo.git","type":"git"},"_npmVersion":"11.9.0","description":"Shared design tokens, theme management, and UI components for bpmn-sdk frontends","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ui_0.0.2_1773258783093_0.7823768256534556","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@bpmn-sdk/ui","version":"0.0.3","keywords":["bpmn","ui","design-tokens","theme","components","css-variables","typescript"],"license":"MIT","_id":"@bpmn-sdk/ui@0.0.3","maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"homepage":"https://github.com/bpmn-sdk/monorepo#readme","bugs":{"url":"https://github.com/bpmn-sdk/monorepo/issues"},"dist":{"shasum":"35126024cf176d212819d79dfbb458ce00ffefa7","tarball":"https://registry.npmjs.org/@bpmn-sdk/ui/-/ui-0.0.3.tgz","fileCount":21,"integrity":"sha512-JDe3MGd5BljDeIVzFfXWwqtc052FWK1rSvSdgOS2jlI+ZRDKF+/2yBKYtkSQy0+T5079oeRVqD7LPaHHFM83ZQ==","signatures":[{"sig":"MEUCIQCJtm4IzyeOC/DvBT2d9oP0z1T/6CJ+RVCllCYkNbg0oQIgFiXGd2LykPvsV6aQKzDyyfCfRmkV5fD9LC9LVJdpHmI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bpmn-sdk%2fui@0.0.3","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":43272},"main":"./dist/index.js","type":"module","_from":"file:bpmn-sdk-ui-0.0.3.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"scripts":{"build":"tsc","check":"biome check .","typecheck":"tsc --noEmit"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:33ae0c57-7854-44ca-af30-1ef5f657dd93"}},"_resolved":"/tmp/a1be0cd8edddd6d22bb1c190b4924489/bpmn-sdk-ui-0.0.3.tgz","_integrity":"sha512-JDe3MGd5BljDeIVzFfXWwqtc052FWK1rSvSdgOS2jlI+ZRDKF+/2yBKYtkSQy0+T5079oeRVqD7LPaHHFM83ZQ==","repository":{"url":"git+https://github.com/bpmn-sdk/monorepo.git","type":"git"},"_npmVersion":"11.9.0","description":"Shared design tokens, theme management, and UI components for bpmn-sdk frontends","directories":{},"_nodeVersion":"24.14.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ui_0.0.3_1773341682242_0.43528803297620633","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@bpmn-sdk/ui","version":"0.0.4","description":"Shared design tokens, theme management, and UI components for bpmn-sdk frontends","type":"module","main":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./tokens.css":"./src/tokens.css"},"keywords":["bpmn","ui","design-tokens","theme","components","css-variables","typescript"],"license":"MIT","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/bpmn-sdk/monorepo.git"},"scripts":{"build":"tsc","typecheck":"tsc --noEmit","check":"biome check ."},"_id":"@bpmn-sdk/ui@0.0.4","bugs":{"url":"https://github.com/bpmn-sdk/monorepo/issues"},"homepage":"https://github.com/bpmn-sdk/monorepo#readme","_integrity":"sha512-PEw/Al7RoOHkJG+cgjg8a4nGLb61Vl/4bH1F+WdZqJsLpZbuWf5LCWQSslpHX9yuCzyjrVwoC7KyZcClo0mXmw==","_resolved":"/tmp/6c0691ce3650aa568cbab7d4f0942d37/bpmn-sdk-ui-0.0.4.tgz","_from":"file:bpmn-sdk-ui-0.0.4.tgz","_nodeVersion":"24.14.0","_npmVersion":"11.9.0","dist":{"integrity":"sha512-PEw/Al7RoOHkJG+cgjg8a4nGLb61Vl/4bH1F+WdZqJsLpZbuWf5LCWQSslpHX9yuCzyjrVwoC7KyZcClo0mXmw==","shasum":"8af1d6694e42cc3e19ccff11eed6db677fe3df93","tarball":"https://registry.npmjs.org/@bpmn-sdk/ui/-/ui-0.0.4.tgz","fileCount":22,"unpackedSize":46758,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@bpmn-sdk%2fui@0.0.4","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDtVt8m2Deyp0wjp++h9ptvDfDHR2F3Cfm4WnGmwehEFAiB4kFksRPKbPqal/UyvMR5bVM9zSBsZ0mQxlK1S88MoRg=="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:33ae0c57-7854-44ca-af30-1ef5f657dd93"}},"directories":{},"maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.0.4_1773428388626_0.8079305522652336"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-11T18:38:48.612Z","modified":"2026-03-13T18:59:49.040Z","0.0.1":"2026-03-11T18:38:48.897Z","0.0.2":"2026-03-11T19:53:03.224Z","0.0.3":"2026-03-12T18:54:42.403Z","0.0.4":"2026-03-13T18:59:48.758Z"},"bugs":{"url":"https://github.com/bpmn-sdk/monorepo/issues"},"license":"MIT","homepage":"https://github.com/bpmn-sdk/monorepo#readme","keywords":["bpmn","ui","design-tokens","theme","components","css-variables","typescript"],"repository":{"type":"git","url":"git+https://github.com/bpmn-sdk/monorepo.git"},"description":"Shared design tokens, theme management, and UI components for bpmn-sdk frontends","maintainers":[{"name":"urbanisierung","email":"adam.urban@gmail.com"}],"readme":"<div align=\"center\">\n  <img src=\"https://raw.githubusercontent.com/bpmn-sdk/monorepo/main/doc/logos/logo-2-gateway.svg\" width=\"72\" height=\"72\" alt=\"BPMN SDK logo\">\n  <h1>@bpmn-sdk/ui</h1>\n  <p>Shared design tokens, theme management, and UI components for bpmn-sdk frontends</p>\n\n  [![npm](https://img.shields.io/npm/v/@bpmn-sdk/ui?style=flat-square&color=6244d7)](https://www.npmjs.com/package/@bpmn-sdk/ui)\n  [![license](https://img.shields.io/npm/l/@bpmn-sdk/ui?style=flat-square)](https://github.com/bpmn-sdk/monorepo/blob/main/LICENSE)\n  [![typescript](https://img.shields.io/badge/TypeScript-strict-6244d7?style=flat-square&logo=typescript&logoColor=white)](https://github.com/bpmn-sdk/monorepo)\n\n  [Documentation](https://bpmn-sdk-docs.pages.dev) · [GitHub](https://github.com/bpmn-sdk/monorepo) · [Changelog](https://github.com/bpmn-sdk/monorepo/blob/main/packages/ui/CHANGELOG.md)\n</div>\n\n---\n\n## Overview\n\n`@bpmn-sdk/ui` is the shared design-system foundation for all bpmn-sdk frontends (`@bpmn-sdk/editor`, `@bpmn-sdk/operate`, `@bpmn-sdk/canvas`). It provides:\n\n- **CSS custom property tokens** — a single, consistent colour palette, spacing, radius, and typography scale shared across all packages\n- **Theme management** — resolve, persist, and apply `light` / `dark` / `auto` themes with zero boilerplate\n- **Primitive UI components** — badge, stats card, data table, and a theme-switcher button/dropdown, all built on plain DOM with no framework\n- **SVG icon library** — crisp 16 × 16 icons for navigation and theme controls\n\nNo runtime dependencies. Works in any browser environment or bundler.\n\n## Features\n\n- **Design tokens** — `--bpmn-*` CSS custom properties for surfaces, borders, typography, accent, semantic colours (success/warn/danger), radius, and navigation chrome\n- **Unified blue accent** — `#1a56db` (light) / `#4c8ef7` (dark), consistent across editor, canvas, and operate\n- **Light / dark / auto theming** — light defaults on `:root`; `[data-theme=\"dark\"]` override matches any element with that attribute\n- **`createThemeSwitcher()`** — standalone Dark / Light / System button + dropdown; persists to `localStorage`\n- **`badge(state)`** — coloured status badge for process-instance and job states\n- **`createStatsCard()`** — dashboard metric card with value and label\n- **`createTable<T>()`** — generic, typed data table with clickable rows and empty state\n- **`IC_UI` icons** — moon, sun, auto, checkmark, dashboard, processes, instances, incidents, jobs, tasks\n- **`injectUiStyles()`** — single call injects tokens + component CSS into `<head>`, deduplicated\n\n## Installation\n\n```sh\nnpm install @bpmn-sdk/ui\n```\n\n## Quick Start\n\n### Inject styles and apply a theme\n\n```typescript\nimport { injectUiStyles, applyTheme, loadPersistedTheme } from \"@bpmn-sdk/ui\"\n\n// Inject CSS tokens and component styles once at app start\ninjectUiStyles()\n\n// Apply persisted or default theme to the app root element\nconst root = document.getElementById(\"app\")!\napplyTheme(root, loadPersistedTheme() ?? \"auto\")\n```\n\n### Theme switcher button\n\n```typescript\nimport { createThemeSwitcher } from \"@bpmn-sdk/ui\"\n\nconst switcher = createThemeSwitcher({\n  initial: \"auto\",\n  persist: true,                               // saves to localStorage\n  onChange(theme, resolved) {\n    applyTheme(appRoot, theme)                 // update your root element\n  },\n})\n\ntoolbar.appendChild(switcher.el)\n```\n\n### Badge\n\n```typescript\nimport { badge } from \"@bpmn-sdk/ui\"\n\nconst el = badge(\"ACTIVE\")    // → <span class=\"bpmn-badge bpmn-badge--active\">ACTIVE</span>\ncontainer.appendChild(el)\n```\n\n### Stats card\n\n```typescript\nimport { createStatsCard } from \"@bpmn-sdk/ui\"\n\nconst card = createStatsCard(\"Active Instances\", 42, \"clickable\")\ncard.addEventListener(\"click\", () => navigate(\"/instances\"))\ngrid.appendChild(card)\n```\n\n### Data table\n\n```typescript\nimport { createTable } from \"@bpmn-sdk/ui\"\n\nconst { el, setRows } = createTable({\n  columns: [\n    { label: \"Name\",  render: (row) => row.name },\n    { label: \"State\", render: (row) => badge(row.state), width: \"100px\" },\n  ],\n  onRowClick: (row) => openDetail(row.id),\n  emptyText: \"No results\",\n})\n\ncontainer.appendChild(el)\nsetRows(data)\n```\n\n## API Reference\n\n### Theme\n\n```typescript\ntype Theme = \"light\" | \"dark\" | \"auto\"\n\nresolveTheme(theme: Theme): \"light\" | \"dark\"\napplyTheme(el: HTMLElement, theme: Theme): void    // sets data-theme on el\npersistTheme(theme: Theme): void                    // writes to localStorage\nloadPersistedTheme(): Theme | null                  // reads from localStorage\n```\n\n### `createThemeSwitcher(options)`\n\n```typescript\ninterface ThemeSwitcherOptions {\n  initial?: Theme\n  onChange: (theme: Theme, resolved: \"light\" | \"dark\") => void\n  persist?: boolean   // default: false\n}\n\ncreateThemeSwitcher(options): { el: HTMLElement; setTheme(t: Theme): void }\n```\n\n### Components\n\n| Export | Signature | Description |\n|--------|-----------|-------------|\n| `badge` | `(state: string) → HTMLElement` | Coloured status badge |\n| `cell` | `(text: string \\| null) → HTMLElement` | Plain text cell for use in tables |\n| `createStatsCard` | `(label, value, mod?) → HTMLElement` | Dashboard metric card; `mod`: `\"clickable\"` \\| `\"warn\"` |\n| `createTable` | `<T>(options: TableOptions<T>) → { el, setRows }` | Generic typed data table |\n\n### CSS tokens\n\n| Token | Light | Dark |\n|-------|-------|------|\n| `--bpmn-bg` | `#f4f4f8` | `#0f0f1a` |\n| `--bpmn-surface` | `#ffffff` | `#1a1a2e` |\n| `--bpmn-surface-2` | `#f0f0f8` | `#222240` |\n| `--bpmn-border` | `#d8d8e8` | `#2e2e4e` |\n| `--bpmn-fg` | `#1a1a2e` | `#e0e0f0` |\n| `--bpmn-fg-muted` | `#6666a0` | `#8888a8` |\n| `--bpmn-accent` | `#1a56db` | `#4c8ef7` |\n| `--bpmn-success` | `#22c55e` | `#22c55e` |\n| `--bpmn-warn` | `#f59e0b` | `#f59e0b` |\n| `--bpmn-danger` | `#ef4444` | `#ef4444` |\n| `--bpmn-radius` | `6px` | `6px` |\n| `--bpmn-nav-bg` | `#1e2030` | `#14141f` |\n\n### Icons (`IC_UI`)\n\n```typescript\nimport { IC_UI } from \"@bpmn-sdk/ui\"\n\n// Theme icons\nIC_UI.moon    // Dark theme\nIC_UI.sun     // Light theme\nIC_UI.auto    // System / auto theme\nIC_UI.check   // Checkmark (used inside dropdowns)\n\n// Navigation icons\nIC_UI.dashboard   IC_UI.processes   IC_UI.instances\nIC_UI.incidents   IC_UI.jobs        IC_UI.tasks\n```\n\n---\n\n## Related Packages\n\n| Package | Description |\n|---------|-------------|\n| [`@bpmn-sdk/core`](https://www.npmjs.com/package/@bpmn-sdk/core) | BPMN/DMN/Form parser, builder, layout engine |\n| [`@bpmn-sdk/canvas`](https://www.npmjs.com/package/@bpmn-sdk/canvas) | Zero-dependency SVG BPMN viewer |\n| [`@bpmn-sdk/editor`](https://www.npmjs.com/package/@bpmn-sdk/editor) | Full-featured interactive BPMN editor |\n| [`@bpmn-sdk/engine`](https://www.npmjs.com/package/@bpmn-sdk/engine) | Lightweight BPMN process execution engine |\n| [`@bpmn-sdk/feel`](https://www.npmjs.com/package/@bpmn-sdk/feel) | FEEL expression language parser & evaluator |\n| [`@bpmn-sdk/plugins`](https://www.npmjs.com/package/@bpmn-sdk/plugins) | 22 composable canvas plugins |\n| [`@bpmn-sdk/api`](https://www.npmjs.com/package/@bpmn-sdk/api) | Camunda 8 REST API TypeScript client |\n| [`@bpmn-sdk/ascii`](https://www.npmjs.com/package/@bpmn-sdk/ascii) | Render BPMN diagrams as Unicode ASCII art |\n| [`@bpmn-sdk/profiles`](https://www.npmjs.com/package/@bpmn-sdk/profiles) | Shared auth, profile storage, and client factories |\n| [`@bpmn-sdk/operate`](https://www.npmjs.com/package/@bpmn-sdk/operate) | Monitoring & operations frontend for Camunda clusters |\n\n## License\n\n[MIT](https://github.com/bpmn-sdk/monorepo/blob/main/LICENSE) © bpmn-sdk\n","readmeFilename":"README.md"}