@llumi/design-system 1.0.1 → 2.1.0

package/LICENSE

@@ -0,0 +1,51 @@
+@llumi/design-system — LICENSE
+Version 1.0 — Copyright (c) 2026 pAIrprog SAS.
+
+This license governs use of the Llumi Design System: the "@llumi/design-system" package and the original web components, source code, styles, assets, build output, and documentation created by pAIrprog SAS and published under it (the "pAIrprog Works", and together with everything in the package, the "Software").
+See Section 5 regarding third-party components. By installing, copying, or using the Software You accept this license; if You do not accept it, do not install or use the Software, and delete any copies in Your possession.
+
+1. DEFINITIONS
+   "You" means the individual or entity exercising rights under this license.
+   "Use" means to install, load, cache, execute, reproduce, and embed the Software.
+   "Modify" means to alter, adapt, translate, or otherwise create a derivative work of the Software's source code. The following are Use, not Modify:
+   (i) processing the Software with standard build tooling (bundling, minification, transpilation, tree-shaking, source-map generation, and the like) even if it changes the byte form, provided it does not deliberately alter the runtime behaviour of the components You use; and (ii) composing, wrapping, styling, configuring, or extending the components through their documented interfaces — CSS custom properties, attributes, properties, slots, and events — including using them inside Your own components.
+   "Distribute" means to make the Software, or any part of it, available to a third party in a form intended for reuse, further development, or redistribution — for example as a library, package, module, template, component set, or SDK. The following are Use, not Distribute: (i) delivering the Software to the users of Your own website, application, or product as part
+   of its normal operation, in any medium (web, desktop, mobile, or embedded); (ii) delivering an application or product into which the Software has been integrated to the customer for whom it was built, provided the Software is not separated out or offered on a standalone basis; and (iii) caching or mirroring the unmodified package on an internal or private registry, proxy, or CI/artifact system for Your own or Your customer's use.
+
+2. LICENSE GRANT
+   2.1 Subject to this license, pAIrprog SAS grants You a worldwide, royalty-free, non-exclusive, non-transferable, non-sublicensable license to Use the unmodified Software for any purpose, including commercial purposes, and to embed it within Your own websites, applications, and products.
+   2.2 End-user execution. pAIrprog additionally grants directly to each person who receives the Software incorporated into Your website, application, or product a royalty-free, non-exclusive right to load, cache, and execute the unmodified Software solely as part of using that website, application, or product. This is a direct grant from pAIrprog, not a sublicense by You, and it survives termination of Your license as to persons who received the Software in good faith before termination.
+   2.3 Patents. pAIrprog grants You a royalty-free, non-exclusive license under pAIrprog's patent claims necessarily infringed by the unmodified Software, limited to Using it as permitted here. This patent license terminates if You initiate or join patent litigation alleging the Software infringes.
+
+3. CONDITIONS AND RESTRICTIONS
+   The grant in Section 2 is conditioned on the following. These are conditions on the copyright license: any act outside their scope is unlicensed and infringes pAIrprog's copyright, independent of contract formation. Without pAIrprog's prior written permission, You may NOT:
+   (a) Modify the Software or create derivative works of it, except as permitted by the definition of "Modify".
+   (b) Distribute, publish, sublicense, sell, resell, rent, or lease the Software (or any part of it) on a standalone basis or as a software-development resource, whether free of charge or for a fee, except as permitted by the definition of "Distribute".
+   (c) Intentionally remove, obscure, or alter pAIrprog's copyright, attribution, trademark, or license notices, or represent the Software as Your own work. You must retain the preserved ("/_! ... _/") license banner pAIrprog includes in each distributed file. Where Your build tooling removes source comments, You satisfy this condition by retaining the LICENSE and NOTICE files in Your source repository, or by crediting pAIrprog in Your application's third-party notices or credits.
+   (d) Trademarks. This license grants no rights in pAIrprog's trademarks, including "pAIrprog" and "llumi". You may make truthful, nominative references identifying the Software (e.g., "built with the Llumi Design System"), but may not, without prior written permission, (i) use the marks in a way likely to cause confusion as to source, sponsorship, or affiliation, (ii) use them in the name of Your product, service, company, or domain, (iii) incorporate them into Your own marks, or (iv) use them to endorse or promote Your products.
+
+4. OWNERSHIP
+   The Software is licensed, not sold. pAIrprog SAS retains all right, title, and interest in and to the pAIrprog Works, including all intellectual property rights. All rights not expressly granted are reserved, subject to Section 5.
+
+5. THIRD-PARTY COMPONENTS
+   The package includes or loads third-party open-source components, each licensed under its own terms (listed in the accompanying NOTICE file). This license applies only to the pAIrprog Works and does not modify, supersede, or restrict any rights You have in third-party components under their respective licenses. In case of conflict regarding a third-party component, that component's license governs.
+
+6. TERMINATION
+   This license terminates automatically if You breach any term and, where the breach is curable, fail to cure it within 30 days after becoming aware of it; it is automatically reinstated upon timely cure. Termination of Your license does not terminate the end-user execution rights granted under Section 2.2 to persons who received the Software in good faith before termination. Upon termination You must cease all Use of the Software. Sections 4, 5, and 7–9 survive termination.
+
+7. NO WARRANTY
+   TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NON-INFRINGEMENT. pAIrprog does not warrant that the Software, or any content-delivery network distributing it, will be available, uninterrupted, or error-free, and has no obligation to provide support, updates, or maintenance.
+
+8. LIMITATION OF LIABILITY
+   TO THE MAXIMUM EXTENT PERMITTED BY APPLICABLE LAW, AND GIVEN THAT THE SOFTWARE IS PROVIDED FREE OF CHARGE, pAIrprog SAS SHALL NOT BE LIABLE FOR ANY INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES, OR FOR ANY LOSS OF PROFITS, DATA, OR GOODWILL, ARISING FROM OR RELATED TO THE SOFTWARE OR ITS USE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. NOTHING IN THIS LICENSE EXCLUDES OR LIMITS LIABILITY THAT CANNOT BE EXCLUDED OR LIMITED UNDER APPLICABLE LAW, INCLUDING LIABILITY FOR FRAUD (DOL), GROSS NEGLIGENCE (FAUTE LOURDE), OR DEATH OR PERSONAL INJURY.
+
+9. GENERAL
+   9.1 Governing law and forum. This license is governed by the laws of France, without regard to conflict-of-law principles. The courts of Paris, France have exclusive jurisdiction over disputes, except that nothing in this Section deprives a consumer of the mandatory protections, or the courts, of their country of habitual residence; exclusive Paris jurisdiction applies only to parties acting in a professional capacity.
+   9.2 Severability. If any provision is held invalid or unenforceable, it is limited or severed to the minimum extent necessary and the remaining provisions remain in full force; no single provision was a determining condition of the others.
+   9.3 No waiver. No failure or delay in enforcing any term is a waiver of it.
+   9.4 Assignment. You may not assign this license without pAIrprog's prior written consent, except to a successor to all or substantially all of Your business that assumes Your obligations. pAIrprog may freely assign.
+   9.5 Versions. This license governs the version of the Software with which it is distributed. pAIrprog may release future versions of the Software under different terms; doing so does not revoke the rights granted for versions You have already obtained.
+   9.6 Entire agreement. This license is the entire agreement regarding the Software and supersedes prior understandings.
+
+For licensing inquiries, including permissions beyond this license:
+contact@pairprog.io

