@llumi/design-system 1.0.1 → 2.1.0

package/llumi-element-BWRwgzW5.js

@@ -0,0 +1,22 @@
+import { LitElement as t, css as o } from "https://cdn.jsdelivr.net/npm/lit@3.3.3";
+/*! @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 e = o`
+	:host {
+		box-sizing: border-box;
+		font-family: var(--llumi-font-sans, ui-sans-serif, system-ui, sans-serif);
+	}
+	*,
+	*::before,
+	*::after {
+		box-sizing: inherit;
+	}
+	:host([hidden]) {
+		display: none !important;
+	}
+`, s = class s extends t {
+};
+s.styles = e;
+let i = s;
+export {
+  i as L
+};

package/mermaid.md

@@ -0,0 +1,58 @@
+# `<llumi-mermaid>`
+
+Renders a [Mermaid](https://mermaid.js.org) diagram from a definition string, with
+trackpad/mouse pan + zoom and a fit-to-view button.
+
+> **Breaking change (v2):** The `code` property has been removed. Pass the diagram
+> definition as the element's text content (light-DOM slot) instead.
+
+## Usage
+
+```html
+<llumi-mermaid theme="dark">
+  graph TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[Done]
+    B -->|No| D[Retry]
+</llumi-mermaid>
+```
+
+The diagram source is the element's **light-DOM text content** — whitespace is
+automatically dedented. Re-renders whenever the text content changes.
+
+## Properties / Attributes
+
+| Name | Attribute | Type | Default | Description |
+|------|-----------|------|---------|-------------|
+| `theme` | `theme` | `string` | `"default"` | Built-in mermaid theme: `default`, `neutral`, `dark`, `forest`, `base`, `null`. |
+
+### Custom theming
+
+There is no `themeVariables` property. Use Mermaid's native in-diagram directive, which
+overrides the element's `theme`:
+
+```
+%%{init: {'theme':'base','themeVariables':{'primaryColor':'#dbeafe'}}}%%
+graph TD
+  A --> B
+```
+
+## Events
+
+| Event | Detail | When |
+|-------|--------|------|
+| `llumi-mermaid-render` | — | A diagram rendered successfully. |
+| `llumi-mermaid-error` | `{ error: string }` | The definition failed to parse; the error box is shown instead of the diagram. |
+
+Both bubble and cross shadow boundaries (`composed: true`).
+
+## Interaction
+
+- **Pan:** two-finger scroll (trackpad) / drag.
+- **Zoom:** pinch (trackpad) or ctrl+wheel; scale clamped to `[0.25, 4]`.
+- **Fit:** the top-right button resets the view.
+
+## Dependencies
+
+`mermaid`, `d3-selection`, `d3-zoom`, `d3-transition`. This package ships ESM only; consume
+this component via `import "@llumi/design-system/mermaid"`.

package/mermaid.mjs

@@ -0,0 +1,254 @@
+import { select as _ } from "https://cdn.jsdelivr.net/npm/d3-selection@3.0.0";
+import { zoomIdentity as l, zoom as C } from "https://cdn.jsdelivr.net/npm/d3-zoom@3.0.0";
+import { nothing as m, html as c, unsafeCSS as d } from "https://cdn.jsdelivr.net/npm/lit@3.3.3";
+import { property as b, state as u, query as y, customElement as T } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/decorators.js";
+import p from "https://cdn.jsdelivr.net/npm/mermaid@11.16.0";
+import "https://cdn.jsdelivr.net/npm/d3-transition@3.0.1";
+import { i as w } from "./icon-button-BwB11RGC.js";
+import { i as S } from "./icons-BaUbjt-v.js";
+import { L as f } from "./llumi-element-BWRwgzW5.js";
+import { S as E } from "./slot-text-mSWBdWBc.js";
+/*! @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 x = 0.01, z = 150;
+function P(r, t, e) {
+  return l.translate(r.x - t, r.y - e).scale(r.k);
+}
+function D(r, t, e, s) {
+  const i = 1 - s * x;
+  return l.translate(
+    t - (t - r.x) * i,
+    e - (e - r.y) * i
+  ).scale(r.k * i);
+}
+function L(r, t, e, s) {
+  return l.translate(t - (t - r.x) * s, e - (e - r.y) * s).scale(r.k * s);
+}
+function k() {
+  return typeof navigator < "u" && (/Mac|iPhone|iPad|iPod/.test(navigator.platform) || /Macintosh/.test(navigator.userAgent));
+}
+class M {
+  constructor(t) {
+    this.enabled = k(), this.target = null, this.lastPinchTime = 0, this.lastScale = 1, this.onWheel = (e) => {
+      if (!this.target) return;
+      e.preventDefault(), e.stopPropagation();
+      const s = this.getTransform(), { svgSelection: i, zoomBehavior: o } = this.target;
+      this.isPinch(e) ? (this.lastPinchTime = Date.now(), i.call(
+        o.transform,
+        D(s, e.offsetX, e.offsetY, e.deltaY)
+      )) : i.call(
+        o.transform,
+        P(s, e.deltaX, e.deltaY)
+      );
+    }, this.onGestureStart = (e) => {
+      e.preventDefault(), e.stopPropagation(), this.lastScale = e.scale;
+    }, this.onGestureChange = (e) => {
+      if (!this.target) return;
+      e.preventDefault(), e.stopPropagation();
+      const s = e, i = s.scale - this.lastScale;
+      this.lastScale = s.scale;
+      const o = this.getTransform(), n = this.target.svgEl.getBoundingClientRect(), { svgSelection: g, zoomBehavior: v } = this.target;
+      g.call(
+        v.transform,
+        L(
+          o,
+          s.clientX - n.left,
+          s.clientY - n.top,
+          1 + i
+        )
+      );
+    }, this.onGestureEnd = (e) => {
+      e.preventDefault();
+    }, t.addController(this);
+  }
+  hostConnected() {
+  }
+  hostDisconnected() {
+    this.setTarget(null);
+  }
+  setTarget(t) {
+    this.detach(), this.target = t, this.attach();
+  }
+  getTransform() {
+    var e;
+    const t = (e = this.target) == null ? void 0 : e.svgEl;
+    return (t == null ? void 0 : t.__zoom) ?? l;
+  }
+  isPinch(t) {
+    return t.ctrlKey ? !0 : Date.now() - this.lastPinchTime < z;
+  }
+  attach() {
+    if (!this.enabled || !this.target) return;
+    const { svgEl: t, svgSelection: e } = this.target;
+    e.on("wheel.zoom", null), t.addEventListener("wheel", this.onWheel, {
+      passive: !1,
+      capture: !0
+    }), t.addEventListener("gesturestart", this.onGestureStart, {
+      capture: !0
+    }), t.addEventListener("gesturechange", this.onGestureChange, {
+      capture: !0
+    }), t.addEventListener("gestureend", this.onGestureEnd, { capture: !0 });
+  }
+  detach() {
+    if (!this.target) return;
+    const { svgEl: t } = this.target;
+    t.removeEventListener("wheel", this.onWheel, { capture: !0 }), t.removeEventListener("gesturestart", this.onGestureStart, {
+      capture: !0
+    }), t.removeEventListener("gesturechange", this.onGestureChange, {
+      capture: !0
+    }), t.removeEventListener("gestureend", this.onGestureEnd, {
+      capture: !0
+    });
+  }
+}
+const O = ":host{display:block}.root{position:relative;width:100%;height:100%}.container{width:100%;height:100%;overflow:hidden}.container.hidden{display:none}.error{padding:1rem;font-size:.875rem;color:var(--llumi-color-danger, oklch(57.7% .245 27.325));border:1px solid color-mix(in oklab,var(--llumi-color-danger, oklch(57.7% .245 27.325)) 35%,transparent);border-radius:var(--llumi-radius, .5rem)}.error p{margin:0;font-weight:500}.error pre{margin:.5rem 0 0;font-size:.75rem;white-space:pre-wrap;font-family:var(--llumi-font-mono, ui-monospace, monospace)}.fit{position:absolute;top:.5rem;right:.5rem;z-index:1;background:color-mix(in oklab,var(--llumi-color-surface, oklch(100% 0 0)) 80%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}";
+function G(r = "default") {
+  return typeof r == "string" ? { startOnLoad: !1, theme: r } : { startOnLoad: !1, theme: "base", themeVariables: r };
+}
+var q = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, h = (r, t, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? $(t, e) : t, o = r.length - 1, n; o >= 0; o--)
+    (n = r[o]) && (i = (s ? n(t, e, i) : n(i)) || i);
+  return s && i && q(t, e, i), i;
+};
+let I = 0, a = class extends f {
+  constructor() {
+    super(...arguments), this.theme = "default", this._source = "", this._error = null, this._hasDiagram = !1, this._slot = new E(this, (r) => {
+      this._source = r;
+    }), this._uid = `llumi-mermaid-${++I}`, this._seq = 0, this._renderTask = Promise.resolve(), this._gestures = new M(this), this._zoomCtx = null, this.fitToContent = () => {
+      const r = this._zoomCtx;
+      r && r.svgSelection.transition().duration(300).call(r.zoomBehavior.transform, l);
+    };
+  }
+  /** Diagram source: dedented light-DOM text content. */
+  get resolvedCode() {
+    return this._source;
+  }
+  /** Test hook: resolves when the in-flight render has settled.
+   * Chains through `updateComplete` so that calling this immediately after a
+   * property change (before the next Lit update cycle) still awaits the render
+   * that `willUpdate` schedules for that change. */
+  get whenRendered() {
+    return this.updateComplete.then(() => this._renderTask);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._source = this._slot.text;
+  }
+  willUpdate(r) {
+    (r.has("_source") || r.has("theme")) && (this._renderTask = this.renderDiagram());
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._seq++, this.teardownZoom(), this._container && (this._container.innerHTML = ""), this.cleanupOrphans();
+  }
+  cleanupOrphans() {
+    var r;
+    for (const t of document.querySelectorAll(
+      `#d${this._uid}, #${this._uid}`
+    ))
+      (r = this._container) != null && r.contains(t) || t.remove();
+  }
+  /** Attach d3-zoom + gestures to the freshly rendered SVG. */
+  onSvgRendered(r) {
+    var o;
+    const t = r.querySelector("svg");
+    if (!t) return;
+    const e = _(t), s = e.append("g");
+    for (const n of Array.from(t.childNodes))
+      n !== s.node() && ((o = s.node()) == null || o.appendChild(n));
+    t.style.cursor = "grab", t.style.maxWidth = "100%", t.style.maxHeight = "100%", t.setAttribute("height", "100%");
+    const i = C().scaleExtent([0.25, 4]).on("zoom", (n) => {
+      s.attr("transform", n.transform);
+    });
+    e.call(i), this._zoomCtx = { svgSelection: e, zoomBehavior: i }, this._gestures.setTarget({
+      svgEl: t,
+      svgSelection: e,
+      zoomBehavior: i
+    });
+  }
+  /** Tear down zoom/gesture state on error/disconnect. */
+  teardownZoom() {
+    this._gestures.setTarget(null), this._zoomCtx = null;
+  }
+  /** Test hook: jump the zoom to scale `k` (no transition). */
+  zoomTo(r) {
+    const t = this._zoomCtx;
+    t && t.svgSelection.call(
+      // biome-ignore lint/suspicious/noExplicitAny: d3-zoom transform overload
+      t.zoomBehavior.transform,
+      l.scale(r)
+    );
+  }
+  async renderDiagram() {
+    const r = this.resolvedCode, t = ++this._seq;
+    if (!r) {
+      this._container && (this._container.innerHTML = ""), this.teardownZoom(), this._error = null, this._hasDiagram = !1;
+      return;
+    }
+    try {
+      p.initialize(G(this.theme));
+      const { svg: e } = await p.render(this._uid, r);
+      if (t !== this._seq) return;
+      await this.updateComplete;
+      const s = this._container;
+      if (!s) return;
+      s.innerHTML = e, this._error = null, this._hasDiagram = !0, this.onSvgRendered(s), this.dispatchEvent(
+        new CustomEvent("llumi-mermaid-render", {
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    } catch (e) {
+      if (t !== this._seq) return;
+      const s = e instanceof Error ? e.message : String(e);
+      this._container && (this._container.innerHTML = ""), this.teardownZoom(), this._error = s, this._hasDiagram = !1, this.dispatchEvent(
+        new CustomEvent("llumi-mermaid-error", {
+          detail: { error: s },
+          bubbles: !0,
+          composed: !0
+        })
+      );
+    } finally {
+      this.cleanupOrphans();
+    }
+  }
+  render() {
+    return c`<div class="root">
+			<div class="container ${this._error ? "hidden" : ""}"></div>
+			${this._hasDiagram && !this._error ? c`<button
+							class="fit"
+							@click=${this.fitToContent}
+							aria-label="Fit diagram to view"
+						>
+							<i>${S.maximize}</i>
+						</button>` : m}
+			${this._error ? c`<div class="error" role="alert">
+							<p>Invalid Mermaid syntax</p>
+							<pre>${this._error}</pre>
+						</div>` : m}
+		</div>`;
+  }
+};
+a.styles = [
+  f.styles,
+  d(w),
+  d(O)
+];
+h([
+  b({ reflect: !0 })
+], a.prototype, "theme", 2);
+h([
+  u()
+], a.prototype, "_source", 2);
+h([
+  u()
+], a.prototype, "_error", 2);
+h([
+  u()
+], a.prototype, "_hasDiagram", 2);
+h([
+  y(".container")
+], a.prototype, "_container", 2);
+a = h([
+  T("llumi-mermaid")
+], a);
+export {
+  a as LlumiMermaid
+};

package/package.json

@@ -1,51 +1,17 @@
 {
-  "name": "@llumi/design-system",
-  "version": "1.0.1",
-  "type": "module",
-  "files": [
-    "dist",
-    "custom-elements.json"
-  ],
-  "sideEffects": [
-    "**/*.css",
-    "**/*.js",
-    "**/*.mjs",
-    "**/*.cjs"
-  ],
-  "exports": {
-    "./review": {
-      "types": "./dist/types/components/review/index.d.ts",
-      "import": "./dist/review.mjs",
-      "require": "./dist/review.cjs",
-      "default": "./dist/review.mjs"
-    },
-    "./review.mjs": "./dist/review.mjs",
-    "./review.cjs": "./dist/review.cjs",
-    "./review.js": "./dist/review.js",
-    "./review.css": "./dist/review.css",
-    "./package.json": "./package.json"
-  },
-  "dependencies": {
-    "@floating-ui/dom": "^1.6.13",
-    "clsx": "^2.1.1",
-    "lit": "^3.2.1",
-    "tailwind-merge": "^3.0.2",
-    "tinykeys": "^3.0.0",
-    "xstate": "^5.28.0"
-  },
-  "devDependencies": {
-    "@tailwindcss/vite": "^4.1.18",
-    "@vitest/browser": "^3.0.0",
-    "playwright": "^1.50.0",
-    "tailwindcss": "^4.1.18",
-    "vite": "^6.0.0",
-    "vite-plugin-dts": "^4.5.0",
-    "vitest": "^3.0.0"
-  },
-  "customElements": "custom-elements.json",
-  "scripts": {
-    "build": "vite build -c vite.lib.config.ts && vite build -c vite.umd.config.ts && cp src/components/review/review.css dist/review.css",
-    "analyze": "cem analyze --config custom-elements-manifest.config.mjs",
-    "test:browser": "vitest run"
-  }
-}
+	"name": "@llumi/design-system",
+	"version": "2.1.0",
+	"license": "SEE LICENSE IN LICENSE",
+	"type": "module",
+	"sideEffects": [
+		"**/*.css",
+		"**/*.mjs"
+	],
+	"exports": {
+		"./*": "./*"
+	},
+	"customElements": "custom-elements.json",
+	"publishConfig": {
+		"access": "public"
+	}
+}

package/review.md

@@ -0,0 +1,141 @@
+# `<llumi-review>`
+
+Review wrapper for commenting on light-DOM content. Wrap any content in
+`<llumi-review>`; mark commentable elements with `data-review-id` and selectable
+text regions with `data-review-selectable`. Commenters click an element to leave
+an element-level comment, or select text to leave a selection-level comment
+anchored to the chosen words.
+
+## What it is
+
+A `<llumi-review>` element wraps arbitrary light-DOM content and drives an
+XState-driven annotation flow: a floating review bar (toggle/comment-count/
+submit), floating comment dialogs anchored to the edited element or selection,
+and CSS Custom Highlight API painting for commented/edited/hovered ranges.
+
+- **Element comments** — click any `[data-review-id]` element to comment on it.
+- **Selection comments** — select text inside any `[data-review-selectable]`
+  element; the comment dialog anchors beside the selected range.
+- **Overall comment** — a free-form note covering the whole document, opened from
+  the review bar.
+- **Persistence** — set the `persist` attribute to a localStorage key to keep
+  the draft across reloads.
+
+## Usage
+
+> **Requires the base theme.** Load `@llumi/design-system/base.css` (or
+> `base.css`) on the page for the document-level styles the component adopts.
+
+```html
+<!-- 1. Register the element (auto side-effect) -->
+<script type="module">
+  import "@llumi/design-system/review";
+</script>
+
+<!-- 2. Wrap content and mark the commentable parts -->
+<llumi-review default-mode="annotating" bar-position="bottom-center">
+  <h1 data-review-id="title">Project Proposal</h1>
+  <p data-review-selectable="intro">
+    Select a sentence in this paragraph to comment on it, or click the heading.
+  </p>
+  <div data-review-id="metric-1" data-review-selectable="metric-1">
+    <strong>42</strong> open issues
+  </div>
+</llumi-review>
+```
+
+Or with a named import:
+
+```js
+import { LlumiReview } from "@llumi/design-system/review";
+```
+
+## Marking up commentable content
+
+| Attribute | Applies to | Meaning |
+|-----------|-----------|---------|
+| `data-review-id` | any element | The element is commentable as a whole; clicks open an element-level comment. The value is the `targetId`. |
+| `data-review-selectable` | any element containing text | Text inside the element can be selected to open a selection-level comment anchored to the chosen range. The value is the `targetId`. |
+
+Both attributes may be set on the same element (e.g. a paragraph you want both
+click- and selection-commentable). Elements without either attribute are not
+commentable. `targetId` values are arbitrary strings; the component does not
+generate them for you.
+
+## Attributes and properties
+
+| Name | Attribute | Type | Default | Notes |
+|------|-----------|------|---------|-------|
+| `defaultMode` | `default-mode` | `"idle" \| "annotating"` | `"idle"` | Whether the component starts in annotation mode. Set `default-mode="annotating"` to enter review mode immediately on connect. |
+| `barPosition` | `bar-position` | `ReviewBarPosition` | `"bottom-center"` | Position of the floating review bar. One of: `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`. |
+| `shortcut` | `shortcut` | `string` | `"$mod+Shift+M"` | Keyboard shortcut (tinykeys syntax) to toggle annotation mode. `$mod` is `Cmd` on macOS, `Ctrl` elsewhere. |
+| `persist` | `persist` | `string` | — (off) | When set to a non-empty value, the review draft is persisted to `localStorage` under that key and restored on load. Read once on connect. |
+| `initialData` | — (property) | `ReviewResult` | `undefined` | Pre-loaded review state (existing comments). No HTML attribute. Set before connect. |
+| `customTargets` | — (property) | `CustomTarget[]` | `undefined` | Additional non-DOM comment targets. No HTML attribute. |
+
+## Events
+
+Both events bubble and are composed (they cross shadow boundaries).
+
+### `llumi-review-change`
+
+Fires on every edit — a comment added, edited, or deleted, or the overall
+comment changed. `detail` is a `ReviewResult`:
+
+```ts
+element.addEventListener("llumi-review-change", (e: CustomEvent<ReviewResult>) => {
+  console.log("current review:", e.detail);
+});
+```
+
+### `llumi-review-submit`
+
+Fires when the user clicks Submit / Approve on the review bar. `detail` is
+`{ result, clearPersisted }`:
+
+```ts
+element.addEventListener(
+  "llumi-review-submit",
+  (e: CustomEvent<ReviewSubmitDetail>) => {
+    const { result, clearPersisted } = e.detail;
+    // Persist `result` to your server, then:
+    clearPersisted(); // discard the localStorage draft for this element
+  },
+);
+```
+
+Call `clearPersisted()` only after a confirmed server save; it is a no-op when
+persistence is off. You can also call `element.clearPersisted()` directly.
+
+## Data shapes
+
+```ts
+interface SelectionRange {
+  startOffset: number;
+  endOffset: number;
+  selectedText: string;
+  matchIndex: number;
+}
+
+interface ReviewComment {
+  commentId: string;
+  targetId: string;        // matches a data-review-id / data-review-selectable value
+  content: string;
+  createdAt: string;       // ISO timestamp
+  selection?: SelectionRange; // present for selection-level comments
+}
+
+type ReviewResult =
+  | { status: "approved" }
+  | { status: "commented"; comments: ReviewComment[]; overallComment?: string };
+
+interface ReviewSubmitDetail {
+  result: ReviewResult;
+  clearPersisted: () => void;
+}
+```
+
+## Dependencies
+
+`xstate`, `@floating-ui/dom`, `tinykeys`. This package ships ESM only; consume
+this component via `import "@llumi/design-system/review"`.