@motiadev/workbench 0.2.1-beta.35 → 0.2.1-beta.37

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,31 +1,26 @@
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)({
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({
15
8
  appType: 'spa',
16
9
  root: __dirname,
17
10
  server: {
18
11
  middlewareMode: true,
12
+ host: true,
19
13
  fs: {
20
- allow: [__dirname, path_1.default.join(process.cwd(), './steps')],
14
+ allow: [__dirname, path.join(process.cwd(), './steps')],
21
15
  },
22
16
  },
23
17
  resolve: {
24
- alias: { '@': path_1.default.resolve(__dirname, './src') },
18
+ alias: { '@': path.resolve(__dirname, './src') },
25
19
  },
20
+ plugins: [react()],
26
21
  css: {
27
22
  postcss: {
28
- plugins: [(0, autoprefixer_1.default)(), (0, tailwindcss_1.default)(tailwind_config_1.default)],
23
+ plugins: [tailwindcssPostcss({ base: path.join(__dirname, './src') })],
29
24
  },
30
25
  },
31
26
  });
@@ -34,7 +29,7 @@ const applyMiddleware = async (app) => {
34
29
  const url = req.originalUrl;
35
30
  console.log('[UI] Request', { url });
36
31
  try {
37
- const index = fs_1.default.readFileSync(path_1.default.resolve(__dirname, 'index.html'), 'utf-8');
32
+ const index = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8');
38
33
  const html = await vite.transformIndexHtml(url, index);
39
34
  res.status(200).set({ 'Content-Type': 'text/html' }).end(html);
40
35
  }
@@ -43,4 +38,3 @@ const applyMiddleware = async (app) => {
43
38
  }
44
39
  });
45
40
  };
46
- exports.applyMiddleware = applyMiddleware;
@@ -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', 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 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 })] }));
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,154 +1,126 @@
1
- @tailwind base;
2
- @tailwind components;
3
- @tailwind utilities;
1
+ @import 'tailwindcss';
2
+ @import 'tw-animate-css';
3
+ @config "../tailwind.config.js";
4
4
 
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
- }
5
+ @custom-variant dark (&:is(.dark *));
129
6
 
130
7
  :root {
131
- font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
132
8
  line-height: 1.5;
133
9
  font-size: 16px;
134
10
 
135
11
  color-scheme: light dark;
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");
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;
137
13
  font-synthesis: none;
138
14
  text-rendering: optimizeLegibility;
139
15
  -webkit-font-smoothing: antialiased;
140
16
  -moz-osx-font-smoothing: grayscale;
141
- }
142
-
143
- :root {
144
17
  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");
151
18
  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);
152
124
  }
153
125
 
154
126
  body {
@@ -158,108 +130,18 @@ body {
158
130
  width: 100%;
159
131
  }
160
132
 
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");
164
- }
165
-
166
- strong {
167
- font-weight: 800;
168
- }
169
-
170
133
  body,
171
134
  #root {
172
135
  width: 100dvw;
173
136
  height: 100dvh;
174
137
  }
175
138
 
176
- .react-flow__attribution {
177
- display: none;
139
+ strong {
140
+ font-weight: 800;
178
141
  }
179
142
 
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
- }
143
+ .react-flow__attribution {
144
+ display: none;
263
145
  }
264
146
 
265
147
  @layer base {
@@ -284,25 +166,4 @@ body,
284
166
  stroke-dasharray: 5; /* length of dash pattern */
285
167
  stroke-linecap: round; /* round the dash ends */
286
168
  animation: flowDash 1s linear infinite;
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
-
169
+ }
@@ -1,64 +1,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;
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
+ }