package/NOTICE

@@ -0,0 +1,66 @@
+@llumi/design-system — THIRD-PARTY NOTICES
+
+The distributed build output (dist/*.mjs) bundles the third-party open-source
+packages listed below. Each is licensed under the MIT License, reproduced in
+full at the end of this file. Their copyright notices are retained here in
+satisfaction of the MIT License's attribution requirement.
+
+This file does NOT cover the peer dependencies that @llumi/design-system loads
+at runtime from a CDN (e.g. lit, mermaid, xstate, bpmn-js, d3-selection,
+d3-transition, d3-zoom, refractor, tinykeys, yay-machine, @floating-ui/dom).
+Those are not redistributed by this package; they are fetched directly from
+their own publishers and remain governed by their own licenses.
+
+Bundled packages
+-----------------
+- bpmn-moddle@10.0.0
+  Copyright (c) 2014 camunda Services GmbH
+  https://github.com/bpmn-io/bpmn-moddle
+- character-parser@4.0.0
+  Copyright (c) 2013 Forbes Lindesay
+  https://github.com/ForbesLindesay/character-parser
+- graph-by-ivan-tulaev@1.0.0-alpha.14
+  Copyright (c) 2025 Ivan Tulaev
+  https://github.com/IvanTulaev/graph
+- is-expression@4.0.0
+  Copyright (c) 2015 Tiancheng "Timothy" Gu
+  https://github.com/pugjs/is-expression
+- min-dash@5.0.0
+  Copyright (c) 2017-present camunda Services GmbH
+  https://github.com/bpmn-io/min-dash
+- acorn@7.4.1
+  Copyright (C) 2012-2018 by various contributors (see https://github.com/acornjs/acorn/blob/master/AUTHORS)
+  https://github.com/acornjs/acorn
+- moddle@8.1.0
+  Copyright (c) 2014-present Camunda Services GmbH
+  https://github.com/bpmn-io/moddle
+- moddle-xml@12.0.0
+  Copyright (c) 2014-present Camunda Services GmbH
+  https://github.com/bpmn-io/moddle-xml
+- object-assign@4.1.1
+  Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
+  https://github.com/sindresorhus/object-assign
+- saxen@11.0.2
+  Copyright (c) 2012 Vopilovskii Konstantin <flash.vkv@gmail.com>
+  https://github.com/nikku/saxen
+
+------------------------------------------------------------------------------
+The MIT License (MIT)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,219 +1,29 @@
 # @llumi/design-system
 
-Framework-agnostic Web Components (built with [Lit](https://lit.dev)) for the llumi
-review experience. Wrap any content in `<llumi-review>` and let users attach comments to
-whole elements or to text selections, add an overall comment, and submit an approval or a
-set of comments.
+## Import via CDN (jsdelivr)
 
-- **Hybrid DOM** — your content stays in the light DOM (so text selection, `Range`s, and
-  the CSS Custom Highlight API work normally); the review chrome (toolbar, dialogs) renders
-  in Shadow DOM with its styles encapsulated.
-- **Drop-in** — works in plain HTML or any framework that can render custom elements.
-- **Per-component** — each component is imported on its own (`@llumi/design-system/review`).
-- **Three builds per component** — ESM (the default import), plus single-file UMD and IIFE
-  bundles for `<script>` / CDN use.
-
-## Installation
-
-```bash
-bun add @llumi/design-system
-# or: npm install @llumi/design-system
-```
-
-`lit` is pulled in automatically as a dependency — no peer install required.
-
-## Quick start (ESM)
-
-```ts
-// Registers <llumi-review> and all of its chrome elements.
-// The light-DOM highlight styles are injected automatically on first use —
-// no separate CSS import is required.
-import "@llumi/design-system/review";
-```
+Each component ships as a self-contained ES module.
 
 ```html
-<llumi-review default-mode="annotating" bar-position="bottom-center">
-  <article>
-    <h1 data-review-id="title">Project Proposal</h1>
-    <p data-review-selectable="intro">
-      Select any of this text to leave a comment on the selection…
-    </p>
-  </article>
-</llumi-review>
-
 <script type="module">
-  const review = document.querySelector("llumi-review");
-  review.addEventListener("llumi-review-submit", (e) => {
-    const { result, clearPersisted } = e.detail;
-    // ...send `result` to the server, then on success:
-    clearPersisted();
-  });
+  import "https://cdn.jsdelivr.net/npm/@llumi/design-system@2/<component-name>.mjs";
 </script>
 ```
 
-### `<script>` tag (no bundler)
-
-```html
-<!-- unpkg / jsDelivr both resolve the IIFE subpath via the package `exports` field -->
-<script src="https://unpkg.com/@llumi/design-system/review.js"></script>
-<!-- jsDelivr can also take the explicit file path -->
-<script src="https://cdn.jsdelivr.net/npm/@llumi/design-system/dist/review.js"></script>
-```
-
-This single file bundles Lit, registers the `<llumi-review>` element, and exposes a `Llumi`
-global. A `require()`-safe UMD/CJS build is also published at `@llumi/design-system/review.cjs`.
-
-## Marking up content
+`@2` resolves to the latest v2.
 
-Inside `<llumi-review>`, annotate the elements you want to be reviewable:
+## Available components
 
-| Attribute | Meaning |
-| --- | --- |
-| `data-review-id="<id>"` | A **whole-element** comment target. Clicking it (in annotate mode) opens a comment dialog and shows a badge when commented. |
-| `data-review-selectable="<id>"` | A region whose **text can be selected** to leave a selection-scoped comment. |
-
-An element may carry both attributes. The `<id>` values are yours; they are echoed back in
-each comment's `targetId`.
-
-## Component API
-
-### Attributes
-
-| Attribute | Type | Default | Description |
-| --- | --- | --- | --- |
-| `bar-position` | `top-left` \| `top-center` \| `top-right` \| `bottom-left` \| `bottom-center` \| `bottom-right` | `bottom-center` | Initial corner for the floating toolbar (which is also draggable). |
-| `shortcut` | string ([tinykeys](https://github.com/jamiebuilds/tinykeys) syntax) | `$mod+Shift+M` | Keyboard shortcut that toggles annotate mode. |
-| `default-mode` | `idle` \| `annotating` | `idle` | Whether annotate mode is on at mount. |
-| `persist` | `string` (attribute) | — | When set to a non-empty value, mirrors the review draft to `localStorage` under that key and restores it on load. A persisted draft takes precedence over `initialData`. Restored selection highlights are painted when annotate mode is active (consistent with how `initialData` behaves). |
-
-### Properties (set in JS — complex values)
-
-| Property | Type | Description |
+| Component | Import path | Docs |
 | --- | --- | --- |
-| `initialData` | `ReviewResult` | Pre-populate existing comments / overall comment. |
-| `customTargets` | `CustomTarget[]` | Resolve comment targets from arbitrary selectors (advanced). |
-
-### Methods
+| classless theme | `/base.css` | [base.md](https://cdn.jsdelivr.net/npm/@llumi/design-system@2/base.md) |
+| `<llumi-review>` | `/review.mjs` | [review.md](https://cdn.jsdelivr.net/npm/@llumi/design-system@2/review.md) |
+| `<llumi-bpmn>` | `/bpmn.mjs` | [bpmn.md](https://cdn.jsdelivr.net/npm/@llumi/design-system@2/bpmn.md) |
+| `<llumi-mermaid>` | `/mermaid.mjs` | [mermaid.md](https://cdn.jsdelivr.net/npm/@llumi/design-system@2/mermaid.md) |
+| `<llumi-highlighter>` | `/highlighter.mjs` | [highlighter.md](https://cdn.jsdelivr.net/npm/@llumi/design-system@2/highlighter.md) |
+| `<llumi-copy-button>` | `/copy-button.mjs` | [copy-button.md](https://cdn.jsdelivr.net/npm/@llumi/design-system@2/copy-button.md) |
+| `<llumi-download-button>` | `/download-button.mjs` | [download-button.md](https://cdn.jsdelivr.net/npm/@llumi/design-system@2/download-button.md) |
 
-| Method | Description |
-| --- | --- |
-| `clearPersisted()` | Clears the persisted draft for this element's `persist` key. No-op when `persist` is unset. Call after a confirmed server save. |
-
-```ts
-const review = document.querySelector("llumi-review");
-review.initialData = {
-  status: "commented",
-  comments: [{ commentId: "c1", targetId: "title", content: "Tighten this", createdAt: new Date().toISOString() }],
-};
-```
-
-### Events
-
-Both events bubble and are composed:
-
-| Event | Detail type | Fires |
-| --- | --- | --- |
-| `llumi-review-change` | `ReviewResult` | On every edit (comment added/edited/deleted, overall comment changed). |
-| `llumi-review-submit` | `{ result: ReviewResult, clearPersisted: () => void }` | When the user clicks Submit / Approve. `clearPersisted` clears the localStorage draft — call it after a confirmed server save. |
+## License
 
-```ts
-type ReviewResult =
-  | { status: "approved" }
-  | { status: "commented"; comments: ReviewComment[]; overallComment?: string };
-
-interface ReviewComment {
-  commentId: string;
-  targetId: string;        // the data-review-id / data-review-selectable value
-  content: string;
-  createdAt: string;       // ISO timestamp
-  selection?: {            // present for text-selection comments
-    startOffset: number;
-    endOffset: number;
-    selectedText: string;
-    matchIndex: number;
-  };
-}
-```
-
-Comments in the result are ordered by their position in the document.
-
-### Keyboard shortcuts
-
-| Keys | Action |
-| --- | --- |
-| `$mod+Shift+M` (configurable) | Toggle annotate mode |
-| Hold `Alt` | Temporarily reveal all targets while held |
-| `Escape` / `$mod+Enter` | Close the open dialog |
-| `$mod+Shift+Backspace` | Delete the comment being edited |
-
-(`$mod` is ⌘ on macOS, Ctrl elsewhere.)
-
-## Custom comment editor
-
-The default editor is an auto-growing textarea. To supply your own, slot an element into
-the comment dialog's `editor` slot. Your element receives the current text via a `value`
-property and must emit these `CustomEvent`s (bubbling + composed):
-
-- `change` — `detail` is the new string value
-- `cancel` — request to close the dialog
-- `delete` — request to delete the comment
-
-```html
-<llumi-comment-dialog>
-  <my-rich-editor slot="editor"></my-rich-editor>
-</llumi-comment-dialog>
-```
-
-## Styling & customization
-
-No CSS setup is required. The chrome (toolbar, dialogs) ships its Tailwind styles inside
-each element's Shadow DOM, and the light-DOM highlight styles are injected into the
-document automatically when a `<llumi-review>` connects.
-
-To theme the highlight outlines, selection colors, and z-index, override these CSS custom
-properties. Set them on `llumi-review` (or any ancestor of your content) so they reliably
-override the injected defaults via inheritance:
-
-```css
-llumi-review {
-  /* whole-element outlines */
-  --review-highlight-commented-color: oklch(0.7 0 0 / 0.3);
-  --review-highlight-editing-color: oklch(0.6 0 0 / 0.7);
-  /* text-selection highlights */
-  --review-selection-commented-color: oklch(0.85 0.08 250 / 0.4);
-  --review-selection-editing-color: oklch(0.75 0.12 250 / 0.6);
-  --review-selection-hover-color: oklch(0.8 0.1 250 / 0.5);
-  /* stacking */
-  --review-z-index: 9998;
-}
-```
-
-All `--review-*` variables defined in the injected stylesheet are overridable this way.
-
-## Package exports
-
-| Specifier | Build |
-| --- | --- |
-| `@llumi/design-system/review` | The review component — resolves to ESM on `import`, CJS on `require` (the default entry) |
-| `@llumi/design-system/review.mjs` | ESM bundle (explicit) |
-| `@llumi/design-system/review.cjs` | UMD / CJS bundle, `require()`-safe (Lit included) |
-| `@llumi/design-system/review.js` | IIFE bundle, `Llumi` global (Lit included) |
-| `@llumi/design-system/review.css` | Light-DOM highlight styles — optional; only needed to preload them (e.g. SSR / avoid a first-paint flash), since they're otherwise auto-injected |
-
-## Known limitation
-
-Selection highlights use the document-global CSS Custom Highlight API with fixed names, so
-only one active `<llumi-review>` paints selection highlights on the page at a time (this
-matches the original React component). Whole-element highlights and everything else work
-with multiple instances.
-
-## Development
-
-```bash
-bun install
-bun run storybook        # interactive dev/docs harness
-bun test                 # logic tests (XState machine, utilities)
-bun run test:browser     # component/DOM tests (Vitest + Playwright)
-bun run build            # ESM + UMD + IIFE
-bun run ci               # full gate: lint, types, tests, manifest, build
-```
+Free to use and embed, including commercially; no modification, redistribution, or resale. See [LICENSE](https://cdn.jsdelivr.net/npm/@llumi/design-system@2/LICENSE). Bundled third-party components and their notices are listed in [NOTICE](https://cdn.jsdelivr.net/npm/@llumi/design-system@2/NOTICE).

package/adopt-global-styles-D9108lqB.js

@@ -0,0 +1,15 @@
+/*! @llumi/design-system v2.1.0 | (c) 2026 pAIrprog SAS | license: https://cdn.jsdelivr.net/npm/@llumi/design-system@2.1.0/LICENSE | bundled third-party components under MIT, see NOTICE | @license */
+const n = /* @__PURE__ */ new Set();
+function r(e, a) {
+  if (typeof document > "u" || n.has(e)) return;
+  const o = `data-llumi-${e}`;
+  if (document.querySelector(`style[${o}]`)) {
+    n.add(e);
+    return;
+  }
+  const t = document.createElement("style");
+  t.setAttribute(o, ""), t.textContent = a, document.head.append(t), n.add(e);
+}
+export {
+  r as a
+};

package/base.css

@@ -0,0 +1,2 @@
+/*! @llumi/design-system v2.1.0 | (c) 2026 pAIrprog SAS | license: https://cdn.jsdelivr.net/npm/@llumi/design-system@2.1.0/LICENSE | bundled third-party components under MIT, see NOTICE | @license */
+:root{--llumi-white:oklch(100% 0 0);--llumi-zinc-50:oklch(98.5% 0 0);--llumi-zinc-100:oklch(96.7% .001 286.375);--llumi-zinc-200:oklch(92% .004 286.32);--llumi-zinc-300:oklch(87.1% .006 286.286);--llumi-zinc-400:oklch(70.5% .015 286.067);--llumi-zinc-500:oklch(55.2% .016 285.938);--llumi-zinc-700:oklch(37% .013 285.805);--llumi-zinc-800:oklch(27.4% .006 286.033);--llumi-zinc-900:oklch(21% .006 285.885);--llumi-zinc-950:oklch(14.1% .005 285.823);--llumi-purple-100:oklch(94.6% .033 307.174);--llumi-purple-300:oklch(82.7% .119 306.383);--llumi-purple-400:oklch(71.4% .203 305.504);--llumi-purple-600:oklch(55.8% .288 302.321);--llumi-purple-700:oklch(49.6% .265 301.924);--llumi-pink-100:oklch(94.8% .028 342.258);--llumi-pink-600:oklch(59.2% .249 .584);--llumi-pink-700:oklch(52.5% .223 3.958);--llumi-green-100:oklch(96.2% .044 156.743);--llumi-green-600:oklch(62.7% .194 149.214);--llumi-red-100:oklch(93.6% .032 17.717);--llumi-red-600:oklch(57.7% .245 27.325);--llumi-amber-100:oklch(96.2% .059 95.617);--llumi-amber-600:oklch(66.6% .179 58.318);--llumi-color-bg:var(--llumi-zinc-50);--llumi-color-surface:var(--llumi-white);--llumi-color-fg:var(--llumi-zinc-900);--llumi-color-muted:var(--llumi-zinc-500);--llumi-color-border:var(--llumi-zinc-200);--llumi-color-primary:var(--llumi-purple-600);--llumi-color-primary-hover:var(--llumi-purple-700);--llumi-color-primary-subtle:var(--llumi-purple-100);--llumi-color-on-primary:var(--llumi-white);--llumi-color-accent:var(--llumi-pink-600);--llumi-color-accent-subtle:var(--llumi-pink-100);--llumi-color-on-accent:var(--llumi-white);--llumi-color-success:var(--llumi-green-600);--llumi-color-success-subtle:var(--llumi-green-100);--llumi-color-danger:var(--llumi-red-600);--llumi-color-danger-subtle:var(--llumi-red-100);--llumi-color-warning:var(--llumi-amber-600);--llumi-color-warning-subtle:var(--llumi-amber-100);--llumi-color-link:var(--llumi-purple-600);--llumi-color-link-hover:var(--llumi-purple-700);--llumi-color-ring:var(--llumi-color-primary);--llumi-radius-sm:.25rem;--llumi-radius:.5rem;--llumi-radius-lg:.75rem;--llumi-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji";--llumi-font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--llumi-text-xs:.75rem;--llumi-text-sm:.875rem;--llumi-text-base:1rem;--llumi-text-lg:1.125rem;--llumi-text-xl:1.25rem;--llumi-text-2xl:1.5rem;--llumi-text-3xl:1.875rem;--llumi-text-4xl:2.25rem;--llumi-leading:1.5;--llumi-leading-tight:1.25;--llumi-font-weight-normal:400;--llumi-font-weight-medium:500;--llumi-font-weight-semibold:600;--llumi-font-weight-bold:700;--llumi-space:1rem;--buncss-light:initial;--buncss-dark: ;color-scheme:light}[data-theme=dark]{--llumi-color-bg:var(--llumi-zinc-950);--llumi-color-surface:var(--llumi-zinc-900);--llumi-color-fg:var(--llumi-zinc-50);--llumi-color-muted:var(--llumi-zinc-400);--llumi-color-border:var(--llumi-zinc-800);--llumi-color-link:var(--llumi-purple-400);--llumi-color-link-hover:var(--llumi-purple-300);--buncss-light: ;--buncss-dark:initial;color-scheme:dark}[data-theme=light]{--llumi-color-bg:var(--llumi-zinc-50);--llumi-color-surface:var(--llumi-white);--llumi-color-fg:var(--llumi-zinc-900);--llumi-color-muted:var(--llumi-zinc-500);--llumi-color-border:var(--llumi-zinc-200);--llumi-color-link:var(--llumi-purple-600);--llumi-color-link-hover:var(--llumi-purple-700);--buncss-light:initial;--buncss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--llumi-color-bg:var(--llumi-zinc-950);--llumi-color-surface:var(--llumi-zinc-900);--llumi-color-fg:var(--llumi-zinc-50);--llumi-color-muted:var(--llumi-zinc-400);--llumi-color-border:var(--llumi-zinc-800);--llumi-color-link:var(--llumi-purple-400);--llumi-color-link-hover:var(--llumi-purple-300);--buncss-light: ;--buncss-dark:initial;color-scheme:dark}}:where(html){font-family:var(--llumi-font-sans);line-height:var(--llumi-leading);-webkit-text-size-adjust:100%}:where(body){background:var(--llumi-color-bg);color:var(--llumi-color-fg);font-size:var(--llumi-text-base);line-height:var(--llumi-leading);margin:0}:where(h1,h2,h3,h4,h5,h6){margin:0 0 var(--llumi-space);line-height:var(--llumi-leading-tight);font-weight:var(--llumi-font-weight-semibold);color:var(--llumi-color-fg)}:where(h1){font-size:var(--llumi-text-4xl)}:where(h2){font-size:var(--llumi-text-3xl)}:where(h3){font-size:var(--llumi-text-2xl)}:where(h4){font-size:var(--llumi-text-xl)}:where(h5){font-size:var(--llumi-text-lg)}:where(h6){font-size:var(--llumi-text-base)}:where(p,ul,ol,dl,blockquote,pre,table,figure){margin:0 0 var(--llumi-space)}:where(a){color:var(--llumi-color-link);text-decoration:underline;text-underline-offset:2px}:where(a:hover){color:var(--llumi-color-link-hover)}:where(strong,b){font-weight:var(--llumi-font-weight-semibold)}:where(small){font-size:var(--llumi-text-sm)}:where(mark){background:var(--llumi-color-warning-subtle);color:var(--llumi-color-fg);border-radius:var(--llumi-radius-sm);padding:0 .2em}:where(ul,ol){padding-left:1.5rem}:where(li){margin:.25rem 0}:where(blockquote){border-left:3px solid var(--llumi-color-border);padding-left:var(--llumi-space);color:var(--llumi-color-muted)}:where(hr){border:0;border-top:1px solid var(--llumi-color-border);margin:calc(var(--llumi-space)*1.5)0}:where(code,kbd,samp){font-family:var(--llumi-font-mono);font-size:.9em}:where(code){background:var(--llumi-color-surface);border:1px solid var(--llumi-color-border);border-radius:var(--llumi-radius-sm);padding:.1em .35em}:where(pre){background:var(--llumi-color-surface);border:1px solid var(--llumi-color-border);border-radius:var(--llumi-radius);padding:var(--llumi-space);overflow:auto}:where(pre) :where(code){background:0 0;border:0;padding:0}:where(kbd){background:var(--llumi-color-surface);border:1px solid var(--llumi-color-border);border-radius:var(--llumi-radius-sm);padding:.1em .4em}:where(table){border-collapse:collapse;width:100%}:where(caption){text-align:left;color:var(--llumi-color-muted);padding-bottom:.5rem}:where(th,td){text-align:left;border-bottom:1px solid var(--llumi-color-border);padding:.5rem .75rem}:where(th){font-weight:var(--llumi-font-weight-semibold)}:where(input,textarea,select){font:inherit;color:var(--llumi-color-fg);background:var(--llumi-color-surface);border:1px solid var(--llumi-color-border);border-radius:var(--llumi-radius);padding:.5rem .75rem}:where(input:focus-visible,textarea:focus-visible,select:focus-visible){outline:2px solid var(--llumi-color-ring);outline-offset:1px}:where(button){font:inherit;font-weight:var(--llumi-font-weight-medium);color:var(--llumi-color-on-primary);background:var(--llumi-color-primary);border-radius:var(--llumi-radius);cursor:pointer;border:1px solid #0000;padding:.5rem 1rem}:where(button:hover){background:var(--llumi-color-primary-hover)}:where(button:focus-visible){outline:2px solid var(--llumi-color-ring);outline-offset:1px}:where(button:has(>i:only-child)){box-sizing:border-box;display:inline-flex;border:1px solid var(--llumi-color-border,#e4e4e7);border-radius:var(--llumi-radius,.5rem);background:var(--llumi-color-surface,#fff);color:var(--llumi-color-fg,#18181b);cursor:pointer;appearance:none;justify-content:center;align-items: center;width:2.25rem;height:2.25rem;padding:0;transition:background-color .15s,color .15s,border-color .15s}@supports (color:color(display-p3 0 0 0)){:where(button:has(>i:only-child)){border:1px solid var(--llumi-color-border,color(display-p3 .894477 .894477 .905114));background:var(--llumi-color-surface,color(display-p3 1 1 1));color:var(--llumi-color-fg,color(display-p3 .0937957 .093793 .104806))}}@supports (color:lab(0% 0 0)){:where(button:has(>i:only-child)){border:1px solid var(--llumi-color-border,lab(90.6853% .399262 -1.45453));background:var(--llumi-color-surface,lab(100% 0 0));color:var(--llumi-color-fg,lab(8.30603% .618212 -2.16573))}}:where(button:has(>i:only-child):hover:not(:disabled)){background:color-mix(in oklab,var(--llumi-color-fg,#18181b)6%,transparent)}@supports (color:color(display-p3 0 0 0)){:where(button:has(>i:only-child):hover:not(:disabled)){background:color-mix(in oklab,var(--llumi-color-fg,color(display-p3 .0937957 .093793 .104806))6%,transparent)}}@supports (color:lab(0% 0 0)){:where(button:has(>i:only-child):hover:not(:disabled)){background:color-mix(in oklab,var(--llumi-color-fg,lab(8.30603% .618212 -2.16573))6%,transparent)}}:where(button:has(>i:only-child):focus-visible){outline:2px solid var(--llumi-color-ring,oklch(55.8% .288 302.321));outline-offset:2px}:where(button:has(>i:only-child):disabled){opacity:.6;cursor:default}:where(button:has(>i:only-child)>i){display:inline-flex;width:1rem;height:1rem}:where(button:has(>i:only-child)>i>svg){width:100%;height:100%}:where(button.is-done:has(>i:only-child)){border-color:var(--llumi-color-success,#00a544);color:var(--llumi-color-success,#00a544)}@supports (color:color(display-p3 0 0 0)){:where(button.is-done:has(>i:only-child)){border-color:var(--llumi-color-success,color(display-p3 .243883 .640824 .294808));color:var(--llumi-color-success,color(display-p3 .243883 .640824 .294808))}}@supports (color:lab(0% 0 0)){:where(button.is-done:has(>i:only-child)){border-color:var(--llumi-color-success,lab(59.0978% -58.6621 41.2579));color:var(--llumi-color-success,lab(59.0978% -58.6621 41.2579))}}:where(button.is-error:has(>i:only-child)){border-color:var(--llumi-color-danger,#e40014);color:var(--llumi-color-danger,#e40014)}@supports (color:color(display-p3 0 0 0)){:where(button.is-error:has(>i:only-child)){border-color:var(--llumi-color-danger,color(display-p3 .830323 .140383 .133196));color:var(--llumi-color-danger,color(display-p3 .830323 .140383 .133196))}}@supports (color:lab(0% 0 0)){:where(button.is-error:has(>i:only-child)){border-color:var(--llumi-color-danger,lab(48.4493% 77.4328 61.5452));color:var(--llumi-color-danger,lab(48.4493% 77.4328 61.5452))}}:where(button.is-working:has(>i:only-child)>i>svg){animation:llumi-spin 1s linear infinite}@keyframes llumi-spin{to{transform:rotate(360deg)}}:where(label){display:inline-block;font-weight:var(--llumi-font-weight-medium)}:where(fieldset){border:1px solid var(--llumi-color-border);border-radius:var(--llumi-radius);padding:var(--llumi-space)}:where(legend){padding:0 .5rem}:where(img,svg,video){max-width:100%;height:auto}:where(figure){margin-inline-start:0;margin-inline-end:0}:where(figcaption){color:var(--llumi-color-muted);font-size:var(--llumi-text-sm)}

package/base.md

@@ -0,0 +1,59 @@
+# `base.css`
+
+A classless base stylesheet that applies sensible defaults to plain HTML elements — typography, spacing, tables, forms, buttons, code blocks, blockquotes, and icon-buttons. Every rule is `:where()`-wrapped (specificity 0), so any consumer class, utility, or inline style always wins.
+
+It imports `theme.css` automatically, so a single import gives you both the design tokens and the element defaults.
+
+## Import
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@llumi/design-system@2/base.css" />
+```
+
+Or in JS:
+
+```ts
+import "@llumi/design-system/base.css";
+```
+
+## What it covers
+
+- **Typography** — font family, sizing, line-height for `html`, headings `h1`–`h6`, paragraphs, lists
+- **Links** — color + underline offset (hover state)
+- **Code** — `code`, `pre`, `kbd`, `samp` with surface background and borders
+- **Tables** — full width, collapsed borders, padded cells
+- **Forms** — `input`, `textarea`, `select`, `button`, `fieldset`, `legend` with focus rings
+- **Icon buttons** — any `<button>` whose only child is an `<i>` icon gets square sizing + hover/focus/disabled states
+- **Misc** — `blockquote`, `hr`, `mark`, `figure`/`figcaption`, responsive media
+
+## Overriding theme variables
+
+All defaults consume `--llumi-*` custom properties. Override them on `:root` (or any ancestor) to retheme:
+
+```css
+:root {
+  /* Brand colors */
+  --llumi-color-primary: oklch(55% 0.25 250);
+  --llumi-color-primary-hover: oklch(48% 0.22 250);
+
+  /* Surfaces */
+  --llumi-color-bg: oklch(98% 0 0);
+  --llumi-color-surface: oklch(100% 0 0);
+  --llumi-color-fg: oklch(20% 0 0);
+  --llumi-color-muted: oklch(50% 0 0);
+  --llumi-color-border: oklch(90% 0 0);
+
+  /* Shape */
+  --llumi-radius: 0.375rem;
+  --llumi-radius-sm: 0.25rem;
+
+  /* Typography */
+  --llumi-font-sans: "Inter", sans-serif;
+  --llumi-text-base: 1.05rem;
+  --llumi-leading: 1.6;
+}
+```
+
+Dark mode is handled via `[data-theme="dark"]` or `prefers-color-scheme: dark` — only neutral surfaces remap; brand and status colors stay constant. Force a mode with `data-theme="light"` or `data-theme="dark"` on `<html>`.
+
+See [`theme.css`](./theme.css) for the full token list.

