@omega-flow/editor 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/LICENSE +21 -0
  2. package/dist/index.cjs +3133 -0
  3. package/dist/index.d.cts +875 -0
  4. package/dist/index.d.mts +552 -0
  5. package/dist/index.d.ts +875 -0
  6. package/dist/index.js +3061 -0
  7. package/dist/index.mjs +1919 -0
  8. package/dist/styles.css +147 -0
  9. package/dist/themes/dark.css +69 -0
  10. package/dist/themes/light.css +50 -0
  11. package/package.json +57 -0
package/dist/styles.css ADDED
@@ -0,0 +1,147 @@
1
+ /**
2
+ * Omega Flow Editor - CSS Custom Properties
3
+ *
4
+ * These variables can be overridden to customize the editor appearance.
5
+ * All variables use the --of- prefix (Omega Flow) to avoid collisions.
6
+ */
7
+
8
+ :root,
9
+ .omega-flow-editor,
10
+ [data-omega-flow-theme] {
11
+ /* ============================================
12
+ * COLOR PALETTE
13
+ * ============================================ */
14
+
15
+ /* Background colors */
16
+ --of-color-bg-primary: #fff;
17
+ --of-color-bg-secondary: #F9FAFB;
18
+ --of-color-bg-tertiary: #F3F4F6;
19
+ --of-color-bg-disabled: #F3F4F6;
20
+
21
+ /* Text colors */
22
+ --of-color-text-primary: #111827;
23
+ --of-color-text-secondary: #374151;
24
+ --of-color-text-tertiary: #6B7280;
25
+ --of-color-text-muted: #9CA3AF;
26
+ --of-color-text-inverse: #fff;
27
+
28
+ /* Border colors */
29
+ --of-color-border-primary: #D1D5DB;
30
+ --of-color-border-secondary: #E5E7EB;
31
+ --of-color-border-focus: #3B82F6;
32
+
33
+ /* Interactive colors */
34
+ --of-color-interactive-primary: #3B82F6;
35
+ --of-color-interactive-primary-hover: #2563EB;
36
+ --of-color-interactive-primary-disabled: #93C5FD;
37
+
38
+ /* Status colors */
39
+ --of-color-status-success: #059669;
40
+ --of-color-status-error: #DC2626;
41
+ --of-color-status-error-bg: #FEE2E2;
42
+ --of-color-status-warning: #FF9800;
43
+
44
+ /* ============================================
45
+ * NODE COLORS
46
+ * ============================================ */
47
+
48
+ --of-node-trigger-color: #4CAF50;
49
+ --of-node-action-color: #2196F3;
50
+ --of-node-condition-color: #FF9800;
51
+ --of-node-exit-color: #F44336;
52
+ --of-node-wait-color: #9C27B0;
53
+ --of-node-trigger-timeout-color: #607D8B;
54
+
55
+ /* Node common styling */
56
+ --of-node-bg: var(--of-color-bg-primary);
57
+ --of-node-content-color: #666;
58
+ --of-node-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
59
+
60
+ /* ============================================
61
+ * SPACING
62
+ * ============================================ */
63
+
64
+ --of-spacing-1: 4px;
65
+ --of-spacing-2: 6px;
66
+ --of-spacing-3: 8px;
67
+ --of-spacing-4: 10px;
68
+ --of-spacing-5: 12px;
69
+ --of-spacing-6: 16px;
70
+ --of-spacing-7: 20px;
71
+
72
+ /* ============================================
73
+ * TYPOGRAPHY
74
+ * ============================================ */
75
+
76
+ /* Font sizes */
77
+ --of-font-size-xs: 11px;
78
+ --of-font-size-sm: 12px;
79
+ --of-font-size-md: 13px;
80
+ --of-font-size-lg: 14px;
81
+
82
+ /* Font weights */
83
+ --of-font-weight-normal: 400;
84
+ --of-font-weight-medium: 500;
85
+ --of-font-weight-semibold: 600;
86
+
87
+ /* Font family */
88
+ --of-font-family-base: system-ui, sans-serif;
89
+ --of-font-family-mono: monospace;
90
+
91
+ /* ============================================
92
+ * BORDER RADIUS
93
+ * ============================================ */
94
+
95
+ --of-radius-sm: 4px;
96
+ --of-radius-md: 6px;
97
+ --of-radius-lg: 8px;
98
+
99
+ /* ============================================
100
+ * SHADOWS
101
+ * ============================================ */
102
+
103
+ --of-shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.1);
104
+ --of-shadow-node: 0 2px 4px rgba(0, 0, 0, 0.1);
105
+
106
+ /* ============================================
107
+ * TRANSITIONS
108
+ * ============================================ */
109
+
110
+ --of-transition-fast: 0.15s;
111
+ --of-transition-normal: 0.2s;
112
+
113
+ /* ============================================
114
+ * COMPONENT-SPECIFIC VARIABLES
115
+ * ============================================ */
116
+
117
+ /* Panel */
118
+ --of-panel-bg: var(--of-color-bg-primary);
119
+ --of-panel-shadow: var(--of-shadow-panel);
120
+ --of-panel-radius: var(--of-radius-lg);
121
+ --of-panel-padding: var(--of-spacing-5);
122
+ --of-panel-title-color: var(--of-color-text-secondary);
123
+ --of-panel-title-size: var(--of-font-size-sm);
124
+
125
+ /* Field */
126
+ --of-field-bg: var(--of-color-bg-primary);
127
+ --of-field-border: var(--of-color-border-primary);
128
+ --of-field-border-focus: var(--of-color-border-focus);
129
+ --of-field-border-error: var(--of-color-status-error);
130
+ --of-field-radius: var(--of-radius-md);
131
+ --of-field-padding: 8px 10px;
132
+ --of-field-font-size: var(--of-font-size-md);
133
+ --of-field-label-color: var(--of-color-text-secondary);
134
+ --of-field-label-size: var(--of-font-size-sm);
135
+ --of-field-hint-color: var(--of-color-text-tertiary);
136
+ --of-field-error-color: var(--of-color-status-error);
137
+
138
+ /* Button */
139
+ --of-button-primary-bg: var(--of-color-interactive-primary);
140
+ --of-button-primary-color: var(--of-color-text-inverse);
141
+ --of-button-primary-bg-hover: var(--of-color-interactive-primary-hover);
142
+ --of-button-primary-bg-disabled: var(--of-color-interactive-primary-disabled);
143
+ --of-button-danger-bg: var(--of-color-status-error-bg);
144
+ --of-button-danger-color: var(--of-color-status-error);
145
+ --of-button-radius: var(--of-radius-md);
146
+ --of-button-padding: 8px 16px;
147
+ }
package/dist/themes/dark.css ADDED
@@ -0,0 +1,69 @@
1
+ /**
2
+ * Omega Flow Editor - Dark Theme
3
+ *
4
+ * Usage:
5
+ * 1. Import both styles.css and this file
6
+ * 2. Add data-omega-flow-theme="dark" or class="omega-flow-theme-dark"
7
+ * to a wrapper element (use <html> for global dark mode)
8
+ *
9
+ * Example (global): document.documentElement.setAttribute('data-omega-flow-theme', 'dark')
10
+ * Example (scoped): <div data-omega-flow-theme="dark">...</div>
11
+ */
12
+
13
+ [data-omega-flow-theme="dark"],
14
+ .omega-flow-theme-dark {
15
+ /* Background colors */
16
+ --of-color-bg-primary: #1F2937;
17
+ --of-color-bg-secondary: #111827;
18
+ --of-color-bg-tertiary: #374151;
19
+ --of-color-bg-disabled: #374151;
20
+
21
+ /* Text colors */
22
+ --of-color-text-primary: #F9FAFB;
23
+ --of-color-text-secondary: #E5E7EB;
24
+ --of-color-text-tertiary: #9CA3AF;
25
+ --of-color-text-muted: #6B7280;
26
+ --of-color-text-inverse: #111827;
27
+
28
+ /* Border colors */
29
+ --of-color-border-primary: #4B5563;
30
+ --of-color-border-secondary: #374151;
31
+ --of-color-border-focus: #60A5FA;
32
+
33
+ /* Interactive colors */
34
+ --of-color-interactive-primary: #3B82F6;
35
+ --of-color-interactive-primary-hover: #60A5FA;
36
+ --of-color-interactive-primary-disabled: #1E40AF;
37
+
38
+ /* Status colors */
39
+ --of-color-status-success: #10B981;
40
+ --of-color-status-error: #EF4444;
41
+ --of-color-status-error-bg: #7F1D1D;
42
+ --of-color-status-warning: #F59E0B;
43
+
44
+ /* Node colors - slightly adjusted for dark mode visibility */
45
+ --of-node-trigger-color: #4ADE80;
46
+ --of-node-action-color: #60A5FA;
47
+ --of-node-condition-color: #FBBF24;
48
+ --of-node-exit-color: #F87171;
49
+ --of-node-wait-color: #C084FC;
50
+ --of-node-trigger-timeout-color: #94A3B8;
51
+
52
+ /* Node common */
53
+ --of-node-bg: #374151;
54
+ --of-node-content-color: #9CA3AF;
55
+
56
+ /* Shadows adjusted for dark mode */
57
+ --of-shadow-panel: 0 2px 8px rgba(0, 0, 0, 0.3);
58
+ --of-shadow-node: 0 2px 4px rgba(0, 0, 0, 0.3);
59
+
60
+ /* Panel overrides */
61
+ --of-panel-bg: #1F2937;
62
+ --of-panel-title-color: #E5E7EB;
63
+
64
+ /* Field overrides */
65
+ --of-field-bg: #374151;
66
+ --of-field-border: #4B5563;
67
+ --of-field-label-color: #E5E7EB;
68
+ --of-field-hint-color: #9CA3AF;
69
+ }
package/dist/themes/light.css ADDED
@@ -0,0 +1,50 @@
1
+ /**
2
+ * Omega Flow Editor - Light Theme
3
+ *
4
+ * This is the default theme that matches the original hardcoded styling.
5
+ * Import this file for explicit light theme support.
6
+ */
7
+
8
+ [data-omega-flow-theme="light"],
9
+ .omega-flow-theme-light {
10
+ /* Background colors */
11
+ --of-color-bg-primary: #fff;
12
+ --of-color-bg-secondary: #F9FAFB;
13
+ --of-color-bg-tertiary: #F3F4F6;
14
+ --of-color-bg-disabled: #F3F4F6;
15
+
16
+ /* Text colors */
17
+ --of-color-text-primary: #111827;
18
+ --of-color-text-secondary: #374151;
19
+ --of-color-text-tertiary: #6B7280;
20
+ --of-color-text-muted: #9CA3AF;
21
+ --of-color-text-inverse: #fff;
22
+
23
+ /* Border colors */
24
+ --of-color-border-primary: #D1D5DB;
25
+ --of-color-border-secondary: #E5E7EB;
26
+ --of-color-border-focus: #3B82F6;
27
+
28
+ /* Interactive colors */
29
+ --of-color-interactive-primary: #3B82F6;
30
+ --of-color-interactive-primary-hover: #2563EB;
31
+ --of-color-interactive-primary-disabled: #93C5FD;
32
+
33
+ /* Status colors */
34
+ --of-color-status-success: #059669;
35
+ --of-color-status-error: #DC2626;
36
+ --of-color-status-error-bg: #FEE2E2;
37
+ --of-color-status-warning: #FF9800;
38
+
39
+ /* Node colors */
40
+ --of-node-trigger-color: #4CAF50;
41
+ --of-node-action-color: #2196F3;
42
+ --of-node-condition-color: #FF9800;
43
+ --of-node-exit-color: #F44336;
44
+ --of-node-wait-color: #9C27B0;
45
+ --of-node-trigger-timeout-color: #607D8B;
46
+
47
+ /* Node common */
48
+ --of-node-bg: #fff;
49
+ --of-node-content-color: #666;
50
+ }
package/package.json ADDED
@@ -0,0 +1,57 @@
1
+ {
2
+ "name": "@omega-flow/editor",
3
+ "version": "0.1.0",
4
+ "description": "Workflow editor components for Omega Flow",
5
+ "type": "module",
6
+ "main": "dist/index.cjs",
7
+ "module": "dist/index.js",
8
+ "types": "dist/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "types": "./dist/index.d.ts",
12
+ "import": "./dist/index.js",
13
+ "require": "./dist/index.cjs"
14
+ },
15
+ "./styles.css": "./dist/styles.css",
16
+ "./themes/light.css": "./dist/themes/light.css",
17
+ "./themes/dark.css": "./dist/themes/dark.css"
18
+ },
19
+ "license": "MIT",
20
+ "repository": {
21
+ "type": "git",
22
+ "url": "https://github.com/omega-flow/omega-flow.git",
23
+ "directory": "packages/editor"
24
+ },
25
+ "homepage": "https://omega-flow.github.io/omega-flow/",
26
+ "bugs": "https://github.com/omega-flow/omega-flow/issues",
27
+ "publishConfig": {
28
+ "access": "public"
29
+ },
30
+ "files": [
31
+ "dist"
32
+ ],
33
+ "peerDependencies": {
34
+ "@xyflow/react": "^12.0.0",
35
+ "react": "^18.0.0 || ^19.0.0",
36
+ "react-dom": "^18.0.0 || ^19.0.0"
37
+ },
38
+ "dependencies": {
39
+ "@omega-flow/types": "0.1.0"
40
+ },
41
+ "devDependencies": {
42
+ "@types/react": "^19.2.13",
43
+ "@types/react-dom": "^19.2.3",
44
+ "@xyflow/react": "^12.10.0",
45
+ "react": "^19.2.4",
46
+ "react-dom": "^19.2.4",
47
+ "tsup": "^8.5.1",
48
+ "typescript": "^5.9.3"
49
+ },
50
+ "scripts": {
51
+ "build": "tsup src/index.ts --format cjs,esm --dts --external react --external react-dom --external @xyflow/react && pnpm build:css",
52
+ "build:css": "mkdir -p dist/themes && cp src/styles/variables.css dist/styles.css && cp src/styles/themes/*.css dist/themes/",
53
+ "dev": "tsup src/index.ts --format cjs,esm --dts --watch --external react --external react-dom --external @xyflow/react",
54
+ "test": "jest --passWithNoTests",
55
+ "test:coverage": "jest --coverage --passWithNoTests"
56
+ }
57
+ }