@syntrologie/adapt-nav 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.
- package/dist/NavWidgetLit.d.ts.map +1 -1
- package/dist/chunk-HMLY7DHA.js +16 -0
- package/dist/chunk-HMLY7DHA.js.map +7 -0
- package/dist/chunk-ZYHZ6JAD.js +447 -0
- package/dist/chunk-ZYHZ6JAD.js.map +7 -0
- package/dist/editor.d.ts +42 -21
- package/dist/editor.d.ts.map +1 -1
- package/dist/editor.js +310 -313
- package/dist/editor.js.map +7 -0
- package/dist/resolveNavTarget.d.ts +61 -0
- package/dist/resolveNavTarget.d.ts.map +1 -0
- package/dist/resolveNavTarget.test.d.ts +2 -0
- package/dist/resolveNavTarget.test.d.ts.map +1 -0
- package/dist/runtime.d.ts +3 -4
- package/dist/runtime.d.ts.map +1 -1
- package/dist/runtime.js +612 -221
- package/dist/runtime.js.map +7 -0
- package/dist/schema.d.ts +182 -72
- package/dist/schema.d.ts.map +1 -1
- package/dist/schema.js +155 -125
- package/dist/schema.js.map +7 -0
- package/package.json +9 -24
- package/dist/NavWidget.d.ts +0 -31
- package/dist/NavWidget.d.ts.map +0 -1
- package/dist/NavWidget.js +0 -476
- package/dist/NavWidgetLit.js +0 -495
- package/dist/NavWidgetLit.test.js +0 -199
- package/dist/cdn.d.ts +0 -62
- package/dist/cdn.d.ts.map +0 -1
- package/dist/cdn.js +0 -48
- package/dist/editor-lit.d.ts +0 -49
- package/dist/editor-lit.d.ts.map +0 -1
- package/dist/editor-lit.js +0 -319
- package/dist/runtime-lit.d.ts +0 -108
- package/dist/runtime-lit.d.ts.map +0 -1
- package/dist/runtime-lit.js +0 -241
- package/dist/summarize.js +0 -51
- package/dist/types.js +0 -18
- package/node_modules/@syntro/design-system/README.md +0 -335
- package/node_modules/@syntro/design-system/dist/assets/syntrologie-logo.svg +0 -21
- package/node_modules/@syntro/design-system/dist/assets/syntrologie-logomark.svg +0 -10
- package/node_modules/@syntro/design-system/dist/index.d.ts +0 -8
- package/node_modules/@syntro/design-system/dist/index.d.ts.map +0 -1
- package/node_modules/@syntro/design-system/dist/index.js +0 -7
- package/node_modules/@syntro/design-system/dist/tailwind-preset.d.ts +0 -19
- package/node_modules/@syntro/design-system/dist/tailwind-preset.d.ts.map +0 -1
- package/node_modules/@syntro/design-system/dist/tailwind-preset.js +0 -455
- package/node_modules/@syntro/design-system/dist/tokens/colors.css +0 -464
- package/node_modules/@syntro/design-system/dist/tokens/colors.d.ts +0 -874
- package/node_modules/@syntro/design-system/dist/tokens/colors.d.ts.map +0 -1
- package/node_modules/@syntro/design-system/dist/tokens/colors.js +0 -564
- package/node_modules/@syntro/design-system/dist/tokens/effects.css +0 -43
- package/node_modules/@syntro/design-system/dist/tokens/effects.d.ts +0 -139
- package/node_modules/@syntro/design-system/dist/tokens/effects.d.ts.map +0 -1
- package/node_modules/@syntro/design-system/dist/tokens/effects.js +0 -121
- package/node_modules/@syntro/design-system/dist/tokens/index.d.ts +0 -12
- package/node_modules/@syntro/design-system/dist/tokens/index.d.ts.map +0 -1
- package/node_modules/@syntro/design-system/dist/tokens/index.js +0 -11
- package/node_modules/@syntro/design-system/dist/tokens/panel-shell.d.ts +0 -93
- package/node_modules/@syntro/design-system/dist/tokens/panel-shell.d.ts.map +0 -1
- package/node_modules/@syntro/design-system/dist/tokens/panel-shell.js +0 -72
- package/node_modules/@syntro/design-system/package.json +0 -55
- package/node_modules/@syntro/design-system/src/assets/syntrologie-logo.svg +0 -21
- package/node_modules/@syntro/design-system/src/assets/syntrologie-logomark.svg +0 -10
- package/node_modules/@syntrologie/sdk-contracts/dist/index.d.ts +0 -129
- package/node_modules/@syntrologie/sdk-contracts/dist/index.js +0 -17
- package/node_modules/@syntrologie/sdk-contracts/dist/schemas.d.ts +0 -2296
- package/node_modules/@syntrologie/sdk-contracts/dist/schemas.js +0 -361
- package/node_modules/@syntrologie/sdk-contracts/package.json +0 -33
- package/node_modules/@syntrologie/shared-editor-ui/dist/cn.d.ts +0 -2
- package/node_modules/@syntrologie/shared-editor-ui/dist/cn.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/cn.js +0 -3
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts +0 -34
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.js +0 -161
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.d.ts +0 -84
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPickerLit.js +0 -323
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.js +0 -9
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.d.ts +0 -25
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.js +0 -55
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.d.ts +0 -23
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.js +0 -40
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.d.ts +0 -33
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.js +0 -118
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadge.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadge.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadge.js +0 -22
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.d.ts +0 -32
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DetectionBadgeLit.js +0 -68
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.d.ts +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.js +0 -9
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSectionLit.d.ts +0 -34
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSectionLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSectionLit.js +0 -57
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.js +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButtonLit.d.ts +0 -13
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButtonLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButtonLit.js +0 -31
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBody.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBody.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBody.js +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBodyLit.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBodyLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorBodyLit.js +0 -15
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.d.ts +0 -13
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.js +0 -15
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCardLit.d.ts +0 -36
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCardLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCardLit.js +0 -102
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.js +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooterLit.d.ts +0 -20
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooterLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooterLit.js +0 -48
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeader.d.ts +0 -9
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeader.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeader.js +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeaderLit.d.ts +0 -16
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeaderLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorHeaderLit.js +0 -25
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.d.ts +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.js +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInputLit.d.ts +0 -66
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInputLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInputLit.js +0 -87
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayout.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayout.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayout.js +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayoutLit.d.ts +0 -7
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayoutLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorLayoutLit.js +0 -15
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.d.ts +0 -25
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.js +0 -390
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShellLit.d.ts +0 -66
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShellLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShellLit.js +0 -528
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.d.ts +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.js +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelectLit.d.ts +0 -41
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelectLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelectLit.js +0 -63
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.d.ts +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.js +0 -17
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.d.ts +0 -55
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextareaLit.js +0 -92
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.d.ts +0 -32
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.js +0 -85
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.d.ts +0 -90
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlightLit.js +0 -242
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyState.d.ts +0 -6
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyState.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyState.js +0 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyStateLit.d.ts +0 -12
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyStateLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EmptyStateLit.js +0 -21
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeader.d.ts +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeader.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeader.js +0 -5
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeaderLit.d.ts +0 -21
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeaderLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/GroupHeaderLit.js +0 -33
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.d.ts +0 -12
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.js +0 -40
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourneyLit.d.ts +0 -28
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourneyLit.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourneyLit.js +0 -121
- package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.d.ts +0 -110
- package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/controllers/PanelShellController.js +0 -481
- package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.d.ts +0 -26
- package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.js +0 -202
- package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useElementRect.d.ts +0 -8
- package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useElementRect.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useElementRect.js +0 -46
- package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useTriggerWhenStatus.d.ts +0 -24
- package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useTriggerWhenStatus.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/hooks/useTriggerWhenStatus.js +0 -86
- package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts +0 -36
- package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/index.js +0 -26
- package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.d.ts +0 -15
- package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/lit-elements.js +0 -14
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts +0 -33
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/elementChainRecommender.js +0 -68
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/selectorGenerator.d.ts +0 -22
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/selectorGenerator.d.ts.map +0 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/utils/selectorGenerator.js +0 -143
- package/node_modules/@syntrologie/shared-editor-ui/package.json +0 -55
|
@@ -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
|
package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.d.ts.map
DELETED
|
@@ -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
|
-
}
|
package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.d.ts
DELETED
|
@@ -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
|
package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggleLit.d.ts.map
DELETED
|
@@ -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"}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { html, 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 class BeforeAfterToggleLit extends LitElement {
|
|
15
|
-
constructor() {
|
|
16
|
-
super(...arguments);
|
|
17
|
-
this.mode = 'before';
|
|
18
|
-
}
|
|
19
|
-
createRenderRoot() {
|
|
20
|
-
return this;
|
|
21
|
-
}
|
|
22
|
-
_handleToggle(value) {
|
|
23
|
-
this.mode = value;
|
|
24
|
-
this.dispatchEvent(new CustomEvent('toggle', {
|
|
25
|
-
detail: { mode: value },
|
|
26
|
-
bubbles: true,
|
|
27
|
-
composed: true,
|
|
28
|
-
}));
|
|
29
|
-
}
|
|
30
|
-
render() {
|
|
31
|
-
const beforeActive = this.mode === 'before';
|
|
32
|
-
const afterActive = this.mode === 'after';
|
|
33
|
-
const baseBtn = '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';
|
|
34
|
-
const beforeClasses = `${baseBtn} ${beforeActive ? 'se-bg-blue-5/30 se-text-blue-5' : 'se-bg-transparent se-text-text-secondary'}`;
|
|
35
|
-
const afterClasses = `${baseBtn} se-border-l se-border-border-primary ${afterActive ? 'se-bg-blue-5/30 se-text-blue-5' : 'se-bg-transparent se-text-text-secondary'}`;
|
|
36
|
-
return html `
|
|
37
|
-
<div class="se-flex se-mb-3 se-rounded-lg se-overflow-hidden se-border se-border-border-primary">
|
|
38
|
-
<button
|
|
39
|
-
type="button"
|
|
40
|
-
class=${beforeClasses}
|
|
41
|
-
@click=${() => this._handleToggle('before')}
|
|
42
|
-
>Before</button>
|
|
43
|
-
<button
|
|
44
|
-
type="button"
|
|
45
|
-
class=${afterClasses}
|
|
46
|
-
@click=${() => this._handleToggle('after')}
|
|
47
|
-
>After</button>
|
|
48
|
-
</div>
|
|
49
|
-
`;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
BeforeAfterToggleLit.properties = {
|
|
53
|
-
mode: { type: String },
|
|
54
|
-
};
|
|
55
|
-
customElements.define('se-before-after-toggle', BeforeAfterToggleLit);
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ConditionStatusLine — inline triggerWhen diagnostic on EditorCard.
|
|
3
|
-
*
|
|
4
|
-
* Shows a compact one-line status for items with triggerWhen conditions.
|
|
5
|
-
* Click to expand per-condition detail.
|
|
6
|
-
*/
|
|
7
|
-
import type { FormattedCondition } from '../formatConditionLabel';
|
|
8
|
-
export interface ConditionStatus {
|
|
9
|
-
type: string;
|
|
10
|
-
passed: boolean;
|
|
11
|
-
formatted: FormattedCondition;
|
|
12
|
-
}
|
|
13
|
-
export interface TriggerWhenStatus {
|
|
14
|
-
visible: boolean;
|
|
15
|
-
isFallback: boolean;
|
|
16
|
-
conditions: ConditionStatus[];
|
|
17
|
-
}
|
|
18
|
-
interface ConditionStatusLineProps {
|
|
19
|
-
status: TriggerWhenStatus | null;
|
|
20
|
-
}
|
|
21
|
-
export declare function ConditionStatusLine({ status }: ConditionStatusLineProps): import("react/jsx-runtime").JSX.Element | null;
|
|
22
|
-
export {};
|
|
23
|
-
//# sourceMappingURL=ConditionStatusLine.d.ts.map
|
package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ConditionStatusLine.d.ts","sourceRoot":"","sources":["../../src/components/ConditionStatusLine.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,kBAAkB,CAAC;CAC/B;AAED,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;CAClC;AA6CD,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,EAAE,wBAAwB,kDAiEvE"}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
/**
|
|
3
|
-
* ConditionStatusLine — inline triggerWhen diagnostic on EditorCard.
|
|
4
|
-
*
|
|
5
|
-
* Shows a compact one-line status for items with triggerWhen conditions.
|
|
6
|
-
* Click to expand per-condition detail.
|
|
7
|
-
*/
|
|
8
|
-
import { Check, Clock, X } from 'lucide-react';
|
|
9
|
-
import { useState } from 'react';
|
|
10
|
-
import { cn } from '../cn';
|
|
11
|
-
function ProgressBar({ current, target }) {
|
|
12
|
-
const pct = Math.min(100, Math.round((current / Math.max(target, 1)) * 100));
|
|
13
|
-
return (_jsx("span", { className: "se-inline-block se-w-12 se-h-1.5 se-rounded-full se-bg-white/20 se-align-middle se-ml-1", title: `${current}/${target} (${pct}%)`, children: _jsx("span", { className: cn('se-block se-h-full se-rounded-full se-transition-all', pct >= 100 ? 'se-bg-green-4' : 'se-bg-blue-4'), style: { width: `${pct}%` } }) }));
|
|
14
|
-
}
|
|
15
|
-
function ConditionRow({ cs }) {
|
|
16
|
-
return (_jsxs("div", { className: "se-flex se-items-center se-gap-1 se-pl-3 se-text-[12px] se-font-medium se-text-text-secondary", children: [cs.passed ? (_jsx(Check, { className: "se-w-3 se-h-3 se-text-green-4" })) : (_jsx(X, { className: "se-w-3 se-h-3 se-text-red-4" })), _jsxs("span", { children: [cs.type, ":"] }), _jsx("span", { className: "se-text-text-secondary", children: cs.formatted.label }), cs.formatted.progress && (_jsxs(_Fragment, { children: [_jsx(ProgressBar, { current: cs.formatted.progress.current, target: cs.formatted.progress.target }), _jsxs("span", { className: "se-text-text-secondary se-ml-0.5", children: [cs.formatted.progress.current, "/", cs.formatted.progress.target] })] }))] }));
|
|
17
|
-
}
|
|
18
|
-
export function ConditionStatusLine({ status }) {
|
|
19
|
-
const [expanded, setExpanded] = useState(false);
|
|
20
|
-
if (!status)
|
|
21
|
-
return null;
|
|
22
|
-
const { visible, conditions } = status;
|
|
23
|
-
const passedCount = conditions.filter((c) => c.passed).length;
|
|
24
|
-
const totalCount = conditions.length;
|
|
25
|
-
// Icon: visible = green check, hidden = clock
|
|
26
|
-
const StatusIcon = visible ? Check : Clock;
|
|
27
|
-
const iconColor = visible ? 'se-text-green-4' : 'se-text-yellow-5';
|
|
28
|
-
// Single condition: show inline detail
|
|
29
|
-
// Multi condition: show summary, click to expand
|
|
30
|
-
const isSingle = totalCount === 1;
|
|
31
|
-
if (isSingle) {
|
|
32
|
-
const cs = conditions[0];
|
|
33
|
-
return (_jsxs("div", { className: "se-text-[12px] se-font-medium se-text-text-secondary se-mt-0.5 se-flex se-items-center se-gap-1", children: [_jsx(StatusIcon, { className: cn('se-w-3 se-h-3', iconColor) }), _jsxs("span", { children: [cs.type, ":"] }), _jsx("span", { className: "se-text-text-secondary", children: cs.formatted.label }), cs.formatted.progress && (_jsxs(_Fragment, { children: [_jsx(ProgressBar, { current: cs.formatted.progress.current, target: cs.formatted.progress.target }), _jsxs("span", { className: "se-text-text-secondary se-ml-0.5", children: [cs.formatted.progress.current, "/", cs.formatted.progress.target] })] }))] }));
|
|
34
|
-
}
|
|
35
|
-
// Multi-condition: summary line + expandable detail
|
|
36
|
-
return (_jsxs("div", { className: "se-mt-0.5", children: [_jsxs("button", { type: "button", className: "se-flex se-items-center se-gap-1 se-text-[12px] se-font-medium se-text-text-secondary se-bg-transparent se-border-none se-cursor-pointer se-p-0 hover:se-text-text-primary", onClick: (e) => {
|
|
37
|
-
e.stopPropagation();
|
|
38
|
-
setExpanded(!expanded);
|
|
39
|
-
}, children: [_jsx(StatusIcon, { className: cn('se-w-3 se-h-3', iconColor) }), _jsxs("span", { children: [passedCount, " of ", totalCount, " conditions met"] }), _jsx("span", { className: "se-text-[11px] se-ml-0.5", children: expanded ? '\u25b2' : '\u25bc' })] }), expanded && (_jsx("div", { className: "se-mt-0.5 se-space-y-0.5", children: conditions.map((cs, i) => (_jsx(ConditionRow, { cs: cs }, i))) }))] }));
|
|
40
|
-
}
|
package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.d.ts
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { LitElement } from 'lit';
|
|
2
|
-
import type { TriggerWhenStatus } from './ConditionStatusLine';
|
|
3
|
-
/**
|
|
4
|
-
* ConditionStatusLineLit — inline triggerWhen diagnostic on EditorCard.
|
|
5
|
-
*
|
|
6
|
-
* Shows a compact one-line status for items with triggerWhen conditions.
|
|
7
|
-
* Click to expand per-condition detail (multi-condition case).
|
|
8
|
-
*
|
|
9
|
-
* Attributes:
|
|
10
|
-
* status — JSON-serialized TriggerWhenStatus (set via property, not attribute)
|
|
11
|
-
*
|
|
12
|
-
* Usage:
|
|
13
|
-
* const el = document.createElement('se-condition-status-line');
|
|
14
|
-
* el.status = { visible: true, isFallback: false, conditions: [...] };
|
|
15
|
-
*/
|
|
16
|
-
export declare class ConditionStatusLineLit extends LitElement {
|
|
17
|
-
static properties: {
|
|
18
|
-
status: {
|
|
19
|
-
type: ObjectConstructor;
|
|
20
|
-
};
|
|
21
|
-
_expanded: {
|
|
22
|
-
type: BooleanConstructor;
|
|
23
|
-
state: boolean;
|
|
24
|
-
};
|
|
25
|
-
};
|
|
26
|
-
status: TriggerWhenStatus | null;
|
|
27
|
-
private _expanded;
|
|
28
|
-
createRenderRoot(): this;
|
|
29
|
-
private _renderProgressBar;
|
|
30
|
-
private _renderConditionRow;
|
|
31
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
32
|
-
}
|
|
33
|
-
//# sourceMappingURL=ConditionStatusLineLit.d.ts.map
|
package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLineLit.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"ConditionStatusLineLit.d.ts","sourceRoot":"","sources":["../../src/components/ConditionStatusLineLit.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,KAAK,EAAmB,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEhF;;;;;;;;;;;;GAYG;AACH,qBAAa,sBAAuB,SAAQ,UAAU;IACpD,OAAgB,UAAU;;;;;;;;MAGxB;IAEF,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IACxC,OAAO,CAAC,SAAS,CAAS;IAEjB,gBAAgB;IAIzB,OAAO,CAAC,kBAAkB;IAgB1B,OAAO,CAAC,mBAAmB;IAwBlB,MAAM;CA+DhB"}
|