package/bpmn.md

@@ -0,0 +1,113 @@
+# `<llumi-bpmn>`
+
+Renders a [BPMN 2.0](https://www.omg.org/spec/BPMN/2.0/) diagram from a pug-syntax definition string,
+with automatic layout, interactive pan/zoom, element markers (highlight, focus, errors, warnings),
+and click-to-select events.
+
+## Usage
+
+Pass the BPMN definition as the element's **light-DOM text content** (slot):
+
+```html
+<llumi-bpmn>
+  doctype xml
+  definitions(id="defs1" targetNamespace="http://example.com/simple")
+    process(id="proc1" name="Simple Process" isExecutable="true")
+      startEvent(id="start1")
+      task(id="task1" name="Do Something")
+      endEvent(id="end1")
+      sequenceFlow(id="f1" sourceRef="start1" targetRef="task1")
+      sequenceFlow(id="f2" sourceRef="task1" targetRef="end1")
+</llumi-bpmn>
+```
+
+The diagram source is re-read whenever the text content changes. Whitespace is
+automatically trimmed and dedented.
+
+## Properties / Attributes
+
+| Name | Attribute | Type | Default | Description |
+|------|-----------|------|---------|-------------|
+| `autoLayout` | `auto-layout` | `boolean` | `true` | Run the built-in layout engine to assign positions. Default is **true** because the pug syntax carries no position data (no BPMNDiagram / Bounds section needed). Set to `false` only when the source already contains a `bpmndi:BPMNDiagram` section with explicit coordinates. |
+| `highlight` | — | `string[]` | `[]` | IDs of elements to highlight (blue tint). |
+| `focusId` | — | `string \| undefined` | `undefined` | ID of the element that receives the focus marker (strong blue border). Named `focusId` rather than `focus` because a `focus` property would shadow the native `HTMLElement.focus()` method. |
+| `errors` | — | `string[]` | `[]` | IDs of elements to mark as errors (red tint). |
+| `warnings` | — | `string[]` | `[]` | IDs of elements to mark as warnings (orange tint). |
+| `centerOn` | — | `string \| undefined` | `undefined` | ID of the element to animate the viewport to. Animates with a smooth ease-out transition each time the value changes. |
+
+### `auto-layout` details
+
+The pug syntax intentionally omits layout information. The `pugToXml` parser
+auto-injects `<incoming>` / `<outgoing>` child elements from `sequenceFlow`
+`sourceRef`/`targetRef` attributes so the layout engine has the graph structure it
+needs. You do not need to include a `bpmndi:BPMNDiagram` section, any `Bounds`
+elements, or a `collaboration` wrapper.
+
+## Events
+
+| Event | Detail | Bubbles | Composed | When |
+|-------|--------|---------|----------|------|
+| `llumi-bpmn-select` | `{ type: string; id: string }` | yes | yes | User clicks a BPMN element (task, gateway, event, flow, etc.). |
+| `llumi-bpmn-deselect` | — | yes | yes | User clicks the process or collaboration root (background click — deselects any selection). |
+
+Both events cross shadow-DOM boundaries (`composed: true`) so parent documents
+can listen on a regular ancestor element.
+
+```js
+diagram.addEventListener("llumi-bpmn-select", (e) => {
+  console.log(e.detail.type, e.detail.id);
+});
+diagram.addEventListener("llumi-bpmn-deselect", () => {
+  console.log("deselected");
+});
+```
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `fit-button` | The fit-to-viewport button shown in the top-right toolbar when the diagram renders successfully. |
+| `error` | The error box shown when the BPMN definition fails to parse or import. |
+
+## Styling
+
+bpmn-js base CSS (`bpmn-js.css`, `diagram-js.css`) and the element-marker CSS are
+**automatically injected** into the document when the component connects. No CSS
+import is required from the consumer.
+
+## Interaction
+
+- **Pan:** two-finger scroll (trackpad) / left-drag.
+- **Zoom:** pinch (trackpad) or ctrl+wheel / scroll.
+- **Fit:** the top-right button resets the viewport to fit all elements.
+- **Auto-fit:** the diagram fits its container on load and re-fits when the
+  container resizes — until you pan or zoom, after which your view is preserved
+  (clicking fit re-enables auto-fit).
+- **Click element:** fires `llumi-bpmn-select`.
+- **Click background:** fires `llumi-bpmn-deselect`.
+
+## Dependencies
+
+`bpmn-js`, `bpmn-moddle`, `character-parser`, `is-expression`, `min-dash`, `graph-by-ivan-tulaev`. The component lazy-loads the bpmn-js viewer on
+first render for optimal bundle size.
+
+Consume via:
+
+```js
+import "@llumi/design-system/bpmn";
+```
+
+## Known limitations
+
+- **Auto-layout + data objects in a collaboration.** When `auto-layout` is on,
+  the layout engine cannot place `dataObject`/`dataObjectReference` elements that
+  live inside a process belonging to a collaboration (a process with pools) — it
+  throws `Element <id> is not associated with any leaf in lane tree`. Data objects
+  in a standalone (non-collaboration) process lay out fine. To show data objects
+  inside pools, supply pre-computed `bpmndi:` coordinates and set `auto-layout`
+  off.
+
+## Pug schema reference
+
+See [`bpmn-specifications.md`](./bpmn-specifications.md) for the full pug-syntax
+schema covering all BPMN 2.0 element types, attributes, and nesting rules.