@syntrologie/adapt-overlays 2.16.0 → 2.17.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 (226) hide show
  1. package/dist/chunk-VHAA22YE.js +14 -0
  2. package/dist/chunk-VHAA22YE.js.map +7 -0
  3. package/dist/runtime.d.ts +2 -1
  4. package/dist/runtime.d.ts.map +1 -1
  5. package/dist/runtime.js +2596 -354
  6. package/dist/runtime.js.map +7 -0
  7. package/dist/schema.d.ts +90 -21
  8. package/dist/schema.d.ts.map +1 -1
  9. package/dist/schema.js +440 -151
  10. package/dist/schema.js.map +7 -0
  11. package/dist/types.d.ts +1 -1
  12. package/dist/types.d.ts.map +1 -1
  13. package/package.json +5 -22
  14. package/dist/WorkflowTracker.d.ts +0 -10
  15. package/dist/WorkflowTracker.d.ts.map +0 -1
  16. package/dist/WorkflowTracker.js +0 -19
  17. package/dist/WorkflowWidget.d.ts +0 -70
  18. package/dist/WorkflowWidget.d.ts.map +0 -1
  19. package/dist/WorkflowWidget.js +0 -330
  20. package/dist/WorkflowWidgetLit.js +0 -617
  21. package/dist/cdn.d.ts +0 -35
  22. package/dist/cdn.d.ts.map +0 -1
  23. package/dist/cdn.js +0 -39
  24. package/dist/celebrations/__tests__/engine.test.js +0 -130
  25. package/dist/celebrations/__tests__/executor.test.js +0 -102
  26. package/dist/celebrations/__tests__/reduced-motion.test.js +0 -97
  27. package/dist/celebrations/effects/__tests__/confetti.test.js +0 -89
  28. package/dist/celebrations/effects/__tests__/emoji-rain.test.js +0 -88
  29. package/dist/celebrations/effects/__tests__/fireworks.test.js +0 -87
  30. package/dist/celebrations/effects/__tests__/sparkles.test.js +0 -79
  31. package/dist/celebrations/effects/confetti.js +0 -80
  32. package/dist/celebrations/effects/emoji-rain.js +0 -73
  33. package/dist/celebrations/effects/fireworks.js +0 -69
  34. package/dist/celebrations/effects/sparkles.js +0 -83
  35. package/dist/celebrations/engine.js +0 -93
  36. package/dist/celebrations/index.js +0 -73
  37. package/dist/celebrations/types.js +0 -1
  38. package/dist/editor.d.ts +0 -27
  39. package/dist/editor.d.ts.map +0 -1
  40. package/dist/editor.js +0 -22
  41. package/dist/executors/tour.js +0 -335
  42. package/dist/highlight.js +0 -180
  43. package/dist/modal.js +0 -218
  44. package/dist/overlay-editor-state.d.ts +0 -41
  45. package/dist/overlay-editor-state.d.ts.map +0 -1
  46. package/dist/overlay-editor-state.js +0 -131
  47. package/dist/overlay-editor-ui.d.ts +0 -9
  48. package/dist/overlay-editor-ui.d.ts.map +0 -1
  49. package/dist/overlay-editor-ui.js +0 -306
  50. package/dist/runtime-lit.d.ts +0 -94
  51. package/dist/runtime-lit.d.ts.map +0 -1
  52. package/dist/runtime-lit.js +0 -402
  53. package/dist/sanitizer.js +0 -84
  54. package/dist/summarize.js +0 -86
  55. package/dist/tooltip.js +0 -279
  56. package/dist/tour-types.js +0 -7
  57. package/dist/types.js +0 -7
  58. package/dist/workflow-types.js +0 -1
  59. package/node_modules/@syntro/design-system/README.md +0 -335
  60. package/node_modules/@syntro/design-system/dist/assets/syntrologie-logo.svg +0 -21
  61. package/node_modules/@syntro/design-system/dist/assets/syntrologie-logomark.svg +0 -10
  62. package/node_modules/@syntro/design-system/dist/index.d.ts +0 -8
  63. package/node_modules/@syntro/design-system/dist/index.d.ts.map +0 -1
  64. package/node_modules/@syntro/design-system/dist/index.js +0 -7
  65. package/node_modules/@syntro/design-system/dist/tailwind-preset.d.ts +0 -19
  66. package/node_modules/@syntro/design-system/dist/tailwind-preset.d.ts.map +0 -1
  67. package/node_modules/@syntro/design-system/dist/tailwind-preset.js +0 -455
  68. package/node_modules/@syntro/design-system/dist/tokens/colors.css +0 -464
  69. package/node_modules/@syntro/design-system/dist/tokens/colors.d.ts +0 -874
  70. package/node_modules/@syntro/design-system/dist/tokens/colors.d.ts.map +0 -1
  71. package/node_modules/@syntro/design-system/dist/tokens/colors.js +0 -564
  72. package/node_modules/@syntro/design-system/dist/tokens/effects.css +0 -43
  73. package/node_modules/@syntro/design-system/dist/tokens/effects.d.ts +0 -139
  74. package/node_modules/@syntro/design-system/dist/tokens/effects.d.ts.map +0 -1
  75. package/node_modules/@syntro/design-system/dist/tokens/effects.js +0 -121
  76. package/node_modules/@syntro/design-system/dist/tokens/index.d.ts +0 -12
  77. package/node_modules/@syntro/design-system/dist/tokens/index.d.ts.map +0 -1
  78. package/node_modules/@syntro/design-system/dist/tokens/index.js +0 -11
  79. package/node_modules/@syntro/design-system/dist/tokens/panel-shell.d.ts +0 -93
  80. package/node_modules/@syntro/design-system/dist/tokens/panel-shell.d.ts.map +0 -1
  81. package/node_modules/@syntro/design-system/dist/tokens/panel-shell.js +0 -72
  82. package/node_modules/@syntro/design-system/package.json +0 -55
  83. package/node_modules/@syntro/design-system/src/assets/syntrologie-logo.svg +0 -21
  84. package/node_modules/@syntro/design-system/src/assets/syntrologie-logomark.svg +0 -10
  85. package/node_modules/@syntrologie/shared-editor-ui/dist/cn.d.ts +0 -2
  86. package/node_modules/@syntrologie/shared-editor-ui/dist/cn.d.ts.map +0 -1
  87. package/node_modules/@syntrologie/shared-editor-ui/dist/cn.js +0 -3
  88. package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts +0 -34
  89. package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts.map +0 -1
  90. package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.js +0 -161
  91. package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.d.ts +0 -84
  92. package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.d.ts.map +0 -1
  93. package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.js +0 -323
  94. package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.d.ts +0 -7
  95. package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.d.ts.map +0 -1
  96. package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.js +0 -9
  97. package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.d.ts +0 -25
  98. package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.d.ts.map +0 -1
  99. package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.js +0 -55
  100. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.d.ts +0 -23
  101. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.d.ts.map +0 -1
  102. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.js +0 -40
  103. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.d.ts +0 -33
  104. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.d.ts.map +0 -1
  105. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.js +0 -118
  106. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadge.d.ts +0 -7
  107. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadge.d.ts.map +0 -1
  108. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadge.js +0 -22
  109. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.d.ts +0 -32
  110. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.d.ts.map +0 -1
  111. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.js +0 -68
  112. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.d.ts +0 -8
  113. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.d.ts.map +0 -1
  114. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.js +0 -9
  115. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSectionLit.d.ts +0 -34
  116. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSectionLit.d.ts.map +0 -1
  117. package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSectionLit.js +0 -57
  118. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.d.ts +0 -7
  119. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.d.ts.map +0 -1
  120. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.js +0 -4
  121. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButtonLit.d.ts +0 -13
  122. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButtonLit.d.ts.map +0 -1
  123. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButtonLit.js +0 -31
  124. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBody.d.ts +0 -7
  125. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBody.d.ts.map +0 -1
  126. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBody.js +0 -4
  127. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBodyLit.d.ts +0 -7
  128. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBodyLit.d.ts.map +0 -1
  129. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBodyLit.js +0 -15
  130. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.d.ts +0 -13
  131. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.d.ts.map +0 -1
  132. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.js +0 -15
  133. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCardLit.d.ts +0 -36
  134. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCardLit.d.ts.map +0 -1
  135. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCardLit.js +0 -102
  136. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.d.ts +0 -7
  137. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.d.ts.map +0 -1
  138. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.js +0 -4
  139. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooterLit.d.ts +0 -20
  140. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooterLit.d.ts.map +0 -1
  141. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooterLit.js +0 -48
  142. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeader.d.ts +0 -9
  143. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeader.d.ts.map +0 -1
  144. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeader.js +0 -4
  145. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeaderLit.d.ts +0 -16
  146. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeaderLit.d.ts.map +0 -1
  147. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeaderLit.js +0 -25
  148. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.d.ts +0 -8
  149. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.d.ts.map +0 -1
  150. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.js +0 -8
  151. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInputLit.d.ts +0 -66
  152. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInputLit.d.ts.map +0 -1
  153. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInputLit.js +0 -87
  154. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayout.d.ts +0 -7
  155. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayout.d.ts.map +0 -1
  156. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayout.js +0 -4
  157. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayoutLit.d.ts +0 -7
  158. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayoutLit.d.ts.map +0 -1
  159. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayoutLit.js +0 -15
  160. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.d.ts +0 -25
  161. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.d.ts.map +0 -1
  162. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.js +0 -390
  163. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShellLit.d.ts +0 -66
  164. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShellLit.d.ts.map +0 -1
  165. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShellLit.js +0 -528
  166. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.d.ts +0 -8
  167. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.d.ts.map +0 -1
  168. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.js +0 -8
  169. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelectLit.d.ts +0 -41
  170. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelectLit.d.ts.map +0 -1
  171. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelectLit.js +0 -63
  172. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.d.ts +0 -8
  173. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.d.ts.map +0 -1
  174. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.js +0 -17
  175. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.d.ts +0 -55
  176. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.d.ts.map +0 -1
  177. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.js +0 -92
  178. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.d.ts +0 -32
  179. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.d.ts.map +0 -1
  180. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.js +0 -85
  181. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.d.ts +0 -90
  182. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.d.ts.map +0 -1
  183. package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.js +0 -242
  184. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyState.d.ts +0 -6
  185. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyState.d.ts.map +0 -1
  186. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyState.js +0 -4
  187. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyStateLit.d.ts +0 -12
  188. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyStateLit.d.ts.map +0 -1
  189. package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyStateLit.js +0 -21
  190. package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeader.d.ts +0 -8
  191. package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeader.d.ts.map +0 -1
  192. package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeader.js +0 -5
  193. package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeaderLit.d.ts +0 -21
  194. package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeaderLit.d.ts.map +0 -1
  195. package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeaderLit.js +0 -33
  196. package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.d.ts +0 -12
  197. package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.d.ts.map +0 -1
  198. package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.js +0 -40
  199. package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourneyLit.d.ts +0 -28
  200. package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourneyLit.d.ts.map +0 -1
  201. package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourneyLit.js +0 -121
  202. package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.d.ts +0 -110
  203. package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.d.ts.map +0 -1
  204. package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.js +0 -481
  205. package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.d.ts +0 -26
  206. package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.d.ts.map +0 -1
  207. package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.js +0 -202
  208. package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useElementRect.d.ts +0 -8
  209. package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useElementRect.d.ts.map +0 -1
  210. package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useElementRect.js +0 -46
  211. package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useTriggerWhenStatus.d.ts +0 -24
  212. package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useTriggerWhenStatus.d.ts.map +0 -1
  213. package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useTriggerWhenStatus.js +0 -86
  214. package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts +0 -36
  215. package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts.map +0 -1
  216. package/node_modules/@syntrologie/shared-editor-ui/dist/index.js +0 -26
  217. package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.d.ts +0 -15
  218. package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.d.ts.map +0 -1
  219. package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.js +0 -14
  220. package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts +0 -33
  221. package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts.map +0 -1
  222. package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.js +0 -68
  223. package/node_modules/@syntrologie/shared-editor-ui/dist/utils/selectorGenerator.d.ts +0 -22
  224. package/node_modules/@syntrologie/shared-editor-ui/dist/utils/selectorGenerator.d.ts.map +0 -1
  225. package/node_modules/@syntrologie/shared-editor-ui/dist/utils/selectorGenerator.js +0 -143
  226. package/node_modules/@syntrologie/shared-editor-ui/package.json +0 -55
