@rozenite/vite-plugin 2.0.0 → 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.
Files changed (41) hide show
  1. package/dist/bundle-dts.d.ts.map +1 -1
  2. package/dist/client-plugin.d.ts.map +1 -1
  3. package/dist/dev-config-module.d.ts.map +1 -1
  4. package/dist/dev-host/assets/index-B0yO0ie2.css +1 -0
  5. package/dist/dev-host/assets/index-zhOD0ia6.js +13 -0
  6. package/dist/dev-host/index.html +2 -2
  7. package/dist/dev-host/manifest.json +2 -2
  8. package/dist/index.cjs +21 -66
  9. package/dist/index.d.ts +1 -1
  10. package/dist/index.d.ts.map +1 -1
  11. package/dist/index.js +21 -66
  12. package/dist/load-config.d.ts.map +1 -1
  13. package/dist/package-json.d.ts.map +1 -1
  14. package/dist/react-native-plugin.d.ts.map +1 -1
  15. package/dist/require-plugin.d.ts.map +1 -1
  16. package/dist/tsconfig.lib.tsbuildinfo +1 -1
  17. package/dist/utils.d.ts.map +1 -1
  18. package/package.json +25 -25
  19. package/src/bundle-dts.ts +3 -12
  20. package/src/client-plugin.ts +9 -34
  21. package/src/dev-config-module.ts +1 -4
  22. package/src/dev-host/App.tsx +20 -56
  23. package/src/dev-host/components/DispatchForm.tsx +11 -28
  24. package/src/dev-host/components/FlowList.tsx +14 -12
  25. package/src/dev-host/components/MessageDetailsPane.tsx +12 -20
  26. package/src/dev-host/components/MessageLogPane.tsx +9 -19
  27. package/src/dev-host/components/PanelTabs.tsx +3 -13
  28. package/src/dev-host/config.ts +2 -6
  29. package/src/dev-host/flow-runtime.ts +6 -24
  30. package/src/dev-host/server.ts +3 -9
  31. package/src/dev-host/styles.css +2 -2
  32. package/src/dev-host/types.ts +1 -5
  33. package/src/dev-host/utils.ts +3 -12
  34. package/src/index.ts +4 -14
  35. package/src/load-config.ts +9 -20
  36. package/src/package-json.ts +1 -3
  37. package/src/react-native-plugin.ts +1 -2
  38. package/src/require-plugin.ts +6 -18
  39. package/src/utils.ts +1 -4
  40. package/dist/dev-host/assets/index-DU3zXL2c.css +0 -1
  41. package/dist/dev-host/assets/index-Xsb6uYhI.js +0 -13
@@ -19,9 +19,7 @@ const getEntryDisplayName = (value: unknown, fallback: string) => {
19
19
  };
20
20
 
