@syntrologie/adapt-nav 2.2.0-canary.8 → 2.2.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/NavWidget.js +1 -1
- package/dist/cdn.d.ts +1 -6
- package/dist/cdn.d.ts.map +1 -1
- package/dist/cdn.js +1 -21
- package/dist/editor.js +2 -2
- package/dist/runtime.d.ts +16 -0
- package/dist/runtime.d.ts.map +1 -1
- package/dist/runtime.js +41 -1
- package/dist/schema.d.ts +417 -33
- package/dist/schema.d.ts.map +1 -1
- package/dist/schema.js +8 -3
- package/dist/types.d.ts +4 -2
- package/dist/types.d.ts.map +1 -1
- package/node_modules/@syntro/design-system/dist/tailwind-preset.d.ts.map +1 -1
- package/node_modules/@syntro/design-system/dist/tailwind-preset.js +23 -2
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/BeforeAfterToggle.test.js +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/ConditionStatusLine.test.d.ts +2 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/ConditionStatusLine.test.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/ConditionStatusLine.test.js +158 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/DismissedSection.test.js +6 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/EditorCard.test.js +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/EditorHeader.test.js +4 -5
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/EditorPanelShell.test.d.ts +2 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/EditorPanelShell.test.d.ts.map +1 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/EditorPanelShell.test.js +25 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/ElementHighlight.test.js +22 -0
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/TriggerJourney.test.js +77 -14
- package/node_modules/@syntrologie/shared-editor-ui/dist/__tests__/formatConditionLabel.test.js +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts +1 -2
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/AnchorPicker.js +4 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.js +4 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ConditionStatusLine.js +5 -5
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/DismissedSection.js +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditBackButton.js +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorCard.js +10 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorFooter.js +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.d.ts +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorInput.js +5 -2
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.js +4 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.d.ts +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorSelect.js +5 -2
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.d.ts +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorTextarea.js +6 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.js +24 -12
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/components/TriggerJourney.js +4 -4
- package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/formatConditionLabel.js +12 -20
- package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/index.d.ts.map +1 -1
- package/node_modules/@syntrologie/shared-editor-ui/dist/index.js +1 -1
- package/package.json +1 -1
|
@@ -1,26 +1,28 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { describe, it, expect } from 'vitest';
|
|
3
2
|
import { render, screen } from '@testing-library/react';
|
|
3
|
+
import { describe, expect, it } from 'vitest';
|
|
4
4
|
import { TriggerJourney } from '../components/TriggerJourney';
|
|
5
5
|
describe('TriggerJourney', () => {
|
|
6
|
-
it('
|
|
7
|
-
|
|
8
|
-
expect(
|
|
6
|
+
it('renders "Always Present" when status is null', () => {
|
|
7
|
+
render(_jsx(TriggerJourney, { status: null }));
|
|
8
|
+
expect(screen.getByText('Always Present')).toBeTruthy();
|
|
9
9
|
});
|
|
10
|
-
it('
|
|
10
|
+
it('renders "Always Present" when conditions array is empty', () => {
|
|
11
11
|
const status = { visible: true, isFallback: true, conditions: [] };
|
|
12
|
-
|
|
13
|
-
expect(
|
|
12
|
+
render(_jsx(TriggerJourney, { status: status }));
|
|
13
|
+
expect(screen.getByText('Always Present')).toBeTruthy();
|
|
14
14
|
});
|
|
15
15
|
it('renders a single node for one condition', () => {
|
|
16
16
|
const status = {
|
|
17
17
|
visible: true,
|
|
18
18
|
isFallback: false,
|
|
19
|
-
conditions: [
|
|
19
|
+
conditions: [
|
|
20
|
+
{
|
|
20
21
|
type: 'page_url',
|
|
21
22
|
passed: true,
|
|
22
23
|
formatted: { label: '/pricing', instruction: 'Visit /pricing', shortLabel: '/pricing' },
|
|
23
|
-
}
|
|
24
|
+
},
|
|
25
|
+
],
|
|
24
26
|
};
|
|
25
27
|
render(_jsx(TriggerJourney, { status: status }));
|
|
26
28
|
expect(screen.getByText('/pricing')).toBeTruthy();
|
|
@@ -33,7 +35,11 @@ describe('TriggerJourney', () => {
|
|
|
33
35
|
{
|
|
34
36
|
type: 'page_url',
|
|
35
37
|
passed: true,
|
|
36
|
-
formatted: {
|
|
38
|
+
formatted: {
|
|
39
|
+
label: '/fine-arts/',
|
|
40
|
+
instruction: 'Visit a /fine-arts/ page',
|
|
41
|
+
shortLabel: '/fine-arts/',
|
|
42
|
+
},
|
|
37
43
|
},
|
|
38
44
|
{
|
|
39
45
|
type: 'event_count',
|
|
@@ -57,7 +63,8 @@ describe('TriggerJourney', () => {
|
|
|
57
63
|
const status = {
|
|
58
64
|
visible: false,
|
|
59
65
|
isFallback: false,
|
|
60
|
-
conditions: [
|
|
66
|
+
conditions: [
|
|
67
|
+
{
|
|
61
68
|
type: 'event_count',
|
|
62
69
|
passed: false,
|
|
63
70
|
formatted: {
|
|
@@ -66,7 +73,8 @@ describe('TriggerJourney', () => {
|
|
|
66
73
|
shortLabel: '3+ clicks',
|
|
67
74
|
progress: { current: 1, target: 3, operator: 'gte' },
|
|
68
75
|
},
|
|
69
|
-
}
|
|
76
|
+
},
|
|
77
|
+
],
|
|
70
78
|
};
|
|
71
79
|
render(_jsx(TriggerJourney, { status: status }));
|
|
72
80
|
expect(screen.getByText('1/3')).toBeTruthy();
|
|
@@ -109,15 +117,70 @@ describe('TriggerJourney', () => {
|
|
|
109
117
|
render(_jsx(TriggerJourney, { status: status }));
|
|
110
118
|
expect(screen.queryByText('All conditions met')).toBeNull();
|
|
111
119
|
});
|
|
120
|
+
it('uses secondary text color and medium weight for node labels', () => {
|
|
121
|
+
const status = {
|
|
122
|
+
visible: false,
|
|
123
|
+
isFallback: false,
|
|
124
|
+
conditions: [
|
|
125
|
+
{
|
|
126
|
+
type: 'page_url',
|
|
127
|
+
passed: false,
|
|
128
|
+
formatted: { label: '/p', instruction: 'Visit pricing', shortLabel: '/pricing' },
|
|
129
|
+
},
|
|
130
|
+
],
|
|
131
|
+
};
|
|
132
|
+
render(_jsx(TriggerJourney, { status: status }));
|
|
133
|
+
const label = screen.getByText('/pricing');
|
|
134
|
+
expect(label.className).toContain('se-text-text-secondary');
|
|
135
|
+
expect(label.className).not.toContain('se-text-text-tertiary');
|
|
136
|
+
expect(label.className).toContain('se-font-medium');
|
|
137
|
+
});
|
|
138
|
+
it('uses at least 11px font size for node labels', () => {
|
|
139
|
+
const status = {
|
|
140
|
+
visible: false,
|
|
141
|
+
isFallback: false,
|
|
142
|
+
conditions: [
|
|
143
|
+
{
|
|
144
|
+
type: 'page_url',
|
|
145
|
+
passed: false,
|
|
146
|
+
formatted: { label: '/p', instruction: 'Visit pricing', shortLabel: '/pricing' },
|
|
147
|
+
},
|
|
148
|
+
],
|
|
149
|
+
};
|
|
150
|
+
render(_jsx(TriggerJourney, { status: status }));
|
|
151
|
+
const label = screen.getByText('/pricing');
|
|
152
|
+
expect(label.className).toContain('se-text-[11px]');
|
|
153
|
+
});
|
|
154
|
+
it('uses secondary text color for "Always Present" label', () => {
|
|
155
|
+
render(_jsx(TriggerJourney, { status: null }));
|
|
156
|
+
const label = screen.getByText('Always Present');
|
|
157
|
+
expect(label.className).toContain('se-text-text-secondary');
|
|
158
|
+
expect(label.className).not.toContain('se-text-text-tertiary');
|
|
159
|
+
});
|
|
160
|
+
it('uses at least 12px for "All conditions met" text', () => {
|
|
161
|
+
const status = {
|
|
162
|
+
visible: true,
|
|
163
|
+
isFallback: false,
|
|
164
|
+
conditions: [
|
|
165
|
+
{ type: 'a', passed: true, formatted: { label: 'a', instruction: 'A', shortLabel: 'A' } },
|
|
166
|
+
{ type: 'b', passed: true, formatted: { label: 'b', instruction: 'B', shortLabel: 'B' } },
|
|
167
|
+
],
|
|
168
|
+
};
|
|
169
|
+
const { container } = render(_jsx(TriggerJourney, { status: status }));
|
|
170
|
+
const badge = screen.getByText('All conditions met').closest('div');
|
|
171
|
+
expect(badge.className).toContain('se-text-[12px]');
|
|
172
|
+
});
|
|
112
173
|
it('uses instruction as title attribute for tooltip', () => {
|
|
113
174
|
const status = {
|
|
114
175
|
visible: false,
|
|
115
176
|
isFallback: false,
|
|
116
|
-
conditions: [
|
|
177
|
+
conditions: [
|
|
178
|
+
{
|
|
117
179
|
type: 'page_url',
|
|
118
180
|
passed: false,
|
|
119
181
|
formatted: { label: '/p', instruction: 'Visit /pricing page', shortLabel: '/pricing' },
|
|
120
|
-
}
|
|
182
|
+
},
|
|
183
|
+
],
|
|
121
184
|
};
|
|
122
185
|
render(_jsx(TriggerJourney, { status: status }));
|
|
123
186
|
const label = screen.getByText('/pricing');
|
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
* Instructions / cancel UI should be rendered by the consumer in their own
|
|
16
16
|
* panel — this component only provides the page overlay.
|
|
17
17
|
*/
|
|
18
|
-
import React from 'react';
|
|
19
18
|
export interface PickedElement {
|
|
20
19
|
element: Element;
|
|
21
20
|
selector: string;
|
|
@@ -27,5 +26,5 @@ export interface AnchorPickerProps {
|
|
|
27
26
|
onCancel: () => void;
|
|
28
27
|
excludeSelector?: string;
|
|
29
28
|
}
|
|
30
|
-
export declare function AnchorPicker({ isActive, onPick, onCancel, excludeSelector, }: AnchorPickerProps):
|
|
29
|
+
export declare function AnchorPicker({ isActive, onPick, onCancel, excludeSelector, }: AnchorPickerProps): import("react").ReactPortal | null;
|
|
31
30
|
//# sourceMappingURL=AnchorPicker.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchorPicker.d.ts","sourceRoot":"","sources":["../../src/components/AnchorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;
|
|
1
|
+
{"version":3,"file":"AnchorPicker.d.ts","sourceRoot":"","sources":["../../src/components/AnchorPicker.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAWH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAKD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,eAAuJ,GACxJ,EAAE,iBAAiB,sCAgMnB"}
|
|
@@ -103,7 +103,7 @@ export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[d
|
|
|
103
103
|
}, children: [_jsx("div", { style: {
|
|
104
104
|
position: 'absolute',
|
|
105
105
|
inset: 0,
|
|
106
|
-
background: 'rgba(0, 0, 0, 0.
|
|
106
|
+
background: 'rgba(0, 0, 0, 0.08)',
|
|
107
107
|
pointerEvents: 'none',
|
|
108
108
|
} }), hoveredElement && rect && (_jsx("div", { style: {
|
|
109
109
|
position: 'fixed',
|
|
@@ -114,7 +114,7 @@ export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[d
|
|
|
114
114
|
border: `2px solid ${HIGHLIGHT_COLOR}`,
|
|
115
115
|
backgroundColor: HIGHLIGHT_BG,
|
|
116
116
|
borderRadius: '4px',
|
|
117
|
-
boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.
|
|
117
|
+
boxShadow: '0 0 0 9999px rgba(0, 0, 0, 0.2)',
|
|
118
118
|
pointerEvents: 'none',
|
|
119
119
|
transition: 'all 0.1s ease-out',
|
|
120
120
|
} })), hoveredElement && rect && (_jsxs("div", { style: {
|
|
@@ -128,11 +128,11 @@ export function AnchorPicker({ isActive, onPick, onCancel, excludeSelector = '[d
|
|
|
128
128
|
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
|
|
129
129
|
zIndex: 1,
|
|
130
130
|
fontFamily: 'monospace',
|
|
131
|
-
fontSize: '
|
|
131
|
+
fontSize: '13px',
|
|
132
132
|
maxWidth: '300px',
|
|
133
133
|
pointerEvents: 'none',
|
|
134
134
|
}, children: [_jsx("div", { style: {
|
|
135
|
-
fontSize: '
|
|
135
|
+
fontSize: '12px',
|
|
136
136
|
textTransform: 'uppercase',
|
|
137
137
|
letterSpacing: '0.05em',
|
|
138
138
|
marginBottom: '4px',
|
package/node_modules/@syntrologie/shared-editor-ui/dist/components/BeforeAfterToggle.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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,
|
|
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 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from '../cn';
|
|
3
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", { 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/
|
|
6
|
-
: 'se-bg-transparent se-text-text-secondary'), children: "Before" }), _jsx("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/
|
|
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
8
|
: 'se-bg-transparent se-text-text-secondary'), children: "After" })] }));
|
|
9
9
|
}
|
|
@@ -10,10 +10,10 @@ import { useState } from 'react';
|
|
|
10
10
|
import { cn } from '../cn';
|
|
11
11
|
function ProgressBar({ current, target }) {
|
|
12
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/
|
|
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
14
|
}
|
|
15
15
|
function ConditionRow({ cs }) {
|
|
16
|
-
return (_jsxs("div", { className: "se-flex se-items-center se-gap-1 se-pl-3 se-text-[
|
|
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
17
|
}
|
|
18
18
|
export function ConditionStatusLine({ status }) {
|
|
19
19
|
const [expanded, setExpanded] = useState(false);
|
|
@@ -30,11 +30,11 @@ export function ConditionStatusLine({ status }) {
|
|
|
30
30
|
const isSingle = totalCount === 1;
|
|
31
31
|
if (isSingle) {
|
|
32
32
|
const cs = conditions[0];
|
|
33
|
-
return (_jsxs("div", { className: "se-text-[
|
|
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
34
|
}
|
|
35
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-[
|
|
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
37
|
e.stopPropagation();
|
|
38
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-[
|
|
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
40
|
}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
export function DismissedSection({ count, children }) {
|
|
4
4
|
const [isOpen, setIsOpen] = useState(false);
|
|
5
|
-
return (_jsxs("div", { className: "se-mt-4 se-cursor-pointer se-select-none", children: [_jsxs("div", { role: "button", tabIndex: 0, className: "se-text-xs se-font-semibold se-text-text-
|
|
5
|
+
return (_jsxs("div", { className: "se-mt-4 se-cursor-pointer se-select-none", children: [_jsxs("div", { role: "button", tabIndex: 0, className: "se-text-xs se-font-semibold se-text-text-secondary se-flex se-items-center se-gap-1.5 se-cursor-pointer", onClick: () => setIsOpen(!isOpen), onKeyDown: (e) => {
|
|
6
6
|
if (e.key === 'Enter' || e.key === ' ')
|
|
7
7
|
setIsOpen(!isOpen);
|
|
8
8
|
}, children: [_jsx("span", { children: isOpen ? '\u25be' : '\u25b8' }), _jsxs("span", { children: ["Dismissed (", count, ")"] })] }), isOpen && _jsx("div", { className: "se-mt-1.5", children: children })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditBackButton.d.ts","sourceRoot":"","sources":["../../src/components/EditBackButton.tsx"],"names":[],"mappings":"AAAA,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAqB,EAAE,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"EditBackButton.d.ts","sourceRoot":"","sources":["../../src/components/EditBackButton.tsx"],"names":[],"mappings":"AAAA,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,KAAqB,EAAE,EAAE,mBAAmB,2CAUrF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
export function EditBackButton({ onClick, label = '\u2190 List' }) {
|
|
3
|
-
return (_jsx("button", { onClick: onClick, className: "se-h-10 se-px-4 se-py-2 se-rounded-md se-bg-btn-neutral se-text-btn-neutral-text se-border se-border-btn-neutral-border hover:se-text-btn-neutral-text-hover se-text-sm se-font-medium se-cursor-pointer se-mt-2 se-inline-flex se-items-center se-justify-center focus-visible:se-shadow-focus-primary focus-visible:se-outline-none", children: label }));
|
|
3
|
+
return (_jsx("button", { type: "button", onClick: onClick, className: "se-h-10 se-px-4 se-py-2 se-rounded-md se-bg-btn-neutral se-text-btn-neutral-text se-border se-border-btn-neutral-border hover:se-text-btn-neutral-text-hover se-text-sm se-font-medium se-cursor-pointer se-mt-2 se-inline-flex se-items-center se-justify-center focus-visible:se-shadow-focus-primary focus-visible:se-outline-none", children: label }));
|
|
4
4
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorCard.d.ts","sourceRoot":"","sources":["../../src/components/EditorCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,SAAS,GACV,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"EditorCard.d.ts","sourceRoot":"","sources":["../../src/components/EditorCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,SAAS,GACV,EAAE,eAAe,2CA+BjB"}
|
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { cn } from '../cn';
|
|
3
3
|
export function EditorCard({ children, itemKey, onClick, onMouseEnter, onMouseLeave, className, validated, }) {
|
|
4
|
-
return (
|
|
4
|
+
return (
|
|
5
|
+
// biome-ignore lint/a11y/noStaticElementInteractions: onMouseEnter/onMouseLeave are for presentational hover highlighting, not user interaction
|
|
6
|
+
_jsx("div", { "data-item-key": itemKey, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onClick: onClick, onKeyDown: onClick
|
|
7
|
+
? (e) => {
|
|
8
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
9
|
+
e.preventDefault();
|
|
10
|
+
onClick();
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
: undefined, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: cn('se-py-2 se-px-2.5 se-rounded-lg se-border se-bg-card-bg se-shadow-sm se-mb-1 se-text-sm se-text-text-primary', validated ? 'se-border-green-4/50 se-shadow-glow-green' : 'se-border-border-primary', onClick &&
|
|
5
14
|
'se-cursor-pointer hover:se-border-border-primary/80 hover:se-bg-sidebar-hover se-transition-colors', className), children: children }));
|
|
6
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorFooter.d.ts","sourceRoot":"","sources":["../../src/components/EditorFooter.tsx"],"names":[],"mappings":"AAAA,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"EditorFooter.d.ts","sourceRoot":"","sources":["../../src/components/EditorFooter.tsx"],"names":[],"mappings":"AAAA,UAAU,iBAAiB;IACzB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAmBpE"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
export function EditorFooter({ onSave, onPublish }) {
|
|
3
|
-
return (_jsxs("div", { className: "se-py-3 se-px-4 se-border-t se-border-border-primary se-flex se-gap-2", children: [_jsx("button", { onClick: onSave, className: "se-flex-1 se-h-10 se-px-4 se-py-2 se-rounded-md se-bg-btn-neutral se-text-btn-neutral-text se-border se-border-btn-neutral-border hover:se-text-btn-neutral-text-hover se-text-sm se-font-medium se-cursor-pointer se-inline-flex se-items-center se-justify-center focus-visible:se-shadow-focus-primary focus-visible:se-outline-none", children: "Save Draft" }), _jsx("button", { onClick: onPublish, className: "se-flex-1 se-h-10 se-px-4 se-py-2 se-rounded-md se-border-none se-bg-btn-primary se-text-btn-primary-text hover:se-bg-btn-primary-hover se-text-sm se-font-medium se-cursor-pointer se-inline-flex se-items-center se-justify-center focus-visible:se-shadow-focus-primary focus-visible:se-outline-none", children: "Publish" })] }));
|
|
3
|
+
return (_jsxs("div", { className: "se-py-3 se-px-4 se-border-t se-border-border-primary se-flex se-gap-2", children: [_jsx("button", { type: "button", onClick: onSave, className: "se-flex-1 se-h-10 se-px-4 se-py-2 se-rounded-md se-bg-btn-neutral se-text-btn-neutral-text se-border se-border-btn-neutral-border hover:se-text-btn-neutral-text-hover se-text-sm se-font-medium se-cursor-pointer se-inline-flex se-items-center se-justify-center focus-visible:se-shadow-focus-primary focus-visible:se-outline-none", children: "Save Draft" }), _jsx("button", { type: "button", onClick: onPublish, className: "se-flex-1 se-h-10 se-px-4 se-py-2 se-rounded-md se-border-none se-bg-btn-primary se-text-btn-primary-text hover:se-bg-btn-primary-hover se-text-sm se-font-medium se-cursor-pointer se-inline-flex se-items-center se-justify-center focus-visible:se-shadow-focus-primary focus-visible:se-outline-none", children: "Publish" })] }));
|
|
4
4
|
}
|
|
@@ -3,6 +3,6 @@ interface EditorInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
|
3
3
|
label?: string;
|
|
4
4
|
className?: string;
|
|
5
5
|
}
|
|
6
|
-
export declare function EditorInput({ label, className, ...props }: EditorInputProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare function EditorInput({ label, className, id, ...props }: EditorInputProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
8
8
|
//# sourceMappingURL=EditorInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorInput.d.ts","sourceRoot":"","sources":["../../src/components/EditorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"EditorInput.d.ts","sourceRoot":"","sources":["../../src/components/EditorInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,gBAAiB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CA0B/E"}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useId } from 'react';
|
|
2
3
|
import { cn } from '../cn';
|
|
3
|
-
export function EditorInput({ label, className, ...props }) {
|
|
4
|
-
|
|
4
|
+
export function EditorInput({ label, className, id, ...props }) {
|
|
5
|
+
const generatedId = useId();
|
|
6
|
+
const inputId = id || generatedId;
|
|
7
|
+
return (_jsxs("div", { children: [label && (_jsx("label", { htmlFor: inputId, className: "se-text-sm se-font-medium se-text-input-field-text-label se-mb-1 se-block", children: label })), _jsx("input", { id: inputId, ...props, className: cn('se-w-full se-py-2 se-px-3 se-rounded-lg se-border se-border-input-field-border se-bg-slate-grey-3 se-text-text-primary se-text-sm se-font-[inherit] se-mb-2 se-box-border', 'placeholder:se-text-input-field-text-placeholder', 'focus:se-border-input-field-border-selected focus:se-outline-none focus:se-shadow-focus-primary', 'disabled:se-bg-input-field-bg-disabled disabled:se-cursor-not-allowed disabled:se-opacity-50', className) })] }));
|
|
5
8
|
}
|
package/node_modules/@syntrologie/shared-editor-ui/dist/components/EditorPanelShell.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorPanelShell.d.ts","sourceRoot":"","sources":["../../src/components/EditorPanelShell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;
|
|
1
|
+
{"version":3,"file":"EditorPanelShell.d.ts","sourceRoot":"","sources":["../../src/components/EditorPanelShell.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAyKD,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,QAAQ,EACR,QAAkB,EAClB,OAAO,EACP,MAAmB,EACnB,YAAY,EACZ,QAAQ,GACT,EAAE,qBAAqB,2CA0CvB"}
|
|
@@ -10,7 +10,7 @@ import { cn } from '../cn';
|
|
|
10
10
|
* Rendered as inline SVG to avoid CSP issues with data: URIs on injected pages.
|
|
11
11
|
*/
|
|
12
12
|
function SyntroLogo() {
|
|
13
|
-
return (_jsxs("svg", { width: "28", height: "18", viewBox: "0 0 101 63", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { clipPath: "url(#syntro-fab-clip)", children: _jsx("path", { d: "M51.989 0.284C52.386 0.29 52.808 0.341 53.192 0.443C53.769 0.596 54.362 0.983 54.745 1.442C55.895 2.822 56.767 4.782 57.669 6.357C59.947 10.334 62.152 14.372 64.498 18.307C64.671 18.597 65.127 19.343 65.475 19.411C66.654 19.641 79.278 11.523 81.123 10.317C80.704 8.6 80.624 7.21 81.334 5.525C82.014 3.916 83.317 2.651 84.946 2.019C86.593 1.366 88.286 1.42 89.902 2.123C91.486 2.795 92.733 4.076 93.363 5.677C95.111 10.218 91.347 15.013 86.561 14.442C85.392 14.302 84.649 13.927 83.6 13.441C76.542 18.247 69.094 22.597 61.207 25.907C60.153 26.349 59.42 26.6 58.519 27.328C60.583 27.43 87.034 24.236 87.878 23.781C87.926 23.755 88.048 23.697 88.08 23.652C88.244 23.421 88.277 23.007 88.376 22.735C88.819 21.511 89.563 20.379 90.604 19.586C91.887 18.608 93.6 18.093 95.208 18.324C96.992 18.581 98.67 19.55 99.74 21.005C100.733 22.364 101.141 24.064 100.875 25.726C100.607 27.394 99.692 28.888 98.329 29.887C96.02 31.573 92.641 31.613 90.392 29.789C89.579 29.13 89.177 28.535 88.566 27.692C86.692 28.103 83.447 28.463 81.472 28.73C76.577 29.399 71.671 29.99 66.756 30.504C65.752 30.608 59.279 31.013 58.779 31.24L58.781 31.387C59.106 31.577 66.974 33.025 68.328 33.358C72.475 34.405 76.572 35.64 80.606 37.06C82.709 37.818 84.721 38.686 86.814 39.457C88.505 38.051 89.243 36.875 91.925 36.841C93.665 36.833 95.339 37.506 96.589 38.717C97.986 40.087 98.415 41.541 98.429 43.422C98.417 44.842 98.099 45.978 97.229 47.137C96.168 48.531 94.597 49.447 92.86 49.682C91.161 49.922 89.437 49.472 88.073 48.431C86.201 47.02 85.795 45.462 85.488 43.323C85.255 43.193 85.018 43.071 84.776 42.958C83.907 42.553 78.511 40.359 77.911 40.577C77.837 41.147 78.926 42.592 79.243 43.155L84.336 52.073C85.165 53.529 86.027 54.991 86.789 56.483C87.253 57.391 87.414 58.355 87.056 59.343C86.557 60.722 85.014 61.408 83.626 61.438C81.429 61.427 79.228 61.427 77.029 61.427L62.967 61.427L35.549 61.435C33.337 61.436 20.693 61.626 19.579 61.199C18.758 60.889 18.093 60.265 17.732 59.465C17.455 58.844 17.335 57.994 17.577 57.361C18.242 55.623 19.5 53.659 20.438 52.043L28.119 39.028C28.9 37.701 31.213 33.891 31.7 32.634C25.671 32.936 18.736 32.547 12.6 32.721C11.75 34.138 10.992 35.281 9.368 35.935C7.744 36.588 5.704 36.604 4.097 35.922C2.546 35.272 1.319 34.028 0.69 32.468C0.053 30.839 0.086 29.025 0.781 27.42C2.812 22.739 9.259 22.202 12.05 26.464C12.555 27.235 12.774 27.84 13.104 28.703L26.462 28.711C28.926 28.713 31.729 28.779 34.17 28.668C35.279 26.892 36.442 24.733 37.515 22.901L45.376 9.375C46.797 6.902 48.214 4.368 49.685 1.924C50.222 1.032 50.962 0.493 51.989 0.284ZM22.119 57.31C23.512 57.503 26.045 57.431 27.526 57.429L36.661 57.42L68.412 57.422C73.113 57.421 77.994 57.351 82.68 57.438L75.664 45.098C74.562 43.171 73.093 40.773 72.104 38.827C71.245 38.351 70.291 38.109 69.335 37.848C59.189 35.076 48.669 33.421 38.172 32.796C37.642 32.764 36.994 32.766 36.469 32.794L25.855 50.865C24.634 52.935 23.364 55.302 22.119 57.31ZM52.216 5.513C49.384 10.611 46.473 15.665 43.484 20.673C42.193 22.878 40.862 25.071 39.63 27.31C39.46 27.618 39.36 27.782 39.453 28.133C40.522 28.342 45.866 26.973 47.112 26.644C49.169 26.137 60.135 22.684 61.174 21.436C61.248 21.163 61.287 21.069 61.125 20.762C60.279 19.163 59.326 17.527 58.435 15.958L53.592 7.329C53.355 6.915 52.677 5.599 52.216 5.513ZM96.18 26.494C96.963 25.713 97.12 24.502 96.563 23.547C96.005 22.592 94.872 22.133 93.807 22.432C92.972 22.666 92.324 23.327 92.108 24.167C91.892 25.007 92.14 25.899 92.758 26.507C93.396 27.134 94.327 27.361 95.182 27.096C95.558 26.98 95.901 26.773 96.18 26.494ZM87.871 10.399C89.147 10.087 89.941 8.813 89.659 7.529C89.377 6.246 88.122 5.422 86.832 5.673C85.97 5.841 85.266 6.463 84.994 7.298C84.722 8.133 84.923 9.05 85.52 9.694C86.118 10.339 87.017 10.608 87.871 10.399ZM91.505 40.879C90.185 41.122 89.31 42.388 89.55 43.709C89.791 45.03 91.055 45.907 92.377 45.669C93.22 45.517 93.921 44.933 94.223 44.131C94.525 43.329 94.383 42.428 93.85 41.758C93.29 41.055 92.389 40.717 91.505 40.879ZM9.138 29.557C9.005 28.88 8.592 28.292 8.001 27.937C7.409 27.583 6.696 27.495 6.036 27.697C5.665 27.81 5.326 28.011 5.048 28.282C4.24 29.07 4.079 30.31 4.66 31.278C5.241 32.247 6.411 32.688 7.487 32.346C8.666 31.97 9.376 30.771 9.138 29.557Z", fill: "currentColor" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "syntro-fab-clip", children: _jsx("rect", { width: "101", height: "63", fill: "white" }) }) })] }));
|
|
13
|
+
return (_jsxs("svg", { "aria-hidden": "true", width: "28", height: "18", viewBox: "0 0 101 63", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("g", { clipPath: "url(#syntro-fab-clip)", children: _jsx("path", { d: "M51.989 0.284C52.386 0.29 52.808 0.341 53.192 0.443C53.769 0.596 54.362 0.983 54.745 1.442C55.895 2.822 56.767 4.782 57.669 6.357C59.947 10.334 62.152 14.372 64.498 18.307C64.671 18.597 65.127 19.343 65.475 19.411C66.654 19.641 79.278 11.523 81.123 10.317C80.704 8.6 80.624 7.21 81.334 5.525C82.014 3.916 83.317 2.651 84.946 2.019C86.593 1.366 88.286 1.42 89.902 2.123C91.486 2.795 92.733 4.076 93.363 5.677C95.111 10.218 91.347 15.013 86.561 14.442C85.392 14.302 84.649 13.927 83.6 13.441C76.542 18.247 69.094 22.597 61.207 25.907C60.153 26.349 59.42 26.6 58.519 27.328C60.583 27.43 87.034 24.236 87.878 23.781C87.926 23.755 88.048 23.697 88.08 23.652C88.244 23.421 88.277 23.007 88.376 22.735C88.819 21.511 89.563 20.379 90.604 19.586C91.887 18.608 93.6 18.093 95.208 18.324C96.992 18.581 98.67 19.55 99.74 21.005C100.733 22.364 101.141 24.064 100.875 25.726C100.607 27.394 99.692 28.888 98.329 29.887C96.02 31.573 92.641 31.613 90.392 29.789C89.579 29.13 89.177 28.535 88.566 27.692C86.692 28.103 83.447 28.463 81.472 28.73C76.577 29.399 71.671 29.99 66.756 30.504C65.752 30.608 59.279 31.013 58.779 31.24L58.781 31.387C59.106 31.577 66.974 33.025 68.328 33.358C72.475 34.405 76.572 35.64 80.606 37.06C82.709 37.818 84.721 38.686 86.814 39.457C88.505 38.051 89.243 36.875 91.925 36.841C93.665 36.833 95.339 37.506 96.589 38.717C97.986 40.087 98.415 41.541 98.429 43.422C98.417 44.842 98.099 45.978 97.229 47.137C96.168 48.531 94.597 49.447 92.86 49.682C91.161 49.922 89.437 49.472 88.073 48.431C86.201 47.02 85.795 45.462 85.488 43.323C85.255 43.193 85.018 43.071 84.776 42.958C83.907 42.553 78.511 40.359 77.911 40.577C77.837 41.147 78.926 42.592 79.243 43.155L84.336 52.073C85.165 53.529 86.027 54.991 86.789 56.483C87.253 57.391 87.414 58.355 87.056 59.343C86.557 60.722 85.014 61.408 83.626 61.438C81.429 61.427 79.228 61.427 77.029 61.427L62.967 61.427L35.549 61.435C33.337 61.436 20.693 61.626 19.579 61.199C18.758 60.889 18.093 60.265 17.732 59.465C17.455 58.844 17.335 57.994 17.577 57.361C18.242 55.623 19.5 53.659 20.438 52.043L28.119 39.028C28.9 37.701 31.213 33.891 31.7 32.634C25.671 32.936 18.736 32.547 12.6 32.721C11.75 34.138 10.992 35.281 9.368 35.935C7.744 36.588 5.704 36.604 4.097 35.922C2.546 35.272 1.319 34.028 0.69 32.468C0.053 30.839 0.086 29.025 0.781 27.42C2.812 22.739 9.259 22.202 12.05 26.464C12.555 27.235 12.774 27.84 13.104 28.703L26.462 28.711C28.926 28.713 31.729 28.779 34.17 28.668C35.279 26.892 36.442 24.733 37.515 22.901L45.376 9.375C46.797 6.902 48.214 4.368 49.685 1.924C50.222 1.032 50.962 0.493 51.989 0.284ZM22.119 57.31C23.512 57.503 26.045 57.431 27.526 57.429L36.661 57.42L68.412 57.422C73.113 57.421 77.994 57.351 82.68 57.438L75.664 45.098C74.562 43.171 73.093 40.773 72.104 38.827C71.245 38.351 70.291 38.109 69.335 37.848C59.189 35.076 48.669 33.421 38.172 32.796C37.642 32.764 36.994 32.766 36.469 32.794L25.855 50.865C24.634 52.935 23.364 55.302 22.119 57.31ZM52.216 5.513C49.384 10.611 46.473 15.665 43.484 20.673C42.193 22.878 40.862 25.071 39.63 27.31C39.46 27.618 39.36 27.782 39.453 28.133C40.522 28.342 45.866 26.973 47.112 26.644C49.169 26.137 60.135 22.684 61.174 21.436C61.248 21.163 61.287 21.069 61.125 20.762C60.279 19.163 59.326 17.527 58.435 15.958L53.592 7.329C53.355 6.915 52.677 5.599 52.216 5.513ZM96.18 26.494C96.963 25.713 97.12 24.502 96.563 23.547C96.005 22.592 94.872 22.133 93.807 22.432C92.972 22.666 92.324 23.327 92.108 24.167C91.892 25.007 92.14 25.899 92.758 26.507C93.396 27.134 94.327 27.361 95.182 27.096C95.558 26.98 95.901 26.773 96.18 26.494ZM87.871 10.399C89.147 10.087 89.941 8.813 89.659 7.529C89.377 6.246 88.122 5.422 86.832 5.673C85.97 5.841 85.266 6.463 84.994 7.298C84.722 8.133 84.923 9.05 85.52 9.694C86.118 10.339 87.017 10.608 87.871 10.399ZM91.505 40.879C90.185 41.122 89.31 42.388 89.55 43.709C89.791 45.03 91.055 45.907 92.377 45.669C93.22 45.517 93.921 44.933 94.223 44.131C94.525 43.329 94.383 42.428 93.85 41.758C93.29 41.055 92.389 40.717 91.505 40.879ZM9.138 29.557C9.005 28.88 8.592 28.292 8.001 27.937C7.409 27.583 6.696 27.495 6.036 27.697C5.665 27.81 5.326 28.011 5.048 28.282C4.24 29.07 4.079 30.31 4.66 31.278C5.241 32.247 6.411 32.688 7.487 32.346C8.666 31.97 9.376 30.771 9.138 29.557Z", fill: "currentColor" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "syntro-fab-clip", children: _jsx("rect", { width: "101", height: "63", fill: "white" }) }) })] }));
|
|
14
14
|
}
|
|
15
15
|
// =============================================================================
|
|
16
16
|
// Draggable FAB
|
|
@@ -76,7 +76,7 @@ function DraggableFab({ isOpen, onToggle, initialRight, zIndex, portalTarget })
|
|
|
76
76
|
onToggle();
|
|
77
77
|
}
|
|
78
78
|
}, [onToggle]);
|
|
79
|
-
return createPortal(_jsx("div", { className: "syntro-editor-scope", style: { display: 'contents' }, children: _jsx("button", { "data-syntro-fab": true, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, style: {
|
|
79
|
+
return createPortal(_jsx("div", { className: "syntro-editor-scope", "data-syntro-editor-ui": "fab-wrapper", style: { display: 'contents' }, children: _jsx("button", { type: "button", "data-syntro-fab": true, "data-syntro-editor-ui": "fab", onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, style: {
|
|
80
80
|
position: 'fixed',
|
|
81
81
|
left: pos.x,
|
|
82
82
|
top: pos.y,
|
|
@@ -106,11 +106,11 @@ function DraggableFab({ isOpen, onToggle, initialRight, zIndex, portalTarget })
|
|
|
106
106
|
export function EditorPanelShell({ isOpen, onToggle, position = 'right', panelId, zIndex = 2147483647, portalTarget, children, }) {
|
|
107
107
|
const isRight = position === 'right';
|
|
108
108
|
const resolvedPortalTarget = portalTarget ?? (typeof document !== 'undefined' ? document.body : null);
|
|
109
|
-
return (_jsxs(_Fragment, { children: [resolvedPortalTarget && (_jsx(DraggableFab, { isOpen: isOpen, onToggle: onToggle, initialRight: isRight, zIndex: zIndex + 1, portalTarget: resolvedPortalTarget })), isOpen && (_jsx("div", { ...(panelId ? { id: panelId } : {}), "data-syntro-editor-panel": true, className: cn('syntro-editor-scope se-fixed se-top-0 se-w-[390px] se-h-screen se-flex se-flex-col se-text-text-primary se-backdrop-blur-xl se-font-sans', isRight
|
|
109
|
+
return (_jsxs(_Fragment, { children: [resolvedPortalTarget && (_jsx(DraggableFab, { isOpen: isOpen, onToggle: onToggle, initialRight: isRight, zIndex: zIndex + 1, portalTarget: resolvedPortalTarget })), isOpen && (_jsx("div", { ...(panelId ? { id: panelId } : {}), "data-syntro-editor-panel": true, "data-syntro-editor-ui": "panel", className: cn('syntro-editor-scope se-fixed se-top-0 se-w-[390px] se-h-screen se-flex se-flex-col se-text-text-primary se-backdrop-blur-xl se-font-sans se-antialiased', isRight
|
|
110
110
|
? 'se-right-0 se-border-l se-border-border-primary'
|
|
111
111
|
: 'se-left-0 se-border-r se-border-border-primary'), style: {
|
|
112
112
|
zIndex,
|
|
113
|
-
background: 'linear-gradient(160deg, rgba(7,8,10,0.
|
|
113
|
+
background: 'linear-gradient(160deg, rgba(7,8,10,0.84) 0%, rgba(14,17,20,0.88) 45%, rgba(15,19,24,0.84) 100%)',
|
|
114
114
|
boxShadow: isRight ? '-20px 0 60px rgba(0,0,0,0.5)' : '20px 0 60px rgba(0,0,0,0.5)',
|
|
115
115
|
}, children: children }))] }));
|
|
116
116
|
}
|
|
@@ -3,6 +3,6 @@ interface EditorSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement
|
|
|
3
3
|
label?: string;
|
|
4
4
|
className?: string;
|
|
5
5
|
}
|
|
6
|
-
export declare function EditorSelect({ label, className, children, ...props }: EditorSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare function EditorSelect({ label, className, children, id, ...props }: EditorSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
8
8
|
//# sourceMappingURL=EditorSelect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorSelect.d.ts","sourceRoot":"","sources":["../../src/components/EditorSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"EditorSelect.d.ts","sourceRoot":"","sources":["../../src/components/EditorSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,iBAAkB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CA2B3F"}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useId } from 'react';
|
|
2
3
|
import { cn } from '../cn';
|
|
3
|
-
export function EditorSelect({ label, className, children, ...props }) {
|
|
4
|
-
|
|
4
|
+
export function EditorSelect({ label, className, children, id, ...props }) {
|
|
5
|
+
const generatedId = useId();
|
|
6
|
+
const selectId = id || generatedId;
|
|
7
|
+
return (_jsxs("div", { children: [label && (_jsx("label", { htmlFor: selectId, className: "se-text-sm se-font-medium se-text-input-field-text-label se-mb-1 se-block", children: label })), _jsx("select", { id: selectId, ...props, className: cn('se-w-full se-py-2 se-px-3 se-rounded-lg se-border se-border-input-field-border se-bg-slate-grey-3 se-text-text-primary se-text-sm se-mb-2', 'focus:se-border-input-field-border-selected focus:se-outline-none focus:se-shadow-focus-primary', 'disabled:se-bg-input-field-bg-disabled disabled:se-cursor-not-allowed disabled:se-opacity-50', className), children: children })] }));
|
|
5
8
|
}
|
|
@@ -3,6 +3,6 @@ interface EditorTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaE
|
|
|
3
3
|
label?: string;
|
|
4
4
|
className?: string;
|
|
5
5
|
}
|
|
6
|
-
export declare function EditorTextarea({ label, className, value, ...props }: EditorTextareaProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare function EditorTextarea({ label, className, value, id, ...props }: EditorTextareaProps): import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export {};
|
|
8
8
|
//# sourceMappingURL=EditorTextarea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditorTextarea.d.ts","sourceRoot":"","sources":["../../src/components/EditorTextarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,mBAAoB,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,
|
|
1
|
+
{"version":3,"file":"EditorTextarea.d.ts","sourceRoot":"","sources":["../../src/components/EditorTextarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,UAAU,mBAAoB,SAAQ,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC;IACrF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAsC5F"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useRef } from 'react';
|
|
2
|
+
import { useEffect, useId, useRef } from 'react';
|
|
3
3
|
import { cn } from '../cn';
|
|
4
|
-
export function EditorTextarea({ label, className, value, ...props }) {
|
|
4
|
+
export function EditorTextarea({ label, className, value, id, ...props }) {
|
|
5
5
|
const ref = useRef(null);
|
|
6
|
+
const generatedId = useId();
|
|
7
|
+
const textareaId = id || generatedId;
|
|
6
8
|
// Auto-resize to fit content
|
|
7
9
|
useEffect(() => {
|
|
8
10
|
const el = ref.current;
|
|
@@ -10,6 +12,6 @@ export function EditorTextarea({ label, className, value, ...props }) {
|
|
|
10
12
|
return;
|
|
11
13
|
el.style.height = 'auto';
|
|
12
14
|
el.style.height = `${el.scrollHeight}px`;
|
|
13
|
-
}, [
|
|
14
|
-
return (_jsxs("div", { children: [label && (_jsx("label", { className: "se-text-sm se-font-medium se-text-input-field-text-label se-mb-1 se-block", children: label })), _jsx("textarea", { ref: ref, value: value, ...props, className: cn('se-w-full se-py-2 se-px-3 se-rounded-lg se-border se-border-input-field-border se-bg-slate-grey-3 se-text-text-primary se-text-sm se-font-[inherit] se-mb-2 se-resize-y se-min-h-[60px] se-max-h-[50vh] se-overflow-y-auto se-box-border', 'placeholder:se-text-input-field-text-placeholder', 'focus:se-border-input-field-border-selected focus:se-outline-none focus:se-shadow-focus-primary', 'disabled:se-bg-input-field-bg-disabled disabled:se-cursor-not-allowed disabled:se-opacity-50', className) })] }));
|
|
15
|
+
}, []);
|
|
16
|
+
return (_jsxs("div", { children: [label && (_jsx("label", { htmlFor: textareaId, className: "se-text-sm se-font-medium se-text-input-field-text-label se-mb-1 se-block", children: label })), _jsx("textarea", { id: textareaId, ref: ref, value: value, ...props, className: cn('se-w-full se-py-2 se-px-3 se-rounded-lg se-border se-border-input-field-border se-bg-slate-grey-3 se-text-text-primary se-text-sm se-font-[inherit] se-mb-2 se-resize-y se-min-h-[60px] se-max-h-[50vh] se-overflow-y-auto se-box-border', 'placeholder:se-text-input-field-text-placeholder', 'focus:se-border-input-field-border-selected focus:se-outline-none focus:se-shadow-focus-primary', 'disabled:se-bg-input-field-bg-disabled disabled:se-cursor-not-allowed disabled:se-opacity-50', className) })] }));
|
|
15
17
|
}
|
package/node_modules/@syntrologie/shared-editor-ui/dist/components/ElementHighlight.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElementHighlight.d.ts","sourceRoot":"","sources":["../../src/components/ElementHighlight.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,OAAuB,EACvB,WAAqB,EACrB,WAAe,EACf,KAAK,EACL,SAAS,EACT,UAAU,EACV,QAAQ,EACR,OAAO,EACP,MAAmB,EACnB,OAAW,EACX,cAAc,EACd,SAAS,GACV,EAAE,qBAAqB,
|
|
1
|
+
{"version":3,"file":"ElementHighlight.d.ts","sourceRoot":"","sources":["../../src/components/ElementHighlight.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,qBAAqB;IACpC,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,KAAK,EACL,OAAuB,EACvB,WAAqB,EACrB,WAAe,EACf,KAAK,EACL,SAAS,EACT,UAAU,EACV,QAAQ,EACR,OAAO,EACP,MAAmB,EACnB,OAAW,EACX,cAAc,EACd,SAAS,GACV,EAAE,qBAAqB,4BA4HvB"}
|
|
@@ -17,11 +17,23 @@ export function ElementHighlight({ element, color, bgColor = 'transparent', bord
|
|
|
17
17
|
})()
|
|
18
18
|
: null;
|
|
19
19
|
const displayLabel = label || dimensionsLabel;
|
|
20
|
-
return createPortal(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
return createPortal(
|
|
21
|
+
// biome-ignore lint/a11y/noStaticElementInteractions: overlay highlight element is conditionally interactive based on onClick prop
|
|
22
|
+
_jsx("div", { "data-syntro-highlight": true, "data-syntro-editor-ui": "highlight", className: className, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, onClick: onClick
|
|
23
|
+
? (e) => {
|
|
24
|
+
e.stopPropagation();
|
|
25
|
+
e.preventDefault();
|
|
26
|
+
onClick();
|
|
27
|
+
}
|
|
28
|
+
: undefined, onKeyDown: onClick
|
|
29
|
+
? (e) => {
|
|
30
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
31
|
+
e.stopPropagation();
|
|
32
|
+
e.preventDefault();
|
|
33
|
+
onClick();
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
: undefined, style: {
|
|
25
37
|
position: 'fixed',
|
|
26
38
|
top: rect.top - padding,
|
|
27
39
|
left: rect.left - padding,
|
|
@@ -35,7 +47,7 @@ export function ElementHighlight({ element, color, bgColor = 'transparent', bord
|
|
|
35
47
|
cursor: onClick ? 'pointer' : 'default',
|
|
36
48
|
transition: 'all 0.05s ease-out',
|
|
37
49
|
boxSizing: 'border-box',
|
|
38
|
-
}, children: displayLabel && (_jsxs("div", { "data-syntro-highlight-label": true, style: {
|
|
50
|
+
}, children: displayLabel && (_jsxs("div", { "data-syntro-highlight-label": true, "data-syntro-editor-ui": "highlight-label", style: {
|
|
39
51
|
position: 'absolute',
|
|
40
52
|
top: '-22px',
|
|
41
53
|
left: 0,
|
|
@@ -43,7 +55,7 @@ export function ElementHighlight({ element, color, bgColor = 'transparent', bord
|
|
|
43
55
|
? `${color.replace(')', ',0.85)').replace('rgb(', 'rgba(')}`
|
|
44
56
|
: color,
|
|
45
57
|
color: '#fff',
|
|
46
|
-
fontSize: showDimensions ? '
|
|
58
|
+
fontSize: showDimensions ? '11px' : '12px',
|
|
47
59
|
fontWeight: 600,
|
|
48
60
|
fontFamily: showDimensions ? 'monospace' : 'inherit',
|
|
49
61
|
padding: '1px 6px',
|
|
@@ -53,18 +65,18 @@ export function ElementHighlight({ element, color, bgColor = 'transparent', bord
|
|
|
53
65
|
alignItems: 'center',
|
|
54
66
|
gap: '6px',
|
|
55
67
|
pointerEvents: 'auto',
|
|
56
|
-
}, children: [labelIcon, displayLabel, showRemove && onRemove && (_jsx("button", { "data-syntro-highlight-remove": true, onClick: (e) => {
|
|
68
|
+
}, children: [labelIcon, displayLabel, showRemove && onRemove && (_jsx("button", { type: "button", "data-syntro-highlight-remove": true, "data-syntro-editor-ui": "highlight-remove", onClick: (e) => {
|
|
57
69
|
e.stopPropagation();
|
|
58
70
|
e.preventDefault();
|
|
59
71
|
onRemove();
|
|
60
72
|
}, style: {
|
|
61
|
-
background: 'rgba(0,0,0,0.
|
|
73
|
+
background: 'rgba(0,0,0,0.4)',
|
|
62
74
|
border: 'none',
|
|
63
75
|
color: '#fff',
|
|
64
76
|
borderRadius: '50%',
|
|
65
|
-
width: '
|
|
66
|
-
height: '
|
|
67
|
-
fontSize: '
|
|
77
|
+
width: '16px',
|
|
78
|
+
height: '16px',
|
|
79
|
+
fontSize: '12px',
|
|
68
80
|
cursor: 'pointer',
|
|
69
81
|
display: 'flex',
|
|
70
82
|
alignItems: 'center',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TriggerJourney.d.ts","sourceRoot":"","sources":["../../src/components/TriggerJourney.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;
|
|
1
|
+
{"version":3,"file":"TriggerJourney.d.ts","sourceRoot":"","sources":["../../src/components/TriggerJourney.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,KAAK,EAAmB,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAE7E,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,cAAc,GAAG,IAAI,CAAC;CAC/B;AA4FD,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CA+B7D"}
|