@llumi/design-system 1.0.0 → 2.0.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](./dist/base.md) |
+| `<llumi-review>` | `/review.mjs` | [review.md](./dist/review.md) |
+| `<llumi-bpmn>` | `/bpmn.mjs` | [bpmn.md](./dist/bpmn.md) |
+| `<llumi-mermaid>` | `/mermaid.mjs` | [mermaid.md](./dist/mermaid.md) |
+| `<llumi-highlighter>` | `/highlighter.mjs` | [highlighter.md](./dist/highlighter.md) |
+| `<llumi-copy-button>` | `/copy-button.mjs` | [copy-button.md](./dist/copy-button.md) |
+| `<llumi-download-button>` | `/download-button.mjs` | [download-button.md](./dist/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](./dist/LICENSE). Bundled third-party components and their notices are listed in [NOTICE](./dist/NOTICE).