@llumi/design-system 0.1.0 → 1.0.1

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.
package/README.md CHANGED
@@ -44,7 +44,9 @@ import "@llumi/design-system/review";
44
44
  <script type="module">
45
45
  const review = document.querySelector("llumi-review");
46
46
  review.addEventListener("llumi-review-submit", (e) => {
47
- console.log(e.detail); // ReviewResult
47
+ const { result, clearPersisted } = e.detail;
48
+ // ...send `result` to the server, then on success:
49
+ clearPersisted();
48
50
  });
49
51
  </script>
50
52
  ```
@@ -82,6 +84,7 @@ each comment's `targetId`.
82
84
  | `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). |
83
85
  | `shortcut` | string ([tinykeys](https://github.com/jamiebuilds/tinykeys) syntax) | `$mod+Shift+M` | Keyboard shortcut that toggles annotate mode. |
84
86
  | `default-mode` | `idle` \| `annotating` | `idle` | Whether annotate mode is on at mount. |
87
+ | `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). |
85
88
 
86
89
  ### Properties (set in JS — complex values)
87
90
 
@@ -90,6 +93,12 @@ each comment's `targetId`.
90
93
  | `initialData` | `ReviewResult` | Pre-populate existing comments / overall comment. |
91
94
  | `customTargets` | `CustomTarget[]` | Resolve comment targets from arbitrary selectors (advanced). |
92
95
 
96
+ ### Methods
97
+
98
+ | Method | Description |
99
+ | --- | --- |
100
+ | `clearPersisted()` | Clears the persisted draft for this element's `persist` key. No-op when `persist` is unset. Call after a confirmed server save. |
101
+
93
102
  ```ts
94
103
  const review = document.querySelector("llumi-review");
95
104
  review.initialData = {
@@ -100,12 +109,12 @@ review.initialData = {
100
109
 
101
110
  ### Events
102
111
 
103
- Both are `CustomEvent<ReviewResult>` and bubble (composed):
112
+ Both events bubble and are composed:
104
113
 
105
- | Event | Fires |
106
- | --- | --- |
107
- | `llumi-review-change` | On every edit (comment added/edited/deleted, overall comment changed). |
108
- | `llumi-review-submit` | When the user clicks Submit / Approve. |
114
+ | Event | Detail type | Fires |
115
+ | --- | --- | --- |
116
+ | `llumi-review-change` | `ReviewResult` | On every edit (comment added/edited/deleted, overall comment changed). |
117
+ | `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. |
109
118
 
110
119
  ```ts
111
120
  type ReviewResult =
@@ -19,6 +19,15 @@
19
19
  },
20
20
  "default": "null"
21
21
  },
22
+ {
23
+ "kind": "field",
24
+ "name": "anchor",
25
+ "type": {
26
+ "text": "ReferenceElement | null"
27
+ },
28
+ "default": "null",
29
+ "description": "Optional positioning reference that overrides `targetElement` — used for\ntext-selection comments, where the dialog must anchor to the selected\nrange's rect rather than the whole (potentially tall) selectable element.\nA floating-ui virtual element (`{ getBoundingClientRect() }`) is accepted."
30
+ },
22
31
  {
23
32
  "kind": "field",
24
33
  "name": "value",
@@ -621,7 +630,7 @@
621
630
  "declarations": [
622
631
  {
623
632
  "kind": "class",
624
- "description": "`<llumi-review>` — wraps light-DOM content for element- and text-selection\nreview comments. Both events carry a `ReviewResult` detail and are composed.",
633
+ "description": "`<llumi-review>` — wraps light-DOM content for element- and text-selection\nreview comments. Both events bubble and are composed.",
625
634
  "name": "LlumiReview",
626
635
  "members": [
627
636
  {
@@ -646,6 +655,15 @@
646
655
  },
647
656
  "privacy": "private"
648
657
  },
658
+ {
659
+ "kind": "field",
660
+ "name": "persistence",
661
+ "type": {
662
+ "text": "ReviewPersistence"
663
+ },
664
+ "privacy": "private",
665
+ "default": "noopPersistence"
666
+ },
649
667
  {
650
668
  "kind": "field",
651
669
  "name": "manager",
@@ -705,6 +723,15 @@
705
723
  "privacy": "private",
706
724
  "default": "null"
707
725
  },
726
+ {
727
+ "kind": "field",
728
+ "name": "commentDialogAnchorId",
729
+ "type": {
730
+ "text": "string | null"
731
+ },
732
+ "privacy": "private",
733
+ "default": "null"
734
+ },
708
735
  {
709
736
  "kind": "field",
710
737
  "name": "overallDialog",
@@ -746,17 +773,51 @@
746
773
  "privacy": "private",
747
774
  "readonly": true
748
775
  },
776
+ {
777
+ "kind": "field",
778
+ "name": "persistKey",
779
+ "type": {
780
+ "text": "string | null"
781
+ },
782
+ "privacy": "private",
783
+ "readonly": true
784
+ },
749
785
  {
750
786
  "kind": "method",
751
- "name": "emitResult",
787
+ "name": "buildDetailResult",
752
788
  "privacy": "private",
789
+ "return": {
790
+ "type": {
791
+ "text": "ReviewResult"
792
+ }
793
+ },
753
794
  "parameters": [
754
795
  {
755
- "name": "type",
796
+ "name": "result",
756
797
  "type": {
757
- "text": "string"
798
+ "text": "ReviewResult"
758
799
  }
759
- },
800
+ }
801
+ ]
802
+ },
803
+ {
804
+ "kind": "method",
805
+ "name": "emitChange",
806
+ "privacy": "private",
807
+ "parameters": [
808
+ {
809
+ "name": "result",
810
+ "type": {
811
+ "text": "ReviewResult"
812
+ }
813
+ }
814
+ ]
815
+ },
816
+ {
817
+ "kind": "method",
818
+ "name": "emitSubmit",
819
+ "privacy": "private",
820
+ "parameters": [
760
821
  {
761
822
  "name": "result",
762
823
  "type": {
@@ -765,6 +826,40 @@
765
826
  }
766
827
  ]
767
828
  },
829
+ {
830
+ "kind": "method",
831
+ "name": "clearPersisted",
832
+ "return": {
833
+ "type": {
834
+ "text": "void"
835
+ }
836
+ },
837
+ "description": "Clears the persisted draft for this element. No-op when persistence is off."
838
+ },
839
+ {
840
+ "kind": "method",
841
+ "name": "selectionAnchor",
842
+ "privacy": "private",
843
+ "return": {
844
+ "type": {
845
+ "text": "ReferenceElement | null"
846
+ }
847
+ },
848
+ "parameters": [
849
+ {
850
+ "name": "target",
851
+ "type": {
852
+ "text": "HTMLElement"
853
+ }
854
+ },
855
+ {
856
+ "name": "selection",
857
+ "type": {
858
+ "text": "SelectionRange"
859
+ }
860
+ }
861
+ ]
862
+ },
768
863
  {
769
864
  "kind": "method",
770
865
  "name": "mountChrome",
@@ -875,12 +970,18 @@
875
970
  ],
876
971
  "events": [
877
972
  {
878
- "description": "On every edit (comment added/edited/deleted, or overall comment changed).",
879
- "name": "llumi-review-change"
973
+ "name": "llumi-review-change",
974
+ "type": {
975
+ "text": "CustomEvent"
976
+ },
977
+ "description": "On every edit (comment added/edited/deleted, or overall comment changed). `detail` is a `ReviewResult`."
880
978
  },
881
979
  {
882
- "description": "When the user clicks Submit / Approve.",
883
- "name": "llumi-review-submit"
980
+ "name": "llumi-review-submit",
981
+ "type": {
982
+ "text": "CustomEvent"
983
+ },
984
+ "description": "When the user clicks Submit / Approve. `detail` is `{ result: ReviewResult, clearPersisted: () => void }`; call `clearPersisted()` after a confirmed server save to discard the persisted draft."
884
985
  }
885
986
  ],
886
987
  "attributes": [
@@ -892,6 +993,13 @@
892
993
  },
893
994
  {
894
995
  "name": "default-mode"
996
+ },
997
+ {
998
+ "type": {
999
+ "text": "string"
1000
+ },
1001
+ "description": "When set to a non-empty value, persists the review draft to localStorage under that key and restores it on load. Read once on connect.",
1002
+ "name": "persist"
895
1003
  }
896
1004
  ],
897
1005
  "superclass": {