@motiadev/workbench 0.2.1-beta.42 → 0.2.1-beta.44

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.
@@ -1,26 +1,31 @@
1
- import fs from 'fs';
2
- import path from 'path';
3
- import { createServer as createViteServer } from 'vite';
4
- import react from '@vitejs/plugin-react';
5
- import tailwindcssPostcss from '@tailwindcss/postcss';
6
- export const applyMiddleware = async (app) => {
7
- const vite = await createViteServer({
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.applyMiddleware = void 0;
7
+ const autoprefixer_1 = __importDefault(require("autoprefixer"));
8
+ const fs_1 = __importDefault(require("fs"));
9
+ const path_1 = __importDefault(require("path"));
10
+ const tailwindcss_1 = __importDefault(require("tailwindcss"));
11
+ const vite_1 = require("vite");
12
+ const tailwind_config_1 = __importDefault(require("./tailwind.config"));
13
+ const applyMiddleware = async (app) => {
14
+ const vite = await (0, vite_1.createServer)({
8
15
  appType: 'spa',
9
16
  root: __dirname,
10
17
  server: {
11
18
  middlewareMode: true,
12
- host: true,
13
19
  fs: {
14
- allow: [__dirname, path.join(process.cwd(), './steps')],
20
+ allow: [__dirname, path_1.default.join(process.cwd(), './steps')],
15
21
  },
16
22
  },
17
23
  resolve: {
18
- alias: { '@': path.resolve(__dirname, './src') },
24
+ alias: { '@': path_1.default.resolve(__dirname, './src') },
19
25
  },
20
- plugins: [react()],
21
26
  css: {
22
27
  postcss: {
23
- plugins: [tailwindcssPostcss({ base: path.join(__dirname, './src') })],
28
+ plugins: [(0, autoprefixer_1.default)(), (0, tailwindcss_1.default)(tailwind_config_1.default)],
24
29
  },
25
30
  },
26
31
  });
@@ -29,7 +34,7 @@ export const applyMiddleware = async (app) => {
29
34
  const url = req.originalUrl;
30
35
  console.log('[UI] Request', { url });
31
36
  try {
32
- const index = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
37
+ const index = fs_1.default.readFileSync(path_1.default.resolve(__dirname, 'index.html'), 'utf-8');
33
38
  const html = await vite.transformIndexHtml(url, index);
34
39
  res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
35
40
  }
@@ -38,3 +43,4 @@ export const applyMiddleware = async (app) => {
38
43
  }
39
44
  });
40
45
  };
46
+ exports.applyMiddleware = applyMiddleware;
@@ -0,0 +1,6 @@
1
+ module.exports = {
2
+ plugins: {
3
+ tailwindcss: {},
4
+ autoprefixer: {},
5
+ },
6
+ }
@@ -1,11 +1,11 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useState } from 'react';
3
- import { cn } from '@/lib/utils';
3
+ import { cn } from '../../lib/utils';
4
4
  import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
5
5
  import { Button } from './button';
6
6
  export const Sidebar = ({ children }) => {
7
7
  const [isCollapsed, setIsCollapsed] = useState(false);
8
- return (_jsxs("div", { className: cn('max-h-screen overflow-y-auto transition-[width] duration-300 border-r border-zinc-800 border-solid overflow-hidden', isCollapsed ? 'w-[50px]' : 'w-[250px]'), children: [_jsx("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? _jsx(PanelLeftOpen, { className: "w-4 h-4" }) : _jsx(PanelLeftClose, { className: "w-4 h-4" }) }) }), !isCollapsed && _jsx("div", { className: "overflow-y-auto w-[250px]", children: children })] }));
8
+ return (_jsxs("div", { className: cn('max-h-screen overflow-y-auto transition-[width] duration-300 border-r border-zinc-800 border-solid', isCollapsed ? 'w-[50px]' : 'w-[250px]'), children: [_jsx("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: _jsx(Button, { variant: "ghost", size: "icon", onClick: () => setIsCollapsed(!isCollapsed), children: isCollapsed ? _jsx(PanelLeftOpen, { className: "w-4 h-4" }) : _jsx(PanelLeftClose, { className: "w-4 h-4" }) }) }), !isCollapsed && _jsx("div", { className: "overflow-y-auto w-[250px]", children: children })] }));
9
9
  };
10
10
  export const SidebarGroup = ({ children, title }) => {
11
11
  return (_jsxs("div", { className: "flex flex-col", children: [_jsx("h2", { className: "text-xs font-bold text-muted-foreground px-4 py-2 uppercase", children: title }), children] }));
@@ -1,126 +1,154 @@
1
- @import 'tailwindcss';
2
- @import 'tw-animate-css';
3
- @config "../tailwind.config.js";
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
4
 
5
- @custom-variant dark (&:is(.dark *));
5
+ html,
6
+ body,
7
+ div,
8
+ span,
9
+ applet,
10
+ object,
11
+ iframe,
12
+ h1,
13
+ h2,
14
+ h3,
15
+ h4,
16
+ h5,
17
+ h6,
18
+ p,
19
+ blockquote,
20
+ pre,
21
+ a,
22
+ abbr,
23
+ acronym,
24
+ address,
25
+ big,
26
+ cite,
27
+ code,
28
+ del,
29
+ dfn,
30
+ em,
31
+ img,
32
+ ins,
33
+ kbd,
34
+ q,
35
+ s,
36
+ samp,
37
+ small,
38
+ strike,
39
+ strong,
40
+ sub,
41
+ sup,
42
+ tt,
43
+ var,
44
+ b,
45
+ u,
46
+ i,
47
+ center,
48
+ dl,
49
+ dt,
50
+ dd,
51
+ ol,
52
+ ul,
53
+ li,
54
+ fieldset,
55
+ form,
56
+ label,
57
+ legend,
58
+ table,
59
+ caption,
60
+ tbody,
61
+ tfoot,
62
+ thead,
63
+ tr,
64
+ th,
65
+ td,
66
+ article,
67
+ aside,
68
+ canvas,
69
+ details,
70
+ embed,
71
+ figure,
72
+ figcaption,
73
+ footer,
74
+ header,
75
+ hgroup,
76
+ menu,
77
+ nav,
78
+ output,
79
+ ruby,
80
+ section,
81
+ summary,
82
+ time,
83
+ mark,
84
+ audio,
85
+ video {
86
+ margin: 0;
87
+ padding: 0;
88
+ border: 0;
89
+ font: inherit;
90
+ vertical-align: baseline;
91
+ }
92
+
93
+ /* HTML5 display-role reset for older browsers */
94
+ article,
95
+ aside,
96
+ details,
97
+ figcaption,
98
+ figure,
99
+ footer,
100
+ header,
101
+ hgroup,
102
+ menu,
103
+ nav,
104
+ section {
105
+ display: block;
106
+ }
107
+ body {
108
+ line-height: 1;
109
+ }
110
+ ol,
111
+ ul {
112
+ list-style: none;
113
+ }
114
+ blockquote,
115
+ q {
116
+ quotes: none;
117
+ }
118
+ blockquote:before,
119
+ blockquote:after,
120
+ q:before,
121
+ q:after {
122
+ content: '';
123
+ content: none;
124
+ }
125
+ table {
126
+ border-collapse: collapse;
127
+ border-spacing: 0;
128
+ }
6
129
 
7
130
  :root {
131
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
8
132
  line-height: 1.5;
9
133
  font-size: 16px;
10
134
 
11
135
  color-scheme: light dark;
12
- font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"), serif;
136
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
13
137
  font-synthesis: none;
14
138
  text-rendering: optimizeLegibility;
15
139
  -webkit-font-smoothing: antialiased;
16
140
  -moz-osx-font-smoothing: grayscale;
141
+ }
142
+
143
+ :root {
17
144
  width: 100%;
145
+ color-scheme: light dark;
146
+ font-synthesis: none;
147
+ text-rendering: optimizeLegibility;
148
+ -webkit-font-smoothing: antialiased;
149
+ -moz-osx-font-smoothing: grayscale;
150
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
18
151
  font-optical-sizing: auto;
19
-
20
- --radius: 0.625rem;
21
- --background: oklch(1 0 0);
22
- --foreground: oklch(0.145 0 0);
23
- --card: oklch(0.98 0 0);
24
- --card-foreground: oklch(0.145 0 0);
25
- --popover: oklch(1 0 0);
26
- --popover-foreground: oklch(0.145 0 0);
27
- --primary: oklch(0.205 0 0);
28
- --primary-foreground: oklch(0.985 0 0);
29
- --secondary: oklch(0.97 0 0);
30
- --secondary-foreground: oklch(0.205 0 0);
31
- --muted: oklch(0.97 0 0);
32
- --muted-foreground: oklch(0.556 0 0);
33
- --accent: oklch(0.97 0 0);
34
- --accent-foreground: oklch(0.205 0 0);
35
- --destructive: oklch(0.577 0.245 27.325);
36
- --border: oklch(0.922 0 0);
37
- --input: oklch(0.922 0 0);
38
- --ring: oklch(0.708 0 0);
39
- --chart-1: oklch(0.646 0.222 41.116);
40
- --chart-2: oklch(0.6 0.118 184.704);
41
- --chart-3: oklch(0.398 0.07 227.392);
42
- --chart-4: oklch(0.828 0.189 84.429);
43
- --chart-5: oklch(0.769 0.188 70.08);
44
- --sidebar: oklch(0.985 0 0);
45
- --sidebar-foreground: oklch(0.145 0 0);
46
- --sidebar-primary: oklch(0.205 0 0);
47
- --sidebar-primary-foreground: oklch(0.985 0 0);
48
- --sidebar-accent: oklch(0.97 0 0);
49
- --sidebar-accent-foreground: oklch(0.205 0 0);
50
- --sidebar-border: oklch(0.922 0 0);
51
- --sidebar-ring: oklch(0.708 0 0);
52
- }
53
-
54
- .dark {
55
- --background: oklch(0.145 0 0);
56
- --foreground: oklch(0.985 0 0);
57
- --card: oklch(0.205 0 0);
58
- --card-foreground: oklch(0.985 0 0);
59
- --popover: oklch(0.205 0 0);
60
- --popover-foreground: oklch(0.985 0 0);
61
- --primary: oklch(0.922 0 0);
62
- --primary-foreground: oklch(0.205 0 0);
63
- --secondary: oklch(0.269 0 0);
64
- --secondary-foreground: oklch(0.985 0 0);
65
- --muted: oklch(0.269 0 0);
66
- --muted-foreground: oklch(0.708 0 0);
67
- --accent: oklch(0.269 0 0);
68
- --accent-foreground: oklch(0.985 0 0);
69
- --destructive: oklch(0.704 0.191 22.216);
70
- --border: oklch(1 0 0 / 10%);
71
- --input: oklch(1 0 0 / 15%);
72
- --ring: oklch(0.556 0 0);
73
- --chart-1: oklch(0.488 0.243 264.376);
74
- --chart-2: oklch(0.696 0.17 162.48);
75
- --chart-3: oklch(0.769 0.188 70.08);
76
- --chart-4: oklch(0.627 0.265 303.9);
77
- --chart-5: oklch(0.645 0.246 16.439);
78
- --sidebar: oklch(0.205 0 0);
79
- --sidebar-foreground: oklch(0.985 0 0);
80
- --sidebar-primary: oklch(0.488 0.243 264.376);
81
- --sidebar-primary-foreground: oklch(0.985 0 0);
82
- --sidebar-accent: oklch(0.269 0 0);
83
- --sidebar-accent-foreground: oklch(0.985 0 0);
84
- --sidebar-border: oklch(1 0 0 / 10%);
85
- --sidebar-ring: oklch(0.556 0 0);
86
- }
87
-
88
- @theme inline {
89
- --radius-sm: calc(var(--radius) - 4px);
90
- --radius-md: calc(var(--radius) - 2px);
91
- --radius-lg: var(--radius);
92
- --radius-xl: calc(var(--radius) + 4px);
93
- --color-background: var(--background);
94
- --color-foreground: var(--foreground);
95
- --color-card: var(--card);
96
- --color-card-foreground: var(--card-foreground);
97
- --color-popover: var(--popover);
98
- --color-popover-foreground: var(--popover-foreground);
99
- --color-primary: var(--primary);
100
- --color-primary-foreground: var(--primary-foreground);
101
- --color-secondary: var(--secondary);
102
- --color-secondary-foreground: var(--secondary-foreground);
103
- --color-muted: var(--muted);
104
- --color-muted-foreground: var(--muted-foreground);
105
- --color-accent: var(--accent);
106
- --color-accent-foreground: var(--accent-foreground);
107
- --color-destructive: var(--destructive);
108
- --color-border: var(--border);
109
- --color-input: var(--input);
110
- --color-ring: var(--ring);
111
- --color-chart-1: var(--chart-1);
112
- --color-chart-2: var(--chart-2);
113
- --color-chart-3: var(--chart-3);
114
- --color-chart-4: var(--chart-4);
115
- --color-chart-5: var(--chart-5);
116
- --color-sidebar: var(--sidebar);
117
- --color-sidebar-foreground: var(--sidebar-foreground);
118
- --color-sidebar-primary: var(--sidebar-primary);
119
- --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
120
- --color-sidebar-accent: var(--sidebar-accent);
121
- --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
122
- --color-sidebar-border: var(--sidebar-border);
123
- --color-sidebar-ring: var(--sidebar-ring);
124
152
  }
125
153
 
126
154
  body {
@@ -130,20 +158,110 @@ body {
130
158
  width: 100%;
131
159
  }
132
160
 
133
- body,
134
- #root {
135
- width: 100dvw;
136
- height: 100dvh;
161
+ button,
162
+ textarea {
163
+ font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
137
164
  }
138
165
 
139
166
  strong {
140
167
  font-weight: 800;
141
168
  }
142
169
 
170
+ body,
171
+ #root {
172
+ width: 100dvw;
173
+ height: 100dvh;
174
+ }
175
+
143
176
  .react-flow__attribution {
144
177
  display: none;
145
178
  }
146
179
 
180
+ @layer base {
181
+ :root {
182
+ --background: 0 0% 100%;
183
+ --foreground: 0 0% 4%;
184
+ --card: 0 0% 100%;
185
+ --card-foreground: 0 0% 4%;
186
+ --popover: 0 0% 100%;
187
+ --popover-foreground: 0 0% 4%;
188
+ --primary: 0 0% 11%;
189
+ --primary-foreground: 0 0% 98%;
190
+ --secondary: 0 0% 96%;
191
+ --secondary-foreground: 0 0% 11%;
192
+ --muted: 0 0% 96%;
193
+ --muted-foreground: 0 0% 46%;
194
+ --accent: 0 0% 96%;
195
+ --accent-foreground: 0 0% 11%;
196
+ --destructive: 0 0% 60%;
197
+ --destructive-foreground: 0 0% 98%;
198
+ --border: 0 0% 91%;
199
+ --input: 0 0% 91%;
200
+ --ring: 0 0% 4%;
201
+ --chart-1: 0 0% 70%;
202
+ --chart-2: 0 0% 55%;
203
+ --chart-3: 0 0% 40%;
204
+ --chart-4: 0 0% 25%;
205
+ --chart-5: 0 0% 10%;
206
+ --radius: 0.5rem;
207
+ --sidebar-background: 0 0% 98%;
208
+ --sidebar-foreground: 0 0% 26%;
209
+ --sidebar-primary: 0 0% 10%;
210
+ --sidebar-primary-foreground: 0 0% 98%;
211
+ --sidebar-accent: 0 0% 96%;
212
+ --sidebar-accent-foreground: 0 0% 10%;
213
+ --sidebar-border: 0 0% 91%;
214
+ --sidebar-ring: 0 0% 60%;
215
+ }
216
+ .dark {
217
+ --background: 0 0% 1%;
218
+ --border: 0 0% 18%;
219
+ --foreground: 0 0% 98%;
220
+ --card: 0 0% 4%;
221
+ --card-foreground: 0 0% 98%;
222
+ --popover: 0 0% 4%;
223
+ --popover-foreground: 0 0% 98%;
224
+ --primary: 0 0% 98%;
225
+ --primary-foreground: 0 0% 11%;
226
+ --secondary: 0 0% 17%;
227
+ --secondary-foreground: 0 0% 98%;
228
+ --muted: 0 0% 8%;
229
+ --muted-foreground: 0 0% 65%;
230
+ --accent: 0 0% 17%;
231
+ --accent-foreground: 0 0% 98%;
232
+ --destructive: 0 0% 31%;
233
+ --destructive-foreground: 0 0% 98%;
234
+ --input: 0 0% 17%;
235
+ --ring: 0 0% 84%;
236
+ --chart-1: 0 0% 80%;
237
+ --chart-2: 0 0% 65%;
238
+ --chart-3: 0 0% 50%;
239
+ --chart-4: 0 0% 35%;
240
+ --chart-5: 0 0% 20%;
241
+ --sidebar-background: 0 0% 10%;
242
+ --sidebar-foreground: 0 0% 96%;
243
+ --sidebar-primary: 0 0% 48%;
244
+ --sidebar-primary-foreground: 0 0% 100%;
245
+ --sidebar-accent: 0 0% 16%;
246
+ --sidebar-accent-foreground: 0 0% 96%;
247
+ --sidebar-border: 0 0% 16%;
248
+ --sidebar-ring: 0 0% 60%;
249
+ }
250
+
251
+ .text-md {
252
+ font-size: 14px;
253
+ }
254
+
255
+ .text-lg {
256
+ font-size: 16px !important;
257
+ }
258
+
259
+ * {
260
+ -webkit-font-smoothing: antialiased;
261
+ -moz-osx-font-smoothing: grayscale;
262
+ }
263
+ }
264
+
147
265
  @layer base {
148
266
  * {
149
267
  @apply border-border;
@@ -166,4 +284,25 @@ strong {
166
284
  stroke-dasharray: 5; /* length of dash pattern */
167
285
  stroke-linecap: round; /* round the dash ends */
168
286
  animation: flowDash 1s linear infinite;
169
- }
287
+ }
288
+
289
+ .resize-handle:hover {
290
+ background-color: rgba(74, 222, 128, 0.2);
291
+ }
292
+ .resize-handle.dragging {
293
+ background-color: rgba(74, 222, 128, 0.4);
294
+ }
295
+
296
+ .bg-muted {
297
+ background-color: rgba(120, 120, 120, 0.10);
298
+ }
299
+
300
+ .text-muted {
301
+ color: rgba(120, 120, 120, 0.5);
302
+ }
303
+
304
+ .text-muted-foreground {
305
+ color: rgba(255, 255, 255, 0.8);
306
+ }
307
+
308
+
@@ -0,0 +1,3 @@
1
+ import { Config } from 'tailwindcss';
2
+ declare const config: Config;
3
+ export default config;
@@ -1,9 +1,64 @@
1
- const path = require('path')
2
-
3
- module.exports = {
4
- content: [
5
- path.resolve(__dirname, './index.html'),
6
- path.resolve(__dirname, './src/**/*.{ts,tsx,js,jsx}'),
7
- path.resolve(process.cwd(), './steps/**/*.tsx'),
8
- ],
9
- }
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const path_1 = __importDefault(require("path"));
7
+ const tailwindcss_animate_1 = __importDefault(require("tailwindcss-animate"));
8
+ const config = {
9
+ darkMode: ['class'],
10
+ content: [
11
+ path_1.default.resolve(__dirname, './index.html'),
12
+ path_1.default.resolve(__dirname, './src/**/*.{ts,tsx,js,jsx}'),
13
+ path_1.default.resolve(process.cwd(), './steps/**/*.tsx'),
14
+ ],
15
+ theme: {
16
+ extend: {
17
+ borderRadius: {
18
+ lg: 'var(--radius)',
19
+ md: 'calc(var(--radius) - 2px)',
20
+ sm: 'calc(var(--radius) - 4px)',
21
+ },
22
+ colors: {
23
+ background: 'hsl(var(--background))',
24
+ foreground: 'hsl(var(--foreground))',
25
+ card: {
26
+ DEFAULT: 'hsl(var(--card))',
27
+ foreground: 'hsl(var(--card-foreground))',
28
+ },
29
+ popover: {
30
+ DEFAULT: 'hsl(var(--popover))',
31
+ foreground: 'hsl(var(--popover-foreground))',
32
+ },
33
+ primary: {
34
+ DEFAULT: 'hsl(var(--primary))',
35
+ foreground: 'hsl(var(--primary-foreground))',
36
+ },
37
+ secondary: {
38
+ DEFAULT: 'hsl(var(--secondary))',
39
+ foreground: 'hsl(var(--secondary-foreground))',
40
+ },
41
+ accent: {
42
+ DEFAULT: 'hsl(var(--accent))',
43
+ foreground: 'hsl(var(--accent-foreground))',
44
+ },
45
+ destructive: {
46
+ DEFAULT: 'hsl(var(--destructive))',
47
+ foreground: 'hsl(var(--destructive-foreground))',
48
+ },
49
+ border: 'hsl(var(--border))',
50
+ input: 'hsl(var(--input))',
51
+ ring: 'hsl(var(--ring))',
52
+ chart: {
53
+ '1': 'hsl(var(--chart-1))',
54
+ '2': 'hsl(var(--chart-2))',
55
+ '3': 'hsl(var(--chart-3))',
56
+ '4': 'hsl(var(--chart-4))',
57
+ '5': 'hsl(var(--chart-5))',
58
+ },
59
+ },
60
+ },
61
+ },
62
+ plugins: [tailwindcss_animate_1.default],
63
+ };
64
+ exports.default = config;