@llumi/design-system 1.0.0 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/LICENSE +51 -0
  2. package/NOTICE +66 -0
  3. package/README.md +15 -205
  4. package/custom-elements.json +1184 -18
  5. package/dist/LICENSE +51 -0
  6. package/dist/NOTICE +66 -0
  7. package/dist/README.md +29 -0
  8. package/dist/adopt-global-styles-DykTxdm8.js +15 -0
  9. package/dist/base.css +2 -0
  10. package/dist/base.md +59 -0
  11. package/dist/bpmn.md +113 -0
  12. package/dist/bpmn.mjs +5076 -0
  13. package/dist/copy-button.md +128 -0
  14. package/dist/copy-button.mjs +161 -0
  15. package/dist/download-button.md +106 -0
  16. package/dist/download-button.mjs +177 -0
  17. package/dist/highlighter.md +45 -0
  18. package/dist/highlighter.mjs +403 -0
  19. package/dist/icon-button-BeLaqJmK.js +5 -0
  20. package/dist/icons-DBLWcA83.js +42 -0
  21. package/dist/index-elWLeWLs.js +7733 -0
  22. package/dist/llumi-element-DTeRDxao.js +22 -0
  23. package/dist/mermaid.md +58 -0
  24. package/dist/mermaid.mjs +254 -0
  25. package/dist/review.md +141 -0
  26. package/dist/review.mjs +1039 -690
  27. package/dist/slot-text-DW3pDxNK.js +51 -0
  28. package/dist/theme.css +2 -0
  29. package/package.json +49 -26
  30. package/dist/review.cjs +0 -172
  31. package/dist/review.css +0 -98
  32. package/dist/review.js +0 -172
  33. package/dist/types/components/review/comment-dialog.element.d.ts +0 -21
  34. package/dist/types/components/review/custom-target.utils.d.ts +0 -16
  35. package/dist/types/components/review/default-editor.element.d.ts +0 -19
  36. package/dist/types/components/review/highlight-manager.d.ts +0 -21
  37. package/dist/types/components/review/index.d.ts +0 -8
  38. package/dist/types/components/review/overall-comment-dialog.element.d.ts +0 -22
  39. package/dist/types/components/review/review-bar.element.d.ts +0 -26
  40. package/dist/types/components/review/review.element.d.ts +0 -56
  41. package/dist/types/components/review/review.machine.d.ts +0 -234
  42. package/dist/types/components/review/review.persistence.d.ts +0 -16
  43. package/dist/types/components/review/review.type.d.ts +0 -37
  44. package/dist/types/components/review/selection-comment-icons.element.d.ts +0 -17
  45. package/dist/types/components/review/selection-range.utils.d.ts +0 -6
  46. package/dist/types/components/review/sort-comments.utils.d.ts +0 -6
  47. package/dist/types/index.d.ts +0 -1
  48. package/dist/types/shared/cn.d.ts +0 -2
  49. package/dist/types/shared/icons.d.ts +0 -7
  50. package/dist/types/shared/tailwind-element.d.ts +0 -4