@@ -1,161 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- /**
3
- * AnchorPicker — Shared Element Picker Overlay
4
- *
5
- * Full-page overlay that lets the user hover and click to select a DOM element.
6
- * Returns the element, its CSS selector, and a human-readable description.
7
- *
8
- * Renders via createPortal to document.body. Uses inline styles (not Tailwind)
9
- * because it lives outside the editor's style scope.
10
- *
11
- * EXCEPTION: This component MUST stay on document.body (not in shadow root).
12
- * It uses document.elementFromPoint() to detect host page elements under the
13
- * cursor. If placed inside a shadow root, the overlay would block detection
14
- * of underlying host elements.
15
- *
16
- * Instructions / cancel UI should be rendered by the consumer in their own
17
- * panel — this component only provides the page overlay.
18
- */
19
- import { useCallback, useEffect, useRef, useState } from 'react';
20
- import { createPortal } from 'react-dom';
21
- import { generateSelector, getElementDescription, validateSelector, } from '../utils/selectorGenerator';
22
- const HIGHLIGHT_COLOR = '#3b82f6';
23
- const HIGHLIGHT_BG = 'rgba(59, 130, 246, 0.1)';
24
- export function AnchorPicker({ isActive, onPick, onCancel, passthroughClicks = false, excludeSelector = '[data-syntro-editor-panel], [data-shadow-canvas-id], .syntro-tooltip, .syntro-modal, .syntro-highlight, [data-syntro-anchor-picker]', }) {
25
- const [hoveredElement, setHoveredElement] = useState(null);
26
- const [hoveredSelector, setHoveredSelector] = useState('');
27
- const overlayRef = useRef(null);
28
- const handleMouseMove = useCallback((e) => {
29
- const overlay = overlayRef.current;
30
- // In passthrough mode the overlay is already pointerEvents:'none',
31
- // so elementFromPoint can see through it — no toggle needed.
32
- // In non-passthrough mode, temporarily disable to detect elements underneath.
33
- if (overlay && !passthroughClicks) {
34
- overlay.style.pointerEvents = 'none';
35
- }
36
- const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY);
37
- if (overlay && !passthroughClicks) {
38
- overlay.style.pointerEvents = 'auto';
39
- }
40
- if (!elementAtPoint) {
41
- setHoveredElement(null);
42
- setHoveredSelector('');
43
- return;
44
- }
45
- if (excludeSelector && elementAtPoint.closest(excludeSelector)) {
46
- setHoveredElement(null);
47
- setHoveredSelector('');
48
- return;
49
- }
50
- if (['HTML', 'BODY', 'HEAD'].includes(elementAtPoint.tagName)) {
51
- setHoveredElement(null);
52
- setHoveredSelector('');
53
- return;
54
- }
55
- setHoveredElement(elementAtPoint);
56
- const selector = generateSelector(elementAtPoint);
57
- setHoveredSelector(selector);
58
- }, [excludeSelector, passthroughClicks]);
59
- const handleClick = useCallback((e) => {
60
- if (passthroughClicks)
61
- return; // Let click propagate to PostHog
62
- e.preventDefault();
63
- e.stopPropagation();
64
- if (hoveredElement && hoveredSelector) {
65
- if (validateSelector(hoveredSelector, hoveredElement)) {
66
- onPick({
67
- element: hoveredElement,
68
- selector: hoveredSelector,
69
- description: getElementDescription(hoveredElement),
70
- });
71
- }
72
- else {
73
- const newSelector = generateSelector(hoveredElement);
74
- onPick({
75
- element: hoveredElement,
76
- selector: newSelector,
77
- description: getElementDescription(hoveredElement),
78
- });
79
- }
80
- }
81
- }, [passthroughClicks, hoveredElement, hoveredSelector, onPick]);
82
- const handleKeyDown = useCallback((e) => {
83
- if (e.key === 'Escape') {
84
- e.preventDefault();
85
- onCancel();
86
- }
87
- }, [onCancel]);
88
- useEffect(() => {
89
- if (!isActive)
90
- return;
91
- document.addEventListener('mousemove', handleMouseMove, true);
92
- // In passthrough mode, don't register click handler — let clicks reach PostHog
93
- if (!passthroughClicks) {
94
- document.addEventListener('click', handleClick, true);
95
- }
96
- document.addEventListener('keydown', handleKeyDown, true);
97
- return () => {
98
- document.removeEventListener('mousemove', handleMouseMove, true);
99
- if (!passthroughClicks) {
100
- document.removeEventListener('click', handleClick, true);
101
- }
102
- document.removeEventListener('keydown', handleKeyDown, true);
103
- };
104
- }, [isActive, passthroughClicks, handleMouseMove, handleClick, handleKeyDown]);
105
- if (!isActive)
106
- return null;
107
- const rect = hoveredElement?.getBoundingClientRect();
108
- return createPortal(_jsxs("div", { ref: overlayRef, "data-syntro-anchor-picker": true, style: {
109
- position: 'fixed',
110
- inset: 0,
111
- cursor: 'crosshair',
112
- zIndex: 2147483644,
113
- pointerEvents: passthroughClicks ? 'none' : undefined,
114
- }, children: [_jsx("div", { style: {
115
- position: 'absolute',
116
- inset: 0,
117
- background: 'rgba(0, 0, 0, 0.08)',
118
- pointerEvents: 'none',
119
- } }), hoveredElement && rect && (_jsx("div", { style: {
120
- position: 'fixed',
121
- left: rect.left - 2,
122
- top: rect.top - 2,
123
- width: rect.width + 4,
124
- height: rect.height + 4,
125
- border: `2px solid ${HIGHLIGHT_COLOR}`,
126
- backgroundColor: HIGHLIGHT_BG,
127
- borderRadius: '4px',
128
- boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.2)',
129
- pointerEvents: 'none',
130
- transition: 'all 0.1s ease-out',
131
- } })), hoveredElement && rect && (_jsxs("div", { className: "se-text-xs", style: {
132
- position: 'fixed',
133
- left: Math.max(8, Math.min(rect.left, window.innerWidth - 320)),
134
- top: Math.max(8, rect.top - 68),
135
- backgroundColor: '#1e293b',
136
- color: '#e2e8f0',
137
- padding: '8px 12px',
138
- borderRadius: '6px',
139
- boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
140
- zIndex: 1,
141
- fontFamily: 'monospace',
142
- maxWidth: '300px',
143
- pointerEvents: 'none',
144
- }, children: [_jsx("div", { className: "se-text-xs", style: {
145
- textTransform: 'uppercase',
146
- letterSpacing: '0.05em',
147
- marginBottom: '4px',
148
- color: '#94a3b8',
149
- }, children: "Click to select" }), _jsx("div", { style: {
150
- color: '#38bdf8',
151
- overflow: 'hidden',
152
- textOverflow: 'ellipsis',
153
- whiteSpace: 'nowrap',
154
- }, children: hoveredSelector }), _jsx("div", { style: {
155
- marginTop: '4px',
156
- color: '#cbd5e1',
157
- overflow: 'hidden',
158
- textOverflow: 'ellipsis',
159
- whiteSpace: 'nowrap',
160
- }, children: getElementDescription(hoveredElement) })] }))] }), document.body);
161
- }
@@ -1,84 +0,0 @@
1
- /**
2
- * AnchorPickerLit — Shared Element Picker Overlay (Lit web component).
3
- *
4
- * Full-page overlay that lets the user hover and click to select a DOM element.
5
- * Returns the element, its CSS selector, and a human-readable description
6
- * via custom events.
7
- *
8
- * The overlay is rendered into a portal div appended to document.body, NOT
9
- * into the component's own render root. This is necessary because the editor
10
- * panel applies `backdrop-filter: blur(...)` which, in Chrome, creates a new
11
- * containing block for `position: fixed` descendants. Without the portal, the
12
- * highlight box coordinates (from getBoundingClientRect, which are viewport-
13
- * relative) would be interpreted relative to the panel, causing the highlight
14
- * to appear far off from the actual hovered element.
15
- *
16
- * Lit port of AnchorPicker.tsx — preserves all behavior including:
17
- * - Mouse tracking with elementFromPoint detection
18
- * - Passthrough click mode for PostHog integration
19
- * - Element highlight with info tooltip
20
- * - Escape key cancellation
21
- * - Exclude selector filtering
22
- */
23
- import { LitElement } from 'lit';
24
- export interface PickedElement {
25
- element: Element;
26
- selector: string;
27
- description: string;
28
- }
29
- export declare class AnchorPickerLit extends LitElement {
30
- static properties: {
31
- isActive: {
32
- type: BooleanConstructor;
33
- attribute: string;
34
- };
35
- passthroughClicks: {
36
- type: BooleanConstructor;
37
- attribute: string;
38
- };
39
- excludeSelector: {
40
- type: StringConstructor;
41
- attribute: string;
42
- };
43
- _hoveredElement: {
44
- state: boolean;
45
- };
46
- _hoveredSelector: {
47
- state: boolean;
48
- };
49
- };
50
- isActive: boolean;
51
- passthroughClicks: boolean;
52
- excludeSelector: string;
53
- private _hoveredElement;
54
- private _hoveredSelector;
55
- private _overlayEl;
56
- private _portalDiv;
57
- createRenderRoot(): this;
58
- connectedCallback(): void;
59
- disconnectedCallback(): void;
60
- updated(changed: Map<string, unknown>): void;
61
- /**
62
- * Create or update the body-level portal div.
63
- * Rendering into document.body ensures position:fixed coordinates are
64
- * relative to the viewport, not an ancestor with backdrop-filter.
65
- */
66
- private _syncPortal;
67
- private _destroyPortal;
68
- private _attachDocumentListeners;
69
- private _detachDocumentListeners;
70
- /**
71
- * Resolve the shadow host this picker lives inside, if any. When the picker
72
- * is mounted inside a shadow root (e.g. the editor SDK mounts inside
73
- * `<smart-canvas>`'s shadow), `document.elementFromPoint` returns the shadow
74
- * *host*, not the host page element beneath. Temporarily disabling pointer
75
- * events on the host lets hit-testing fall through to the host page.
76
- */
77
- private _getShadowHost;
78
- private _handleMouseMove;
79
- private _handleClick;
80
- private _handleKeyDown;
81
- render(): symbol;
82
- private _overlayTemplate;
83
- }
84
- //# sourceMappingURL=AnchorPickerLit.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AnchorPickerLit.d.ts","sourceRoot":"","sources":["../../src/components/AnchorPickerLit.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,OAAO,EAAQ,UAAU,EAAgC,MAAM,KAAK,CAAC;AAarE,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAiBD,qBAAa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,UAAU;;;;;;;;;;;;;;;;;;;MAOxB;IAEF,QAAQ,UAAS;IACjB,iBAAiB,UAAS;IAC1B,eAAe,EAAE,MAAM,CAA4B;IAGnD,OAAO,CAAC,eAAe,CAAwB;IAC/C,OAAO,CAAC,gBAAgB,CAAM;IAG9B,OAAO,CAAC,UAAU,CAA+B;IAGjD,OAAO,CAAC,UAAU,CAA+B;IAIxC,gBAAgB;IAIhB,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAM5B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAiBrD;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAgBnB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,wBAAwB;IAQhC,OAAO,CAAC,wBAAwB;IAQhC;;;;;;OAMG;IACH,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,gBAAgB,CA+CtB;IAEF,OAAO,CAAC,YAAY,CAwBlB;IAEF,OAAO,CAAC,cAAc,CAUpB;IAMO,MAAM;IAIf,OAAO,CAAC,gBAAgB;CA0GzB"}
@@ -1,323 +0,0 @@
1
- /**
2
- * AnchorPickerLit — Shared Element Picker Overlay (Lit web component).
3
- *
4
- * Full-page overlay that lets the user hover and click to select a DOM element.
5
- * Returns the element, its CSS selector, and a human-readable description
6
- * via custom events.
7
- *
8
- * The overlay is rendered into a portal div appended to document.body, NOT
9
- * into the component's own render root. This is necessary because the editor
10
- * panel applies `backdrop-filter: blur(...)` which, in Chrome, creates a new
11
- * containing block for `position: fixed` descendants. Without the portal, the
12
- * highlight box coordinates (from getBoundingClientRect, which are viewport-
13
- * relative) would be interpreted relative to the panel, causing the highlight
14
- * to appear far off from the actual hovered element.
15
- *
16
- * Lit port of AnchorPicker.tsx — preserves all behavior including:
17
- * - Mouse tracking with elementFromPoint detection
18
- * - Passthrough click mode for PostHog integration
19
- * - Element highlight with info tooltip
20
- * - Escape key cancellation
21
- * - Exclude selector filtering
22
- */
23
- import { colors } from '@syntro/design-system';
24
- import { html, LitElement, render as litRender, nothing } from 'lit';
25
- import { styleMap } from 'lit/directives/style-map.js';
26
- import { generateSelector, getElementDescription, validateSelector, } from '../utils/selectorGenerator';
27
- // =============================================================================
28
- // Constants
29
- // =============================================================================
30
- const HIGHLIGHT_COLOR = colors.blue[4];
31
- // rgba triple matches colors.blue[4] (#1969fe → 25, 105, 254) at 10% alpha.
32
- const HIGHLIGHT_BG = 'rgba(25, 105, 254, 0.1)';
33
- const DEFAULT_EXCLUDE_SELECTOR = '[data-syntro-editor-panel], [data-shadow-canvas-id], .syntro-tooltip, .syntro-modal, .syntro-highlight, [data-syntro-anchor-picker]';
34
- // =============================================================================
35
- // Component
36
- // =============================================================================
37
- export class AnchorPickerLit extends LitElement {
38
- constructor() {
39
- super(...arguments);
40
- this.isActive = false;
41
- this.passthroughClicks = false;
42
- this.excludeSelector = DEFAULT_EXCLUDE_SELECTOR;
43
- // Internal state
44
- this._hoveredElement = null;
45
- this._hoveredSelector = '';
46
- // DOM ref for the overlay (lives in _portalDiv, not in this element)
47
- this._overlayEl = null;
48
- // Portal div appended to document.body to escape backdrop-filter containing block
49
- this._portalDiv = null;
50
- this._handleMouseMove = (e) => {
51
- const overlay = this._overlayEl;
52
- const shadowHost = this._getShadowHost();
53
- // In passthrough mode the overlay is already pointerEvents:'none',
54
- // so elementFromPoint can see through it -- no toggle needed.
55
- // In non-passthrough mode, temporarily disable to detect elements underneath.
56
- if (overlay && !this.passthroughClicks) {
57
- overlay.style.pointerEvents = 'none';
58
- }
59
- // If we're inside a shadow root, temporarily hide the host so
60
- // elementFromPoint can reach the host page underneath. `pointer-events`
61
- // doesn't work here because any fixed-position descendant inside the
62
- // shadow tree with pointer-events:auto (e.g. a canvas overlay) causes
63
- // elementFromPoint to return the shadow host regardless of what the
64
- // host's own pointer-events is. `visibility:hidden` removes the entire
65
- // subtree from hit-testing without triggering layout reflow.
66
- const prevHostVis = shadowHost?.style.visibility;
67
- if (shadowHost)
68
- shadowHost.style.visibility = 'hidden';
69
- const elementAtPoint = document.elementFromPoint(e.clientX, e.clientY);
70
- if (shadowHost)
71
- shadowHost.style.visibility = prevHostVis ?? '';
72
- if (overlay && !this.passthroughClicks) {
73
- overlay.style.pointerEvents = 'auto';
74
- }
75
- if (!elementAtPoint) {
76
- this._hoveredElement = null;
77
- this._hoveredSelector = '';
78
- return;
79
- }
80
- if (this.excludeSelector && elementAtPoint.closest(this.excludeSelector)) {
81
- this._hoveredElement = null;
82
- this._hoveredSelector = '';
83
- return;
84
- }
85
- if (['HTML', 'BODY', 'HEAD'].includes(elementAtPoint.tagName)) {
86
- this._hoveredElement = null;
87
- this._hoveredSelector = '';
88
- return;
89
- }
90
- this._hoveredElement = elementAtPoint;
91
- this._hoveredSelector = generateSelector(elementAtPoint);
92
- };
93
- this._handleClick = (e) => {
94
- if (this.passthroughClicks)
95
- return; // Let click propagate to PostHog
96
- e.preventDefault();
97
- e.stopPropagation();
98
- if (this._hoveredElement && this._hoveredSelector) {
99
- let selector = this._hoveredSelector;
100
- if (!validateSelector(selector, this._hoveredElement)) {
101
- selector = generateSelector(this._hoveredElement);
102
- }
103
- this.dispatchEvent(new CustomEvent('pick', {
104
- detail: {
105
- element: this._hoveredElement,
106
- selector,
107
- description: getElementDescription(this._hoveredElement),
108
- },
109
- bubbles: true,
110
- composed: true,
111
- }));
112
- }
113
- };
114
- this._handleKeyDown = (e) => {
115
- if (e.key === 'Escape') {
116
- e.preventDefault();
117
- this.dispatchEvent(new CustomEvent('cancel', {
118
- bubbles: true,
119
- composed: true,
120
- }));
121
- }
122
- };
123
- }
124
- // No _bound* wrappers needed — methods are arrow class fields
125
- createRenderRoot() {
126
- return this;
127
- }
128
- connectedCallback() {
129
- super.connectedCallback();
130
- if (this.isActive) {
131
- this._attachDocumentListeners();
132
- }
133
- }
134
- disconnectedCallback() {
135
- super.disconnectedCallback();
136
- this._detachDocumentListeners();
137
- this._destroyPortal();
138
- }
139
- updated(changed) {
140
- if (changed.has('isActive')) {
141
- if (this.isActive) {
142
- this._attachDocumentListeners();
143
- }
144
- else {
145
- this._detachDocumentListeners();
146
- this._hoveredElement = null;
147
- this._hoveredSelector = '';
148
- }
149
- }
150
- // Sync portal on every state change (active/hover/selector all affect portal content)
151
- this._syncPortal();
152
- }
153
- // ---- PORTAL MANAGEMENT ----
154
- /**
155
- * Create or update the body-level portal div.
156
- * Rendering into document.body ensures position:fixed coordinates are
157
- * relative to the viewport, not an ancestor with backdrop-filter.
158
- */
159
- _syncPortal() {
160
- if (!this.isActive) {
161
- this._destroyPortal();
162
- return;
163
- }
164
- if (!this._portalDiv) {
165
- this._portalDiv = document.createElement('div');
166
- this._portalDiv.setAttribute('data-syntro-anchor-picker-container', '');
167
- document.body.appendChild(this._portalDiv);
168
- }
169
- litRender(this._overlayTemplate(), this._portalDiv);
170
- this._overlayEl = this._portalDiv.querySelector('[data-syntro-anchor-picker]');
171
- }
172
- _destroyPortal() {
173
- if (this._portalDiv) {
174
- litRender(nothing, this._portalDiv);
175
- this._portalDiv.remove();
176
- this._portalDiv = null;
177
- this._overlayEl = null;
178
- }
179
- }
180
- // ---- DOCUMENT LISTENERS ----
181
- _attachDocumentListeners() {
182
- document.addEventListener('mousemove', this._handleMouseMove, true);
183
- if (!this.passthroughClicks) {
184
- document.addEventListener('click', this._handleClick, true);
185
- }
186
- document.addEventListener('keydown', this._handleKeyDown, true);
187
- }
188
- _detachDocumentListeners() {
189
- document.removeEventListener('mousemove', this._handleMouseMove, true);
190
- document.removeEventListener('click', this._handleClick, true);
191
- document.removeEventListener('keydown', this._handleKeyDown, true);
192
- }
193
- // ---- EVENT HANDLERS ----
194
- /**
195
- * Resolve the shadow host this picker lives inside, if any. When the picker
196
- * is mounted inside a shadow root (e.g. the editor SDK mounts inside
197
- * `<smart-canvas>`'s shadow), `document.elementFromPoint` returns the shadow
198
- * *host*, not the host page element beneath. Temporarily disabling pointer
199
- * events on the host lets hit-testing fall through to the host page.
200
- */
201
- _getShadowHost() {
202
- const root = this.getRootNode();
203
- if (root instanceof ShadowRoot)
204
- return root.host;
205
- return null;
206
- }
207
- // ---- RENDER ----
208
- // The component itself renders nothing — all overlay HTML lives in _portalDiv
209
- // (a div appended to document.body), managed by _syncPortal().
210
- render() {
211
- return nothing;
212
- }
213
- _overlayTemplate() {
214
- if (!this.isActive)
215
- return nothing;
216
- const hovered = this._hoveredElement;
217
- const rect = hovered?.getBoundingClientRect() ?? null;
218
- return html `
219
- <div
220
- data-syntro-anchor-picker
221
- style=${styleMap({
222
- position: 'fixed',
223
- inset: '0',
224
- cursor: 'crosshair',
225
- zIndex: '2147483644',
226
- pointerEvents: this.passthroughClicks ? 'none' : 'auto',
227
- })}
228
- >
229
- <!-- Semi-transparent overlay -->
230
- <div
231
- style=${styleMap({
232
- position: 'absolute',
233
- inset: '0',
234
- background: 'rgba(0, 0, 0, 0.08)',
235
- pointerEvents: 'none',
236
- })}
237
- ></div>
238
-
239
- <!-- Element highlight -->
240
- ${hovered && rect
241
- ? html `<div
242
- style=${styleMap({
243
- position: 'fixed',
244
- left: `${rect.left - 2}px`,
245
- top: `${rect.top - 2}px`,
246
- width: `${rect.width + 4}px`,
247
- height: `${rect.height + 4}px`,
248
- border: `2px solid ${HIGHLIGHT_COLOR}`,
249
- backgroundColor: HIGHLIGHT_BG,
250
- borderRadius: '4px',
251
- boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.2)',
252
- pointerEvents: 'none',
253
- transition: 'all 0.1s ease-out',
254
- })}
255
- ></div>`
256
- : nothing}
257
-
258
- <!-- Element info tooltip near hovered element -->
259
- ${hovered && rect
260
- ? html `<div
261
- class="se-text-xs"
262
- style=${styleMap({
263
- position: 'fixed',
264
- left: `${Math.max(8, Math.min(rect.left, window.innerWidth - 320))}px`,
265
- top: `${Math.max(8, rect.top - 68)}px`,
266
- backgroundColor: colors.slateGrey[3],
267
- color: colors.slateGrey[11],
268
- padding: '8px 12px',
269
- borderRadius: '6px',
270
- boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
271
- zIndex: '1',
272
- fontFamily: 'monospace',
273
- maxWidth: '300px',
274
- pointerEvents: 'none',
275
- })}
276
- >
277
- <div
278
- class="se-text-xs"
279
- style=${styleMap({
280
- textTransform: 'uppercase',
281
- letterSpacing: '0.05em',
282
- marginBottom: '4px',
283
- color: colors.slateGrey[9],
284
- })}
285
- >
286
- Click to select
287
- </div>
288
- <div
289
- style=${styleMap({
290
- color: colors.blue[5],
291
- overflow: 'hidden',
292
- textOverflow: 'ellipsis',
293
- whiteSpace: 'nowrap',
294
- })}
295
- >
296
- ${this._hoveredSelector}
297
- </div>
298
- <div
299
- style=${styleMap({
300
- marginTop: '4px',
301
- color: colors.slateGrey[10],
302
- overflow: 'hidden',
303
- textOverflow: 'ellipsis',
304
- whiteSpace: 'nowrap',
305
- })}
306
- >
307
- ${getElementDescription(hovered)}
308
- </div>
309
- </div>`
310
- : nothing}
311
- </div>
312
- `;
313
- }
314
- }
315
- AnchorPickerLit.properties = {
316
- isActive: { type: Boolean, attribute: 'is-active' },
317
- passthroughClicks: { type: Boolean, attribute: 'passthrough-clicks' },
318
- excludeSelector: { type: String, attribute: 'exclude-selector' },
319
- // Internal reactive state (not attributes)
320
- _hoveredElement: { state: true },
321
- _hoveredSelector: { state: true },
322
- };
323
- customElements.define('se-anchor-picker', AnchorPickerLit);
@@ -1,7 +0,0 @@
1
- interface BeforeAfterToggleProps {
2
- mode: 'before' | 'after';
3
- onToggle: (mode: 'before' | 'after') => void;
4
- }
5
- export declare function BeforeAfterToggle({ mode, onToggle }: BeforeAfterToggleProps): import("react/jsx-runtime").JSX.Element;
6
- export {};
7
- //# sourceMappingURL=BeforeAfterToggle.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BeforeAfterToggle.d.ts","sourceRoot":"","sources":["../../src/components/BeforeAfterToggle.tsx"],"names":[],"mappings":"AAEA,UAAU,sBAAsB;IAC9B,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IACzB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;CAC9C;AAED,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CA6B3E"}
@@ -1,9 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { cn } from '../cn';
3
- export function BeforeAfterToggle({ mode, onToggle }) {
4
- return (_jsxs("div", { className: "se-flex se-mb-3 se-rounded-lg se-overflow-hidden se-border se-border-border-primary", children: [_jsx("button", { type: "button", onClick: () => onToggle('before'), className: cn('se-flex-1 se-py-1.5 se-px-3 se-border-none se-text-sm se-font-semibold se-cursor-pointer focus-visible:se-shadow-focus-primary focus-visible:se-outline-none', mode === 'before'
5
- ? 'se-bg-blue-5/30 se-text-blue-5'
6
- : 'se-bg-transparent se-text-text-secondary'), children: "Before" }), _jsx("button", { type: "button", onClick: () => onToggle('after'), className: cn('se-flex-1 se-py-1.5 se-px-3 se-border-none se-border-l se-border-border-primary se-text-sm se-font-semibold se-cursor-pointer focus-visible:se-shadow-focus-primary focus-visible:se-outline-none', mode === 'after'
7
- ? 'se-bg-blue-5/30 se-text-blue-5'
8
- : 'se-bg-transparent se-text-text-secondary'), children: "After" })] }));
9
- }
@@ -1,25 +0,0 @@
1
- import { LitElement } from 'lit';
2
- /**
3
- * BeforeAfterToggleLit — toggle switch between before/after states.
4
- *
5
- * Attributes:
6
- * mode: 'before' | 'after'
7
- *
8
- * Events:
9
- * toggle — CustomEvent<{ mode: 'before' | 'after' }>, bubbles, composed
10
- *
11
- * Usage:
12
- * <se-before-after-toggle mode="before"></se-before-after-toggle>
13
- */
14
- export declare class BeforeAfterToggleLit extends LitElement {
15
- static properties: {
16
- mode: {
17
- type: StringConstructor;
18
- };
19
- };
20
- mode: 'before' | 'after';
21
- createRenderRoot(): this;
22
- private _handleToggle;
23
- render(): import("lit-html").TemplateResult<1>;
24
- }
25
- //# sourceMappingURL=BeforeAfterToggleLit.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"BeforeAfterToggleLit.d.ts","sourceRoot":"","sources":["../../src/components/BeforeAfterToggleLit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC;;;;;;;;;;;GAWG;AACH,qBAAa,oBAAqB,SAAQ,UAAU;IAClD,OAAgB,UAAU;;;;MAExB;IAEF,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAY;IAE3B,gBAAgB;IAIzB,OAAO,CAAC,aAAa;IAWZ,MAAM;CAwBhB"}