21
21
  const getDevHostConfig = () => {
22
- const value = (window as unknown as Record<string, unknown>)[
23
- DEV_HOST_CONFIG_GLOBAL_KEY
24
- ];
22
+ const value = (window as unknown as Record<string, unknown>)[DEV_HOST_CONFIG_GLOBAL_KEY];
25
23
 
26
24
  if (typeof value !== 'object' || value === null) {
27
25
  return {} as { presets?: unknown; flows?: unknown };
@@ -30,9 +28,7 @@ const getDevHostConfig = () => {
30
28
  return value as { presets?: unknown; flows?: unknown };
31
29
  };
32
30
 
33
- const isDevHostPresetSource = (
34
- value: unknown,
35
- ): value is DevHostPresetSource => {
31
+ const isDevHostPresetSource = (value: unknown): value is DevHostPresetSource => {
36
32
  return (
37
33
  typeof value === 'object' &&
38
34
  value !== null &&
@@ -1,14 +1,6 @@
1
1
  import { useEffect, useRef, useState } from 'react';
2
- import type {
3
- DevFlowContext,
4
- DevFlowMessage,
5
- DevFlowMessageMatcher,
6
- } from '../load-config.js';
7
- import type {
8
- DevHostFlowEntry,
9
- DevHostFlowRunState,
10
- MessageEntry,
11
- } from './types.js';
2
+ import type { DevFlowContext, DevFlowMessage, DevFlowMessageMatcher } from '../load-config.js';
3
+ import type { DevHostFlowEntry, DevHostFlowRunState, MessageEntry } from './types.js';
12
4
 
13
5
  type FlowRunnerOptions = {
14
6
  sendMessage: (type: string, payload: unknown) => void;
@@ -44,10 +36,7 @@ const toFlowMessage = (message: MessageEntry): DevFlowMessage => {
44
36
  };
45
37
  };
46
38
 
47
- const matchesMessage = (
48
- message: DevFlowMessage,
49
- matcher?: DevFlowMessageMatcher,
50
- ) => {
39
+ const matchesMessage = (message: DevFlowMessage, matcher?: DevFlowMessageMatcher) => {
51
40
  if (!matcher) {
52
41
  return true;
53
42
  }
@@ -219,9 +208,7 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
219
208
  timeoutId = window.setTimeout(() => {
220
209
  cleanup();
221
210
  reject(
222
- new Error(
223
- `Timed out waiting for a matching message after ${options.timeoutMs}ms.`,
224
- ),
211
+ new Error(`Timed out waiting for a matching message after ${options.timeoutMs}ms.`),
225
212
  );
226
213
  }, options.timeoutMs);
227
214
  }
@@ -252,10 +239,7 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
252
239
 
253
240
  const updateRunState = (
254
241
  nextState: Partial<
255
- Omit<
256
- DevHostFlowRunState,
257
- 'id' | 'flowName' | 'flowDisplayName' | 'autoRun'
258
- >
242
+ Omit<DevHostFlowRunState, 'id' | 'flowName' | 'flowDisplayName' | 'autoRun'>
259
243
  >,
260
244
  ) => {
261
245
  setFlowRuns((current) =>
@@ -302,9 +286,7 @@ export const useFlowRunner = ({ sendMessage }: FlowRunnerOptions) => {
302
286
  };
303
287
 
304
288
  const hasRunningFlow = (flowName: string) => {
305
- return flowRuns.some(
306
- (run) => run.flowName === flowName && run.status === 'running',
307
- );
289
+ return flowRuns.some((run) => run.flowName === flowName && run.status === 'running');
308
290
  };
309
291
 
310
292
  return {
@@ -33,9 +33,7 @@ export const getDevHostSourceEntryFile = (packageDir: string) => {
33
33
  return path.join(packageDir, 'src', 'dev-host', 'main.tsx');
34
34
  };
35
35
 
36
- export const getBuiltDevHostAssets = (
37
- packageDir: string,
38
- ): DevHostBuiltAssets | null => {
36
+ export const getBuiltDevHostAssets = (packageDir: string): DevHostBuiltAssets | null => {
39
37
  const devHostDistDir = path.join(packageDir, 'dist', 'dev-host');
40
38
  const manifestPath = path.join(devHostDistDir, 'manifest.json');
41
39
 
@@ -43,15 +41,11 @@ export const getBuiltDevHostAssets = (
43
41
  return null;
44
42
  }
45
43
 
46
- const manifest = JSON.parse(
47
- fs.readFileSync(manifestPath, 'utf8'),
48
- ) as DevHostBuildManifest;
44
+ const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8')) as DevHostBuildManifest;
49
45
  const entry = manifest[DEV_HOST_BUILD_ENTRY_KEY];
50
46
 
51
47
  if (!entry?.file) {
52
- throw new Error(
53
- `Missing ${DEV_HOST_BUILD_ENTRY_KEY} entry in dev host manifest.`,
54
- );
48
+ throw new Error(`Missing ${DEV_HOST_BUILD_ENTRY_KEY} entry in dev host manifest.`);
55
49
  }
56
50
 
57
51
  return {
@@ -219,7 +219,7 @@
219
219
  }
220
220
 
221
221
  .dev-host-flow-state[data-status='failed'] {
222
- border-color: var(--destructive);
222
+ border-color: var(--danger);
223
223
  }
224
224
 
225
225
  .dev-host-flow-state-header {
@@ -246,7 +246,7 @@
246
246
  }
247
247
 
248
248
  .dev-host-flow-state-error {
249
- color: var(--destructive);
249
+ color: var(--danger);
250
250
  }
251
251
 
252
252
  .dev-host-detail-section {
@@ -33,11 +33,7 @@ export type MessageEntry = {
33
33
  payload: unknown;
34
34
  };
35
35
 
36
- export type DevHostFlowRunStatus =
37
- | 'running'
38
- | 'succeeded'
39
- | 'failed'
40
- | 'aborted';
36
+ export type DevHostFlowRunStatus = 'running' | 'succeeded' | 'failed' | 'aborted';
41
37
 
42
38
  export type DevHostFlowRunState = {
43
39
  id: string;
@@ -1,10 +1,5 @@
1
1
  import { DEV_HOST_STATE_ELEMENT_ID } from './constants.js';
2
- import type {
3
- DevHostPanelEntry,
4
- DevHostState,
5
- MessageEntry,
6
- PluginMessage,
7
- } from './types.js';
2
+ import type { DevHostPanelEntry, DevHostState, MessageEntry, PluginMessage } from './types.js';
8
3
 
9
4
  export const cn = (...parts: Array<string | false | null | undefined>) => {
10
5
  return parts.filter(Boolean).join(' ');
@@ -60,9 +55,7 @@ export const isPluginMessage = (value: unknown): value is PluginMessage => {
60
55
  };
61
56
 
62
57
  export const getInitialPanel = (panels: DevHostPanelEntry[]) => {
63
- const requestedPanel = new URLSearchParams(window.location.search).get(
64
- 'panel',
65
- );
58
+ const requestedPanel = new URLSearchParams(window.location.search).get('panel');
66
59
 
67
60
  if (requestedPanel) {
68
61
  const matchedPanel = panels.find((panel) => panel.label === requestedPanel);
@@ -74,9 +67,7 @@ export const getInitialPanel = (panels: DevHostPanelEntry[]) => {
74
67
  return panels[0] ?? null;
75
68
  };
76
69
 
77
- export const createMessageEntry = (
78
- input: Omit<MessageEntry, 'id' | 'date'>,
79
- ): MessageEntry => {
70
+ export const createMessageEntry = (input: Omit<MessageEntry, 'id' | 'date'>): MessageEntry => {
80
71
  return {
81
72
  id: crypto.randomUUID(),
82
73
  date: new Date().toISOString(),
package/src/index.ts CHANGED
@@ -13,20 +13,12 @@ import { bundleTargetDeclarations } from './bundle-dts.js';
13
13
 
14
14
  // vite-plugin-dts exports differently in CJS and ESM
15
15
  const dtsPlugin =
16
- 'default' in maybeDtsPlugin
17
- ? (maybeDtsPlugin.default as typeof maybeDtsPlugin)
18
- : maybeDtsPlugin;
16
+ 'default' in maybeDtsPlugin ? (maybeDtsPlugin.default as typeof maybeDtsPlugin) : maybeDtsPlugin;
19
17
 
20
- const getDtsPlugin = (
21
- target: 'react-native' | 'metro' | 'sdk',
22
- ): PluginOption => {
18
+ const getDtsPlugin = (target: 'react-native' | 'metro' | 'sdk'): PluginOption => {
23
19
  const projectRoot = process.cwd();
24
20
  const entryRoot =
25
- target === 'react-native'
26
- ? 'react-native.ts'
27
- : target === 'metro'
28
- ? 'metro.ts'
29
- : 'sdk.ts';
21
+ target === 'react-native' ? 'react-native.ts' : target === 'metro' ? 'metro.ts' : 'sdk.ts';
30
22
  const distRoot = path.join(projectRoot, 'dist');
31
23
  const targetRoot = path.join(distRoot, target);
32
24
  const publicEntryPath = path.join(projectRoot, 'dist', target, 'index.d.ts');
@@ -94,9 +86,7 @@ export type RozenitePluginOptions = {
94
86
  tailwind?: boolean;
95
87
  };
96
88
 
97
- export const rozenitePlugin = ({
98
- tailwind = true,
99
- }: RozenitePluginOptions = {}): PluginOption[] => {
89
+ export const rozenitePlugin = ({ tailwind = true }: RozenitePluginOptions = {}): PluginOption[] => {
100
90
  const isServer = process.env.VITE_ROZENITE_TARGET === 'server';
101
91
  const isReactNative = process.env.VITE_ROZENITE_TARGET === 'react-native';
102
92
  const isSdk = process.env.VITE_ROZENITE_TARGET === 'sdk';
@@ -66,9 +66,7 @@ export type RozeniteConfig = {
66
66
  dev?: DevConfig;
67
67
  };
68
68
 
69
- export const loadConfig = async (
70
- configPath: string,
71
- ): Promise<RozeniteConfig> => {
69
+ export const loadConfig = async (configPath: string): Promise<RozeniteConfig> => {
72
70
  const absoluteConfigPath = path.resolve(process.cwd(), configPath);
73
71
 
74
72
  if (!fs.existsSync(absoluteConfigPath)) {
@@ -76,20 +74,13 @@ export const loadConfig = async (
76
74
  }
77
75
 
78
76
  try {
79
- const configContent = await fs.promises.readFile(
80
- absoluteConfigPath,
81
- 'utf-8',
82
- );
83
-
84
- const result = await transformWithEsbuild(
85
- configContent,
86
- absoluteConfigPath,
87
- {
88
- loader: 'ts',
89
- format: 'cjs',
90
- target: 'esnext',
91
- },
92
- );
77
+ const configContent = await fs.promises.readFile(absoluteConfigPath, 'utf-8');
78
+
79
+ const result = await transformWithEsbuild(configContent, absoluteConfigPath, {
80
+ loader: 'ts',
81
+ format: 'cjs',
82
+ target: 'esnext',
83
+ });
93
84
 
94
85
  const moduleExports: { default?: unknown } = {};
95
86
  const module = { exports: moduleExports };
@@ -108,9 +99,7 @@ export const loadConfig = async (
108
99
  return config as RozeniteConfig;
109
100
  } catch (error) {
110
101
  if (error instanceof Error) {
111
- throw new Error(
112
- `Failed to load configuration from ${configPath}: ${error.message}`,
113
- );
102
+ throw new Error(`Failed to load configuration from ${configPath}: ${error.message}`);
114
103
  }
115
104
  throw new Error(`Failed to load configuration from ${configPath}`);
116
105
  }
@@ -7,9 +7,7 @@ export type PackageJSON = {
7
7
  version: string;
8
8
  };
9
9
 
10
- export const getPackageJSON = async (
11
- projectRoot: string,
12
- ): Promise<PackageJSON> => {
10
+ export const getPackageJSON = async (projectRoot: string): Promise<PackageJSON> => {
13
11
  const packageJSONPath = path.join(projectRoot, 'package.json');
14
12
  const packageJSON = await fs.readFile(packageJSONPath, 'utf8');
15
13
  return JSON.parse(packageJSON);
@@ -15,8 +15,7 @@ export const rozeniteReactNativePlugin = (): Plugin => {
15
15
 
16
16
  config.build.lib = {
17
17
  entry: path.resolve(projectRoot, 'react-native.ts'),
18
- fileName: (format) =>
19
- `react-native/index.${format === 'es' ? 'js' : 'cjs'}`,
18
+ fileName: (format) => `react-native/index.${format === 'es' ? 'js' : 'cjs'}`,
20
19
  };
21
20
 
22
21
  config.build.rollupOptions.external = (id) => {
@@ -86,9 +86,7 @@ const transformRequireToChunkReferences = (
86
86
  }
87
87
 
88
88
  const outFileName = getFileName(moduleInfo.referenceId);
89
- const relPath = normalizePath(
90
- path.posix.relative('react-native', outFileName),
91
- );
89
+ const relPath = normalizePath(path.posix.relative('react-native', outFileName));
92
90
  const requirePath = relPath.startsWith('.') ? relPath : `./${relPath}`;
93
91
 
94
92
  return `require('${requirePath}')`;
@@ -143,10 +141,7 @@ export default function requirePlugin(): Plugin {
143
141
  async buildStart(options) {
144
142
  try {
145
143
  assert(Array.isArray(options.input), 'input must be an array');
146
- assert(
147
- options.input.length === 1,
148
- 'input must be an array with one entry',
149
- );
144
+ assert(options.input.length === 1, 'input must be an array with one entry');
150
145
 
151
146
  input = options.input[0];
152
147
  inputName = extractModuleName(input);
@@ -167,16 +162,11 @@ export default function requirePlugin(): Plugin {
167
162
 
168
163
  this.addWatchFile(resolved.id);
169
164
 
170
- const exportName = sanitizeChunkName(
171
- extractModuleName(resolved.id),
172
- );
165
+ const exportName = sanitizeChunkName(extractModuleName(resolved.id));
173
166
  const wrapperName = `${exportName}${REQUIRE_WRAPPER_SUFFIX}`;
174
167
  const virtualId = `${VIRTUAL_REQUIRE_PREFIX}${wrapperName}`;
175
168
 
176
- virtualModuleSources.set(
177
- virtualId,
178
- `export * from ${JSON.stringify(req)};`,
179
- );
169
+ virtualModuleSources.set(virtualId, `export * from ${JSON.stringify(req)};`);
180
170
 
181
171
  const referenceId = this.emitFile({
182
172
  type: 'chunk',
@@ -205,10 +195,8 @@ export default function requirePlugin(): Plugin {
205
195
  }
206
196
 
207
197
  return {
208
- code: transformRequireToChunkReferences(
209
- code,
210
- moduleInfoMap,
211
- (referenceId) => normalizePath(this.getFileName(referenceId)),
198
+ code: transformRequireToChunkReferences(code, moduleInfoMap, (referenceId) =>
199
+ normalizePath(this.getFileName(referenceId)),
212
200
  ),
213
201
  map: null,
214
202
  };
package/src/utils.ts CHANGED
@@ -1,10 +1,7 @@
1
1
  import fs from 'node:fs';
2
2
  import path from 'node:path';
3
3
 
4
- export const resolveFileWithExtensions = (
5
- directory: string,
6
- baseName: string,
7
- ): string | null => {
4
+ export const resolveFileWithExtensions = (directory: string, baseName: string): string | null => {
8
5
  const extensions = ['.tsx', '.ts', '.jsx', '.js'];
9
6
 
10
7
  for (const ext of extensions) {
@@ -1 +0,0 @@
1
- @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-content:"";--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-medium:500;--font-weight-semibold:600;--radius-sm:calc(var(--radius) * .6);--radius-md:calc(var(--radius) * .8);--radius-lg:var(--radius);--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;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");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{border-color:var(--border);outline-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){*{outline-color:color-mix(in oklab,var(--ring) 50%,transparent)}}body{background-color:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background-color:var(--border);border-radius:var(--radius-lg);background-clip:padding-box;border:2px solid #0000}::-webkit-scrollbar-thumb:hover{background-color:var(--muted-foreground)}html,body,#root{height:100%;margin:0}body{overflow:hidden}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing) * 4)}.right-1\.5{right:calc(var(--spacing) * 1.5)}.right-2{right:calc(var(--spacing) * 2)}.right-4{right:calc(var(--spacing) * 4)}.bottom-4{bottom:calc(var(--spacing) * 4)}.left-0\.5{left:calc(var(--spacing) * .5)}.left-2\.5{left:calc(var(--spacing) * 2.5)}.z-10{z-index:10}.z-50{z-index:50}.row-0{grid-row:0}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.m-0{margin:calc(var(--spacing) * 0)}.mx-1{margin-inline:calc(var(--spacing) * 1)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.ml-3\.5{margin-left:calc(var(--spacing) * 3.5)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-16{height:calc(var(--spacing) * 16)}.h-full{height:100%}.h-screen{height:100vh}.max-h-64{max-height:calc(var(--spacing) * 64)}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-28{min-height:calc(var(--spacing) * 28)}.min-h-56{min-height:calc(var(--spacing) * 56)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-3\.5{width:calc(var(--spacing) * 3.5)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-56{width:calc(var(--spacing) * 56)}.w-80{width:calc(var(--spacing) * 80)}.w-auto{width:auto}.w-fit{width:fit-content}.w-full{width:100%}.w-px{width:1px}.max-w-160{max-width:calc(var(--spacing) * 160)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-\[--anchor-width\]{min-width:--anchor-width}.flex-1{flex:1}.shrink-0{flex-shrink:0}.border-collapse{border-collapse:collapse}.origin-\(--transform-origin\){transform-origin:var(--transform-origin)}.-translate-y-1\/2{--tw-translate-y: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-90{rotate:90deg}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.resize-y{resize:vertical}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) * .8)}.rounded-sm{border-radius:calc(var(--radius) * .6)}.border{border-style:var(--tw-border-style);border-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-border{border-color:var(--border)}.border-destructive\/50{border-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.border-destructive\/50{border-color:color-mix(in oklab,var(--destructive) 50%,transparent)}}.border-input{border-color:var(--input)}.border-ring{border-color:var(--ring)}.border-sidebar-border{border-color:var(--sidebar-border)}.bg-background,.bg-background\/70{background-color:var(--background)}@supports (color:color-mix(in lab,red,red)){.bg-background\/70{background-color:color-mix(in oklab,var(--background) 70%,transparent)}}.bg-border{background-color:var(--border)}.bg-card{background-color:var(--card)}.bg-destructive{background-color:var(--destructive)}.bg-foreground{background-color:var(--foreground)}.bg-muted{background-color:var(--muted)}.bg-popover{background-color:var(--popover)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-sidebar{background-color:var(--sidebar)}.bg-transparent{background-color:#0000}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:calc(var(--spacing) * 1)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-10{padding-block:calc(var(--spacing) * 10)}.pr-3{padding-right:calc(var(--spacing) * 3)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pr-14{padding-right:calc(var(--spacing) * 14)}.pl-2{padding-left:calc(var(--spacing) * 2)}.pl-8{padding-left:calc(var(--spacing) * 8)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-accent-foreground{color:var(--accent-foreground)}.text-background{color:var(--background)}.text-card-foreground{color:var(--card-foreground)}.text-destructive{color:var(--destructive)}.text-destructive-foreground{color:var(--destructive-foreground)}.text-foreground{color:var(--foreground)}.text-muted{color:var(--muted)}.text-muted-foreground,.text-muted-foreground\/60{color:var(--muted-foreground)}@supports (color:color-mix(in lab,red,red)){.text-muted-foreground\/60{color:color-mix(in oklab,var(--muted-foreground) 60%,transparent)}}.text-popover-foreground{color:var(--popover-foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-sidebar-foreground,.text-sidebar-foreground\/60{color:var(--sidebar-foreground)}@supports (color:color-mix(in lab,red,red)){.text-sidebar-foreground\/60{color:color-mix(in oklab,var(--sidebar-foreground) 60%,transparent)}}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-\[transform\,opacity\]{transition-property:transform,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[transform\,scale\,opacity\]{transition-property:transform,scale,opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.running{animation-play-state:running}.group-aria-\[orientation\=horizontal\]\/split-handle\:h-3:is(:where(.group\/split-handle)[aria-orientation=horizontal] *){height:calc(var(--spacing) * 3)}.group-aria-\[orientation\=horizontal\]\/split-handle\:w-4:is(:where(.group\/split-handle)[aria-orientation=horizontal] *){width:calc(var(--spacing) * 4)}.group-aria-\[orientation\=horizontal\]\/split-handle\:rotate-90:is(:where(.group\/split-handle)[aria-orientation=horizontal] *){rotate:90deg}.group-aria-\[orientation\=vertical\]\/split-handle\:h-4:is(:where(.group\/split-handle)[aria-orientation=vertical] *){height:calc(var(--spacing) * 4)}.group-aria-\[orientation\=vertical\]\/split-handle\:w-3:is(:where(.group\/split-handle)[aria-orientation=vertical] *){width:calc(var(--spacing) * 3)}.placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-y-0:after{content:var(--tw-content);inset-block:calc(var(--spacing) * 0)}.after\:left-1\/2:after{content:var(--tw-content);left:50%}.after\:w-1:after{content:var(--tw-content);width:calc(var(--spacing) * 1)}.after\:-translate-x-1\/2:after{content:var(--tw-content);--tw-translate-x: -50% ;translate:var(--tw-translate-x) var(--tw-translate-y)}.last\:border-0:last-child{border-style:var(--tw-border-style);border-width:0}@media(hover:hover){.hover\:bg-accent:hover,.hover\:bg-accent\/50:hover{background-color:var(--accent)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--accent) 50%,transparent)}}.hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}.hover\:bg-muted-foreground:hover{background-color:var(--muted-foreground)}.hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab,red,red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}}.hover\:bg-sidebar-accent:hover{background-color:var(--sidebar-accent)}.hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:text-primary:hover{color:var(--primary)}.hover\:text-sidebar-accent-foreground:hover{color:var(--sidebar-accent-foreground)}}.focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus-visible\:ring-ring:focus-visible,.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab,red,red)){.focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}.focus-visible\:ring-sidebar-ring:focus-visible{--tw-ring-color:var(--sidebar-ring)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:ring-offset-background:focus-visible{--tw-ring-offset-color:var(--background)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.aria-\[orientation\=horizontal\]\:h-px[aria-orientation=horizontal]{height:1px}.aria-\[orientation\=horizontal\]\:cursor-row-resize[aria-orientation=horizontal]{cursor:row-resize}.aria-\[orientation\=vertical\]\:w-px[aria-orientation=vertical]{width:1px}.aria-\[orientation\=vertical\]\:cursor-col-resize[aria-orientation=vertical]{cursor:col-resize}.data-\[checked\]\:translate-x-4[data-checked]{--tw-translate-x:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.data-\[checked\]\:border-primary[data-checked]{border-color:var(--primary)}.data-\[checked\]\:bg-primary[data-checked]{background-color:var(--primary)}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}.data-\[ending-style\]\:scale-90[data-ending-style]{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.data-\[ending-style\]\:scale-95[data-ending-style]{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.data-\[ending-style\]\:opacity-0[data-ending-style]{opacity:0}.data-\[highlighted\]\:bg-accent[data-highlighted]{background-color:var(--accent)}.data-\[highlighted\]\:text-accent-foreground[data-highlighted]{color:var(--accent-foreground)}.data-\[selected\]\:bg-background[data-selected]{background-color:var(--background)}.data-\[selected\]\:bg-sidebar-accent[data-selected]{background-color:var(--sidebar-accent)}.data-\[selected\]\:font-medium[data-selected]{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.data-\[selected\]\:text-foreground[data-selected]{color:var(--foreground)}.data-\[selected\]\:text-sidebar-accent-foreground[data-selected]{color:var(--sidebar-accent-foreground)}.data-\[selected\]\:shadow-xs[data-selected]{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.data-\[starting-style\]\:scale-90[data-starting-style]{--tw-scale-x:90%;--tw-scale-y:90%;--tw-scale-z:90%;scale:var(--tw-scale-x) var(--tw-scale-y)}.data-\[starting-style\]\:scale-95[data-starting-style]{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}.data-\[starting-style\]\:opacity-0[data-starting-style]{opacity:0}@media(min-width:40rem){.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-3\.5 svg{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&\:\:-webkit-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button{appearance:none}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--radius:0;--background:#fff;--foreground:#201f24;--card:#fff;--card-foreground:#201f24;--popover:#fff;--popover-foreground:#201f24;--primary:#8232ff;--primary-foreground:#fff;--secondary:#f9f8fd;--secondary-foreground:#201f24;--muted:#f9f8fd;--muted-foreground:#838289;--accent:#8232ff29;--accent-foreground:#201f24;--destructive:#fa7171;--destructive-foreground:#201f24;--border:#cfced5;--input:#cfced5;--ring:#8232ff;--sidebar:#fff;--sidebar-foreground:#201f24;--sidebar-primary:#8232ff;--sidebar-primary-foreground:#fff;--sidebar-accent:#8232ff29;--sidebar-accent-foreground:#201f24;--sidebar-border:#cfced5;--sidebar-ring:#8232ff}.dark{--background:#201f24;--foreground:#fff;--card:#201f24;--card-foreground:#fff;--popover:#2b2a2f;--popover-foreground:#fff;--primary:#8232ff;--primary-foreground:#fff;--secondary:#2b2a2f;--secondary-foreground:#fff;--muted:#2b2a2f;--muted-foreground:#cfced5;--accent:#8232ff33;--accent-foreground:#fff;--destructive:#fa7171;--destructive-foreground:#201f24;--border:#424145;--input:#424145;--ring:#8232ff;--sidebar:#201f24;--sidebar-foreground:#fff;--sidebar-primary:#8232ff;--sidebar-primary-foreground:#fff;--sidebar-accent:#8232ff33;--sidebar-accent-foreground:#fff;--sidebar-border:#424145;--sidebar-ring:#8232ff}.dev-host{height:100dvh;overflow:hidden}.dev-host-body{min-height:0;overflow:hidden!important}.dev-host-header{min-height:3.25rem}.dev-host-header-title{flex-direction:column;gap:.125rem;min-width:0;display:flex}.dev-host-header-subtitle{text-overflow:ellipsis;white-space:nowrap;max-width:30rem;overflow:hidden}.dev-host-panel-select{width:min(16rem,32vw)}.dev-host-main-split{flex:1;min-height:0}.dev-host-preview{background:var(--background);height:100%;min-height:0;position:relative;overflow:hidden}.dev-host-iframe{background:var(--background);border:0;width:100%;height:100%;display:block}.dev-host-devtools{height:100%;min-height:0;overflow:hidden}.dev-host-pane{background:var(--background);flex-direction:column;flex:1;height:100%;min-height:0;display:flex;overflow:hidden}.dev-host-pane-header{border-bottom:1px solid var(--border);background:var(--card);flex-shrink:0;justify-content:space-between;align-items:center;gap:.75rem;min-height:2.75rem;padding:.625rem .875rem;display:flex}.dev-host-pane-title{color:var(--foreground);letter-spacing:.06em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.6875rem;font-weight:600}.dev-host-pane-actions{align-items:center;gap:.25rem;display:flex}.dev-host-scroll{flex:1;min-height:0}.dev-host-message-table{min-width:42rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.dev-host-direction-in{color:#22c55e}.dev-host-direction-out{color:#f59e0b}.dev-host-form,.dev-host-flow-list,.dev-host-details{flex-direction:column;gap:1rem;min-height:0;padding:1rem;display:flex}.dev-host-form{flex:1}.dev-host-field{gap:.375rem;display:grid}.dev-host-label{color:var(--muted-foreground);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem}.dev-host-actions{justify-content:flex-end;gap:.5rem;margin-top:auto;display:flex}.dev-host-tabs-header{justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem 0;display:flex}.dev-host-tab-panel{flex:1;min-height:0;overflow:auto}.dev-host-flow-list{padding-top:.75rem}.dev-host-flow-button{text-align:left;justify-content:space-between;align-items:center;gap:.75rem;width:100%;display:flex}.dev-host-flow-name,.dev-host-flow-title{align-items:center;gap:.375rem;display:inline-flex}.dev-host-flow-runs{gap:.75rem;display:grid}.dev-host-flow-state{border:1px solid var(--border);border-radius:var(--radius-md);gap:.5rem;padding:.75rem;display:grid}.dev-host-flow-state[data-status=running]{border-color:var(--primary)}.dev-host-flow-state[data-status=failed]{border-color:var(--destructive)}.dev-host-flow-state-header{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.dev-host-flow-state-result,.dev-host-flow-state-error,.dev-host-detail-value,.dev-host-detail-payload{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--muted);white-space:pre-wrap;word-break:break-word;padding:.625rem .75rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;line-height:1.5;overflow:auto}.dev-host-flow-state-error{color:var(--destructive)}.dev-host-detail-section{gap:.375rem;display:grid}.dev-host-detail-payload{min-height:4rem}.dev-host-mobile-tabs{flex-direction:column;flex:1;height:100%;min-height:0;display:flex}.dev-host-mobile-tab-list{flex-shrink:0;padding:.5rem .75rem 0}.dev-host-mobile-tab-panel{flex-direction:column;flex:1;min-height:0;display:flex}.dev-host-mobile-tab-panel>.dev-host-pane{display:flex}@media(max-width:960px){.dev-host-header{padding-inline:.75rem}.dev-host-header-subtitle{display:none}.dev-host-panel-select{width:min(12rem,42vw)}.dev-host-message-table{min-width:36rem}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}