@@ -1,21 +0,0 @@
1
- import { PropertyValues } from 'lit';
2
- import { TailwindElement } from '../../shared/tailwind-element';
3
- export declare class LlumiCommentDialog extends TailwindElement {
4
- targetElement: HTMLElement | null;
5
- value: string;
6
- private floating;
7
- private cleanup?;
8
- render(): import('lit').TemplateResult<1>;
9
- private onEditorChange;
10
- private onCancel;
11
- private onDelete;
12
- private startPositioning;
13
- updated(changed: PropertyValues): void;
14
- private focusEditor;
15
- disconnectedCallback(): void;
16
- }
17
- declare global {
18
- interface HTMLElementTagNameMap {
19
- "llumi-comment-dialog": LlumiCommentDialog;
20
- }
21
- }
@@ -1,16 +0,0 @@
1
- export interface CustomTarget {
2
- selector: string;
3
- toId: (element: HTMLElement) => string | null;
4
- }
5
- export declare function resolveTargetId(el: HTMLElement, customTargets?: CustomTarget[]): string | null;
6
- export declare function findClosestTarget(from: HTMLElement, customTargets?: CustomTarget[]): {
7
- element: HTMLElement;
8
- targetId: string;
9
- } | null;
10
- export type TargetKind = "element" | "selectable" | "both";
11
- export type ResolvedTarget = {
12
- element: HTMLElement;
13
- targetId: string;
14
- kind: TargetKind;
15
- };
16
- export declare function queryAllTargets(wrapper: HTMLElement, customTargets?: CustomTarget[]): ResolvedTarget[];
@@ -1,19 +0,0 @@
1
- import { TailwindElement } from '../../shared/tailwind-element';
2
- export declare class LlumiDefaultEditor extends TailwindElement {
3
- value: string;
4
- autoFocus: boolean;
5
- placeholder: string;
6
- private textarea;
7
- /** Focus the inner textarea (the element itself isn't focusable). */
8
- focus(): void;
9
- render(): import('lit').TemplateResult<1>;
10
- private onInput;
11
- private autoGrow;
12
- firstUpdated(): void;
13
- updated(): void;
14
- }
15
- declare global {
16
- interface HTMLElementTagNameMap {
17
- "llumi-default-editor": LlumiDefaultEditor;
18
- }
19
- }
@@ -1,21 +0,0 @@
1
- import { CustomTarget } from './custom-target.utils';
2
- export interface ObserveCallbacks {
3
- editingTarget?: HTMLElement | null;
4
- onTargetDisconnected: () => void;
5
- onSelectableReconnected: () => void;
6
- commentedIds: Set<string>;
7
- }
8
- export declare function createHighlightManager(wrapper: HTMLElement, customTargets?: CustomTarget[]): {
9
- activate: (commentedIds: Set<string>) => void;
10
- deactivate: () => void;
11
- reveal: (flash: boolean) => void;
12
- unreveal: () => void;
13
- setEditing: (target: HTMLElement, isSelection: boolean) => void;
14
- clearEditing: (target: HTMLElement, hasComment: boolean) => void;
15
- applyHover: (element: HTMLElement, editingTargetId?: string) => void;
16
- clearHover: (element: HTMLElement, editingTargetId?: string, commentedIds?: Set<string>) => void;
17
- startObserving: (callbacks: ObserveCallbacks) => void;
18
- stopObserving: () => void;
19
- destroy: () => void;
20
- };
21
- export type HighlightManager = ReturnType<typeof createHighlightManager>;
@@ -1,8 +0,0 @@
1
- export { LlumiCommentDialog } from './comment-dialog.element';
2
- export type { CustomTarget } from './custom-target.utils';
3
- export { LlumiDefaultEditor } from './default-editor.element';
4
- export { LlumiOverallCommentDialog } from './overall-comment-dialog.element';
5
- export { LlumiReview } from './review.element';
6
- export type { ReviewBarPosition, ReviewComment, ReviewEditorContract, ReviewMode, ReviewResult, SelectionRange, } from './review.type';
7
- export { LlumiReviewBar } from './review-bar.element';
8
- export { LlumiSelectionCommentIcons } from './selection-comment-icons.element';
@@ -1,22 +0,0 @@
1
- import { PropertyValues } from 'lit';
2
- import { TailwindElement } from '../../shared/tailwind-element';
3
- export declare class LlumiOverallCommentDialog extends TailwindElement {
4
- barElement: HTMLElement | null;
5
- value: string;
6
- private floating;
7
- private cleanup?;
8
- private onDocKeydown;
9
- private onDocPointerdown;
10
- render(): import('lit').TemplateResult<1>;
11
- private onEditorChange;
12
- private emitClose;
13
- private startPositioning;
14
- connectedCallback(): void;
15
- updated(changed: PropertyValues): void;
16
- disconnectedCallback(): void;
17
- }
18
- declare global {
19
- interface HTMLElementTagNameMap {
20
- "llumi-overall-comment-dialog": LlumiOverallCommentDialog;
21
- }
22
- }
@@ -1,26 +0,0 @@
1
- import { TailwindElement } from '../../shared/tailwind-element';
2
- import { ReviewBarPosition, ReviewMode } from './review.type';
3
- export declare class LlumiReviewBar extends TailwindElement {
4
- mode: ReviewMode;
5
- commentCount: number;
6
- hasOverallComment: boolean;
7
- overallCommentOpen: boolean;
8
- barPosition: ReviewBarPosition;
9
- private bar;
10
- private dragOffset;
11
- private dragStart;
12
- get barRoot(): HTMLElement | null;
13
- render(): import('lit').TemplateResult<1>;
14
- private onToggle;
15
- private onOverallToggle;
16
- private onSubmit;
17
- private onDragStart;
18
- private onDragMove;
19
- private onDragEnd;
20
- disconnectedCallback(): void;
21
- }
22
- declare global {
23
- interface HTMLElementTagNameMap {
24
- "llumi-review-bar": LlumiReviewBar;
25
- }
26
- }
@@ -1,56 +0,0 @@
1
- import { CustomTarget } from './custom-target.utils';
2
- import { ReviewResult } from './review.type';
3
- /**
4
- * `<llumi-review>` — wraps light-DOM content for element- and text-selection
5
- * review comments. Both events bubble and are composed.
6
- *
7
- * @fires llumi-review-change - On every edit (comment added/edited/deleted, or overall comment changed). `detail` is a `ReviewResult`.
8
- * @fires llumi-review-submit - When the user clicks Submit / Approve. `detail` is `{ result: ReviewResult, clearPersisted: () => void }`; call `clearPersisted()` after a confirmed server save to discard the persisted draft.
9
- */
10
- export declare class LlumiReview extends HTMLElement {
11
- static observedAttributes: string[];
12
- initialData?: ReviewResult;
13
- customTargets?: CustomTarget[];
14
- private actor;
15
- private persistence;
16
- private manager;
17
- private rangeMap;
18
- private hoveredComment;
19
- private selectionJustHandled;
20
- private selectionComments;
21
- private bar;
22
- private commentDialog;
23
- private overallDialog;
24
- private icons;
25
- private get shortcut();
26
- private get barPosition();
27
- private get defaultMode();
28
- private get persistKey();
29
- connectedCallback(): void;
30
- disconnectedCallback(): void;
31
- attributeChangedCallback(): void;
32
- private buildDetailResult;
33
- private emitChange;
34
- private emitSubmit;
35
- /** Clears the persisted draft for this element. No-op when persistence is off. */
36
- clearPersisted(): void;
37
- private mountChrome;
38
- private onIconClick;
39
- private syncFromSnapshot;
40
- private buildHighlightCallbacks;
41
- private updateSelectionHighlights;
42
- private isAnnotating;
43
- private caretPosition;
44
- private onPointerUp;
45
- private onPointerMove;
46
- private onClickCapture;
47
- private onWrapperClick;
48
- private currentEditingTargetId;
49
- private onMouseOver;
50
- private onMouseOut;
51
- }
52
- declare global {
53
- interface HTMLElementTagNameMap {
54
- "llumi-review": LlumiReview;
55
- }
56
- }
@@ -1,234 +0,0 @@
1
- import { ReviewPersistence } from './review.persistence';
2
- import { ReviewComment, ReviewResult, SelectionRange } from './review.type';
3
- export interface HighlightCallbacks {
4
- activate: (commentedIds: Set<string>) => void;
5
- deactivate: () => void;
6
- reveal: (flash: boolean) => void;
7
- unreveal: () => void;
8
- setEditing: (target: HTMLElement, isSelection: boolean) => void;
9
- clearEditing: (target: HTMLElement, hasComment: boolean) => void;
10
- }
11
- type ReviewMachineContext = {
12
- comments: ReviewComment[];
13
- overallComment: string;
14
- editingCommentId: string | null;
15
- targetElement: HTMLElement | null;
16
- selectionRange: SelectionRange | null;
17
- shortcut: string;
18
- defaultMode: "idle" | "annotating";
19
- highlights: HighlightCallbacks;
20
- persistence: ReviewPersistence;
21
- };
22
- type ReviewMachineEvents = {
23
- type: "TOGGLE";
24
- } | {
25
- type: "HOLD_ANNOTATE";
26
- } | {
27
- type: "RELEASE_ANNOTATE";
28
- } | {
29
- type: "CLICK";
30
- targetId?: string;
31
- element?: HTMLElement;
32
- selectionCommentId?: string;
33
- } | {
34
- type: "SELECT_TEXT";
35
- targetId: string;
36
- targetElement: HTMLElement;
37
- selectionRange: SelectionRange;
38
- } | {
39
- type: "COMMENT_CHANGE";
40
- content: string;
41
- } | {
42
- type: "DELETE";
43
- } | {
44
- type: "CLOSE";
45
- } | {
46
- type: "SUBMIT";
47
- } | {
48
- type: "TARGET_DISCONNECTED";
49
- } | {
50
- type: "OPEN_OVERALL";
51
- } | {
52
- type: "MOUNTED";
53
- };
54
- export type ReviewMachineEmitted = {
55
- type: "REVIEW_CHANGED";
56
- result: ReviewResult;
57
- } | {
58
- type: "REVIEW_SUBMITTED";
59
- result: ReviewResult;
60
- };
61
- type ReviewMachineInput = {
62
- shortcut: string;
63
- initialData?: ReviewResult;
64
- defaultMode: "idle" | "annotating";
65
- highlights: HighlightCallbacks;
66
- persistence: ReviewPersistence;
67
- };
68
- export declare function buildReviewResult(context: Pick<ReviewMachineContext, "comments" | "overallComment">): ReviewResult;
69
- export declare function createReviewMachine(): import('xstate').StateMachine<ReviewMachineContext, {
70
- type: "TOGGLE";
71
- } | {
72
- type: "HOLD_ANNOTATE";
73
- } | {
74
- type: "RELEASE_ANNOTATE";
75
- } | {
76
- type: "CLICK";
77
- targetId?: string;
78
- element?: HTMLElement;
79
- selectionCommentId?: string;
80
- } | {
81
- type: "SELECT_TEXT";
82
- targetId: string;
83
- targetElement: HTMLElement;
84
- selectionRange: SelectionRange;
85
- } | {
86
- type: "COMMENT_CHANGE";
87
- content: string;
88
- } | {
89
- type: "DELETE";
90
- } | {
91
- type: "CLOSE";
92
- } | {
93
- type: "SUBMIT";
94
- } | {
95
- type: "TARGET_DISCONNECTED";
96
- } | {
97
- type: "OPEN_OVERALL";
98
- } | {
99
- type: "MOUNTED";
100
- }, {
101
- [x: string]: import('xstate').ActorRefFromLogic<import('xstate').CallbackActorLogic<ReviewMachineEvents, {
102
- targetElement: HTMLElement;
103
- wrapperElement: HTMLElement;
104
- }, import('xstate').EventObject>> | undefined;
105
- keyboard?: import('xstate').ActorRefFromLogic<import('xstate').CallbackActorLogic<ReviewMachineEvents, {
106
- shortcut: string;
107
- }, import('xstate').EventObject>> | undefined;
108
- }, {
109
- src: "keyboardActor";
110
- logic: import('xstate').CallbackActorLogic<ReviewMachineEvents, {
111
- shortcut: string;
112
- }, import('xstate').EventObject>;
113
- id: "keyboard";
114
- } | {
115
- src: "mutationObserverActor";
116
- logic: import('xstate').CallbackActorLogic<ReviewMachineEvents, {
117
- targetElement: HTMLElement;
118
- wrapperElement: HTMLElement;
119
- }, import('xstate').EventObject>;
120
- id: string | undefined;
121
- }, {
122
- type: "openElementComment";
123
- params: import('xstate').NonReducibleUnknown;
124
- } | {
125
- type: "openSelectionComment";
126
- params: import('xstate').NonReducibleUnknown;
127
- } | {
128
- type: "createSelectionComment";
129
- params: import('xstate').NonReducibleUnknown;
130
- } | {
131
- type: "updateContent";
132
- params: import('xstate').NonReducibleUnknown;
133
- } | {
134
- type: "deleteComment";
135
- params: import('xstate').NonReducibleUnknown;
136
- } | {
137
- type: "cleanup";
138
- params: import('xstate').NonReducibleUnknown;
139
- } | {
140
- type: "emitChanged";
141
- params: import('xstate').NonReducibleUnknown;
142
- } | {
143
- type: "persistSave";
144
- params: unknown;
145
- } | {
146
- type: "emitSubmitted";
147
- params: import('xstate').NonReducibleUnknown;
148
- } | {
149
- type: "highlightsActivate";
150
- params: unknown;
151
- } | {
152
- type: "highlightsDeactivate";
153
- params: unknown;
154
- } | {
155
- type: "highlightsRevealFlash";
156
- params: unknown;
157
- } | {
158
- type: "highlightsReveal";
159
- params: unknown;
160
- } | {
161
- type: "highlightsUnreveal";
162
- params: unknown;
163
- } | {
164
- type: "editingTargetSet";
165
- params: unknown;
166
- } | {
167
- type: "editingTargetCleared";
168
- params: unknown;
169
- }, {
170
- type: "isCommentingEditing";
171
- params: import('xstate').NonReducibleUnknown;
172
- } | {
173
- type: "hasSelectionCommentId";
174
- params: unknown;
175
- } | {
176
- type: "hasTargetId";
177
- params: unknown;
178
- } | {
179
- type: "hasNoTarget";
180
- params: unknown;
181
- } | {
182
- type: "isSameComment";
183
- params: unknown;
184
- }, "flashDuration", {
185
- commenting: "idle" | {
186
- editing: "element" | "selection";
187
- };
188
- annotating: "waitingForMount" | "inactive" | {
189
- toggled: "flashing" | "ready" | "revealing";
190
- } | {
191
- held: "revealing" | "lingering";
192
- };
193
- }, string, ReviewMachineInput, import('xstate').NonReducibleUnknown, {
194
- type: "REVIEW_CHANGED";
195
- result: ReviewResult;
196
- } | {
197
- type: "REVIEW_SUBMITTED";
198
- result: ReviewResult;
199
- }, import('xstate').MetaObject, {
200
- id: "review";
201
- states: {
202
- readonly annotating: {
203
- states: {
204
- readonly waitingForMount: {};
205
- readonly inactive: {};
206
- readonly toggled: {
207
- states: {
208
- readonly flashing: {};
209
- readonly ready: {};
210
- readonly revealing: {};
211
- };
212
- };
213
- readonly held: {
214
- states: {
215
- readonly revealing: {};
216
- readonly lingering: {};
217
- };
218
- };
219
- };
220
- };
221
- readonly commenting: {
222
- states: {
223
- readonly idle: {};
224
- readonly editing: {
225
- states: {
226
- readonly element: {};
227
- readonly selection: {};
228
- };
229
- };
230
- };
231
- };
232
- };
233
- }>;
234
- export {};
@@ -1,16 +0,0 @@
1
- import { ReviewResult } from './review.type';
2
- /**
3
- * Storage engine for `<llumi-review>` drafts. Injected into the review machine
4
- * via input (mirrors `HighlightCallbacks`). All access is best-effort: it never
5
- * throws into the component.
6
- */
7
- export interface ReviewPersistence {
8
- /** Read + parse + validate. Returns undefined on miss or corruption. */
9
- load(): ReviewResult | undefined;
10
- /** Write JSON. An empty/`approved` result removes the key instead. */
11
- save(result: ReviewResult): void;
12
- /** Remove the stored draft. */
13
- clear(): void;
14
- }
15
- export declare const noopPersistence: ReviewPersistence;
16
- export declare function createReviewPersistence(key: string): ReviewPersistence;
@@ -1,37 +0,0 @@
1
- export interface SelectionRange {
2
- startOffset: number;
3
- endOffset: number;
4
- selectedText: string;
5
- matchIndex: number;
6
- }
7
- export interface ReviewComment {
8
- commentId: string;
9
- targetId: string;
10
- content: string;
11
- createdAt: string;
12
- selection?: SelectionRange;
13
- }
14
- export type ReviewResult = {
15
- status: "approved";
16
- } | {
17
- status: "commented";
18
- comments: ReviewComment[];
19
- overallComment?: string;
20
- };
21
- export interface ReviewSubmitDetail {
22
- result: ReviewResult;
23
- /** Clears the persisted draft for this element. No-op when persistence is off. */
24
- clearPersisted: () => void;
25
- }
26
- export type ReviewBarPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
27
- export type ReviewMode = "idle" | "commenting" | "editing";
28
- /**
29
- * Contract a slotted custom editor must honor:
30
- * - receives the current `value` as a property
31
- * - emits `change` (detail: string), `cancel`, and `delete` CustomEvents (bubbling, composed)
32
- */
33
- export interface ReviewEditorContract extends HTMLElement {
34
- value: string;
35
- autoFocus?: boolean;
36
- placeholder?: string;
37
- }
@@ -1,17 +0,0 @@
1
- import { TailwindElement } from '../../shared/tailwind-element';
2
- interface IconPosition {
3
- commentId: string;
4
- top: number;
5
- left: number;
6
- }
7
- export declare class LlumiSelectionCommentIcons extends TailwindElement {
8
- positions: IconPosition[];
9
- render(): import('lit').TemplateResult<1>;
10
- private onClick;
11
- }
12
- declare global {
13
- interface HTMLElementTagNameMap {
14
- "llumi-selection-comment-icons": LlumiSelectionCommentIcons;
15
- }
16
- }
17
- export {};
@@ -1,6 +0,0 @@
1
- import { SelectionRange } from './review.type';
2
- export declare function computeSelectionRange(target: HTMLElement): SelectionRange | null;
3
- export declare function restoreRange(target: HTMLElement, selectionRange: SelectionRange): Range | null;
4
- export declare function isSelectionWithinTarget(selection: Selection, target: HTMLElement): boolean;
5
- export declare function findSelectableTarget(node: Node): HTMLElement | null;
6
- export declare function clampSelectionToTarget(selection: Selection, target: HTMLElement): Range | null;
@@ -1,6 +0,0 @@
1
- import { ReviewComment } from './review.type';
2
- /**
3
- * Sort comments by their DOM position within the wrapper.
4
- * Falls back to original order if elements are not found.
5
- */
6
- export declare function sortCommentsByDomPosition(comments: ReviewComment[], wrapper: HTMLElement): ReviewComment[];
@@ -1 +0,0 @@
1
- export * from './components/review/index';
@@ -1,2 +0,0 @@
1
- import { ClassValue } from 'clsx';
2
- export declare function cn(...inputs: ClassValue[]): string;
@@ -1,7 +0,0 @@
1
- import { TemplateResult } from 'lit';
2
- export declare const icons: {
3
- readonly check: TemplateResult;
4
- readonly gripVertical: TemplateResult;
5
- readonly messageSquare: TemplateResult;
6
- readonly trash: TemplateResult;
7
- };
@@ -1,4 +0,0 @@
1
- import { CSSResultGroup, LitElement } from 'lit';
2
- export declare class TailwindElement extends LitElement {
3
- static styles: CSSResultGroup;
4
- }