@vgai/editor 0.4.0 → 0.4.1

package/src/components/project-tool-documents.tsx

@@ -0,0 +1,298 @@
+import { useState, useSyncExternalStore } from 'react';
+import type { EditorAction } from '../action-registry';
+import { Button, bg, border, danger, EditorBadge, fontSize, radius, text } from '../design-system';
+import {
+  getProjectTools,
+  projectToolsVersion,
+  runProjectTool,
+  subscribeProjectTools,
+} from '../project-tools';
+import { getDocumentToolContributions } from '../tool-loader';
+import {
+  openWorkspaceDocument,
+  type WorkspaceDocumentContentProps,
+} from '../workspace-document-registry';
+import { openToolDocument } from './tool-documents';
+import { defaultValueForSchema, ToolSchemaForm } from './tool-schema-form';
+
+export const PROJECT_TOOLS_DOCUMENT_ID = 'project-tools';
+export const PROJECT_TOOL_DOCUMENT_PREFIX = 'project-tool:';
+
+export interface ProjectToolDocumentStore {
+  setActiveViewportTab(tab: 'scene' | 'game'): void;
+}
+
+function projectToolDocumentId(name: string): string {
+  return `${PROJECT_TOOL_DOCUMENT_PREFIX}${name}`;
+}
+
+export function openProjectToolsDocument(store: ProjectToolDocumentStore): void {
+  openWorkspaceDocument({
+    id: PROJECT_TOOLS_DOCUMENT_ID,
+    title: 'Project Tools',
+    kind: 'project-tool',
+    Content: ProjectToolDocumentContent,
+    closeable: true,
+    onActivate: () => store.setActiveViewportTab('scene'),
+  });
+}
+
+export function openProjectToolDocument(
+  store: ProjectToolDocumentStore | null,
+  name: string,
+): boolean {
+  const tool = getProjectTools().tools.find((entry) => entry.name === name);
+  if (!tool) return false;
+  const contribution = getDocumentToolContributions().find((item) => item.tool.name === name);
+  if (contribution) return openToolDocument(store, contribution.id);
+  openWorkspaceDocument({
+    id: projectToolDocumentId(name),
+    title: tool.summary || tool.name,
+    kind: 'project-tool',
+    provenance: { sourcePath: tool.sourcePath, origin: tool.name },
+    Content: ProjectToolDocumentContent,
+    closeable: true,
+    ...(store ? { onActivate: () => store.setActiveViewportTab('scene') } : {}),
+  });
+  return true;
+}
+
+export function buildProjectToolActions(store: ProjectToolDocumentStore): EditorAction[] {
+  return [
+    {
+      id: 'project-tools:open',
+      label: 'Open Project Tools',
+      category: 'action',
+      execute: () => openProjectToolsDocument(store),
+    },
+    ...getProjectTools().tools.map((tool) => ({
+      id: `project-tool:${tool.name}`,
+      label: `Run: ${tool.summary || tool.name}`,
+      category: 'action' as const,
+      execute: () => void openProjectToolDocument(store, tool.name),
+    })),
+  ];
+}
+
+function JsonBlock({ value }: { value: unknown }) {
+  return <pre style={jsonStyle}>{JSON.stringify(value, null, 2)}</pre>;
+}
+
+export function ProjectToolDocumentContent({ documentId }: WorkspaceDocumentContentProps) {
+  useSyncExternalStore(subscribeProjectTools, projectToolsVersion);
+  const snapshot = getProjectTools();
+  const toolName = documentId.startsWith(PROJECT_TOOL_DOCUMENT_PREFIX)
+    ? documentId.slice(PROJECT_TOOL_DOCUMENT_PREFIX.length)
+    : null;
+  const tool = toolName ? snapshot.tools.find((entry) => entry.name === toolName) : null;
+  if (!toolName) {
+    return (
+      <div style={rootStyle} data-testid="project-tools-catalog">
+        <h2 style={headingStyle}>Project Tools</h2>
+        <p style={{ ...mutedStyle, margin: '0 0 18px', maxWidth: 720, lineHeight: 1.5 }}>
+          Explicitly registered in <code>package.json#vgai.tools</code>. Each tool is an ordinary
+          project function; a registration may pair it with optional editor contributions.
+        </p>
+        <div style={{ display: 'grid', gap: 8 }}>
+          {snapshot.tools.map((entry) => (
+            <Button
+              key={entry.name}
+              variant="ghost"
+              className="vgai-project-tool-card"
+              onClick={() => openProjectToolDocument(null, entry.name)}
+              data-testid={`project-command-card:${entry.name}`}
+            >
+              <span style={cardTitleRowStyle}>
+                <strong style={{ color: text[1], fontWeight: 600 }}>{entry.summary}</strong>
+                <span style={openLabelStyle}>Open</span>
+              </span>
+              <code style={{ color: text[2], fontSize: fontSize.sm }}>{entry.name}</code>
+              <span style={cardMetaRowStyle}>
+                <span>
+                  {entry.host} · {entry.permission.risk} · {entry.sourcePath}
+                </span>
+                {entry.contributions.length > 0 && (
+                  <EditorBadge style={badgeStyle}>UI ×{entry.contributions.length}</EditorBadge>
+                )}
+              </span>
+            </Button>
+          ))}
+        </div>
+        {snapshot.tools.length === 0 && snapshot.loadErrors.length === 0 && (
+          <div style={mutedStyle}>No project tools registered.</div>
+        )}
+        {snapshot.loadErrors.map((error) => (
+          <div key={`${error.sourcePath}:${error.message}`} style={errorStyle}>
+            {error.sourcePath}: {error.message}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (!tool) {
+    return <div style={rootStyle}>This tool is no longer available.</div>;
+  }
+
+  return <ProjectToolRunner key={tool.name} tool={tool} />;
+}
+
+function ProjectToolRunner({
+  tool,
+}: {
+  tool: ReturnType<typeof getProjectTools>['tools'][number];
+}) {
+  const initial = defaultValueForSchema(tool.inputSchema);
+  const [input, setInput] = useState<Record<string, unknown>>(
+    initial && typeof initial === 'object' && !Array.isArray(initial)
+      ? (initial as Record<string, unknown>)
+      : {},
+  );
+  const [rawText, setRawText] = useState(() => JSON.stringify(input, null, 2));
+  const [result, setResult] = useState<unknown>(null);
+  const [running, setRunning] = useState(false);
+  const [inputError, setInputError] = useState<string | null>(null);
+
+  const runnable = tool.host === 'node';
+  const execute = async () => {
+    const confirm =
+      tool.permission.risk === 'read' ||
+      window.confirm(`${tool.permission.summary}\n\nRun ${tool.name}?`);
+    if (!confirm) return;
+    setRunning(true);
+    try {
+      setResult(await runProjectTool(tool.name, input, { confirm: true }));
+    } catch (error) {
+      setResult({ ok: false, error: { code: 'REQUEST_FAILED', message: String(error) } });
+    } finally {
+      setRunning(false);
+    }
+  };
+
+  return (
+    <div style={rootStyle} data-testid={`project-tool:${tool.name}`}>
+      <h2 style={headingStyle}>{tool.summary}</h2>
+      <code style={{ color: text[2] }}>{tool.name}</code>
+      <p style={{ color: text[2] }}>{tool.description}</p>
+      <div style={mutedStyle}>
+        {tool.host} · {tool.permission.risk} · {tool.sourcePath}
+      </div>
+      {!runnable && (
+        <div style={errorStyle}>
+          This runner supports Node-hosted tools. Import the underlying function directly in browser
+          or runtime code.
+        </div>
+      )}
+      <section style={{ marginTop: 18, maxWidth: 760 }}>
+        <ToolSchemaForm
+          schema={tool.inputSchema}
+          value={input}
+          onChange={(next) => {
+            setInput(next);
+            setRawText(JSON.stringify(next, null, 2));
+            setInputError(null);
+          }}
+        />
+      </section>
+      {inputError && <div style={errorStyle}>{inputError}</div>}
+      <Button
+        variant="primary"
+        disabled={!runnable || running || inputError !== null}
+        aria-busy={running}
+        onClick={() => void execute()}
+        style={{ marginTop: 16 }}
+      >
+        {running ? 'Running…' : 'Run tool'}
+      </Button>
+      <details style={{ marginTop: 16 }}>
+        <summary style={labelStyle}>Advanced JSON</summary>
+        <textarea
+          className="vgai-input"
+          id={`tool-input:${tool.name}`}
+          value={rawText}
+          onChange={(event) => {
+            const nextText = event.target.value;
+            setRawText(nextText);
+            try {
+              const parsed = JSON.parse(nextText) as unknown;
+              if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+                throw new Error('Input must be a JSON object.');
+              }
+              setInput(parsed as Record<string, unknown>);
+              setInputError(null);
+            } catch (error) {
+              setInputError(error instanceof Error ? error.message : String(error));
+            }
+          }}
+          rows={10}
+          style={textareaStyle}
+        />
+        <details>
+          <summary style={labelStyle}>Input schema</summary>
+          <JsonBlock value={tool.inputSchema} />
+        </details>
+      </details>
+      {result !== null && (
+        <section>
+          <div style={labelStyle}>Result</div>
+          <JsonBlock value={result} />
+        </section>
+      )}
+    </div>
+  );
+}
+
+const rootStyle: React.CSSProperties = {
+  width: '100%',
+  maxWidth: 960,
+  margin: '0 auto',
+  padding: 24,
+  boxSizing: 'border-box',
+  overflow: 'auto',
+  pointerEvents: 'auto',
+  color: text[1],
+  fontSize: fontSize.base,
+};
+const headingStyle: React.CSSProperties = { margin: '0 0 6px', fontSize: 20 };
+const mutedStyle: React.CSSProperties = { color: text[2], fontSize: fontSize.sm };
+const labelStyle: React.CSSProperties = { display: 'block', margin: '14px 0 6px', color: text[1] };
+const cardTitleRowStyle: React.CSSProperties = {
+  display: 'flex',
+  width: '100%',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 12,
+};
+const openLabelStyle: React.CSSProperties = {
+  color: text[2],
+  fontSize: fontSize.sm,
+  fontWeight: 500,
+};
+const cardMetaRowStyle: React.CSSProperties = {
+  display: 'flex',
+  width: '100%',
+  minWidth: 0,
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 12,
+  color: text[2],
+  fontSize: fontSize.sm,
+};
+const badgeStyle: React.CSSProperties = {
+  flex: '0 0 auto',
+};
+const errorStyle: React.CSSProperties = { marginTop: 10, color: danger, whiteSpace: 'pre-wrap' };
+const textareaStyle: React.CSSProperties = {
+  width: '100%',
+  boxSizing: 'border-box',
+  resize: 'vertical',
+  fontFamily: 'monospace',
+};
+const jsonStyle: React.CSSProperties = {
+  overflow: 'auto',
+  padding: 10,
+  background: bg.inset,
+  border: `1px solid ${border[1]}`,
+  borderRadius: radius.sm,
+  color: text[2],
+};

package/src/components/status-contributions.tsx

@@ -25,6 +25,11 @@
 
 import type { ConnectionState } from '@engine/adapter';
 import { useSyncExternalStore } from 'react';
+import {
+  assetImportJobs,
+  assetImportJobsVersion,
+  subscribeAssetImportJobs,
+} from '../asset-workflow/asset-import-jobs';
 import { getActiveNetworking } from '../authoring/active-systems';
 import { useAvailabilityTick } from '../availability-tick';
 import { Button, themeVars } from '../design-system';
@@ -100,6 +105,31 @@ export function ConnectionStatus() {
   );
 }
 
+/** Project-wide import status remains visible when the Library document closes. */
+export function AssetImportStatus() {
+  useSyncExternalStore(subscribeAssetImportJobs, assetImportJobsVersion);
+  const jobs = assetImportJobs();
+  if (jobs.length === 0) return null;
+  const running = jobs.filter((job) => job.status === 'running').length;
+  const failed = jobs.filter((job) => job.status === 'failed').length;
+  const completed = jobs.filter(
+    (job) => job.status === 'imported' || job.status === 'skipped',
+  ).length;
+  const label = running
+    ? `${running} importing`
+    : failed
+      ? `${failed} import failed`
+      : `${completed} imported`;
+  return (
+    <span
+      data-testid="status-asset-imports"
+      style={{ color: failed ? themeVars.semantic.danger : themeVars.content.muted }}
+    >
+      {label}
+    </span>
+  );
+}
+
 /** Right-aligned concise selection summary (§4.1 "Board selected"). */
 export function SelectionStatus() {
   const store = useEditorStore();
@@ -155,6 +185,14 @@ export function ensureCoreStatusContributionsRegistered(): void {
         Content: ConnectionStatus,
       }),
     );
+    track(
+      registerWorkspaceStatus({
+        id: 'asset-imports',
+        align: 'left',
+        order: 40,
+        Content: AssetImportStatus,
+      }),
+    );
     // `build-progress` (build-documents.tsx, server mode) registers with
     // order 0/default and a later sequence, so it lands after `save-status`
     // among the order-0 items — visually beside the session state it extends.

package/src/components/tool-documents.tsx

@@ -24,7 +24,11 @@ import { themeVars } from '../design-system';
 
 import { useSyncExternalStore } from 'react';
 import type { EditorAction } from '../action-registry';
-import { getDocumentTools, getGlobalTools, subscribeGlobalTools } from '../tool-loader';
+import {
+  getDocumentToolContributions,
+  getGlobalToolContributions,
+  subscribeToolContributions,
+} from '../tool-loader';
 import {
   openWorkspaceDocument,
   type WorkspaceDocumentContentProps,
@@ -46,18 +50,18 @@ export function toolDocumentId(toolId: string): string {
  * tool. Returns `false` (opens nothing) when no discovered document tool
  * carries that id — no fabricated documents for deleted/renamed tools.
  */
-export function openToolDocument(store: ToolDocumentStore, toolId: string): boolean {
-  const tool = getDocumentTools().find((t) => t.id === toolId);
-  if (!tool) return false;
+export function openToolDocument(store: ToolDocumentStore | null, toolId: string): boolean {
+  const contribution = getDocumentToolContributions().find((item) => item.id === toolId);
+  if (!contribution) return false;
   openWorkspaceDocument({
     id: toolDocumentId(toolId),
     // §8: the tool's own declared title (`Tuning`), never a tech bucket.
-    title: tool.title,
-    kind: 'tool',
-    provenance: { sourcePath: tool.file },
+    title: contribution.title,
+    kind: 'tool-contribution',
+    provenance: { sourcePath: contribution.file, origin: contribution.tool.name },
     Content: ToolDocumentContent,
     closeable: true,
-    onActivate: () => store.setActiveViewportTab('scene'),
+    ...(store ? { onActivate: () => store.setActiveViewportTab('scene') } : {}),
   });
   return true;
 }
@@ -65,7 +69,7 @@ export function openToolDocument(store: ToolDocumentStore, toolId: string): bool
 /** `Open Tool: <title>` palette actions — one per discovered document tool
  *  (the B12 discovery gesture). */
 export function buildToolActions(store: ToolDocumentStore): EditorAction[] {
-  return getDocumentTools().map((t) => ({
+  return getDocumentToolContributions().map((t) => ({
     id: `tool-doc:${t.id}`,
     label: `Open Tool: ${t.title}`,
     category: 'action' as const,
@@ -76,23 +80,22 @@ export function buildToolActions(store: ToolDocumentStore): EditorAction[] {
 /** Content host: resolves the LIVE tool by id on every render (HMR re-key,
  *  honest deleted-tool state). */
 export function ToolDocumentContent({ documentId }: WorkspaceDocumentContentProps) {
-  useSyncExternalStore(subscribeGlobalTools, getGlobalTools);
+  useSyncExternalStore(subscribeToolContributions, getGlobalToolContributions);
   const toolId = documentId.startsWith('tool:') ? documentId.slice('tool:'.length) : documentId;
-  const tool = getDocumentTools().find((t) => t.id === toolId);
-  if (!tool) {
+  const contribution = getDocumentToolContributions().find((item) => item.id === toolId);
+  if (!contribution) {
     return (
       <div
         style={{ padding: 12, fontSize: 12, color: themeVars.content.muted, pointerEvents: 'auto' }}
       >
-        This tool is no longer available (its `src/tools/` file was deleted or renamed) — close this
-        document.
+        This tool contribution is no longer registered — close this document.
       </div>
     );
   }
   return (
     <div
-      key={`${tool.id}:${tool.version}`}
-      data-testid={`tool-document:${tool.id}`}
+      key={`${contribution.id}:${contribution.version}`}
+      data-testid={`tool-document:${contribution.id}`}
       style={{
         flex: 1,
         minHeight: 0,
@@ -104,7 +107,7 @@ export function ToolDocumentContent({ documentId }: WorkspaceDocumentContentProp
         padding: 12,
       }}
     >
-      <ToolHost tool={tool} />
+      <ToolHost contribution={contribution} />
     </div>
   );
 }

package/src/components/tool-schema-form.tsx

@@ -0,0 +1,258 @@
+import type { CSSProperties } from 'react';
+import { Checkbox, fontSize, Select, TextInput, text } from '../design-system';
+
+type JsonSchema = Record<string, unknown>;
+
+function schemaRecord(value: unknown): JsonSchema {
+  return value && typeof value === 'object' && !Array.isArray(value) ? (value as JsonSchema) : {};
+}
+
+function schemaType(schema: JsonSchema): string | undefined {
+  const type = schema['type'];
+  if (typeof type === 'string') return type;
+  if (Array.isArray(type)) return type.find((item): item is string => item !== 'null');
+  return undefined;
+}
+
+export function defaultValueForSchema(value: unknown): unknown {
+  const schema = schemaRecord(value);
+  if ('default' in schema) return structuredClone(schema['default']);
+  const type = schemaType(schema);
+  if (type === 'object' || schema['properties']) {
+    const result: Record<string, unknown> = {};
+    for (const [key, child] of Object.entries(schemaRecord(schema['properties']))) {
+      const childSchema = schemaRecord(child);
+      if (
+        'default' in childSchema ||
+        (Array.isArray(schema['required']) && schema['required'].includes(key))
+      ) {
+        result[key] = defaultValueForSchema(childSchema);
+      }
+    }
+    return result;
+  }
+  if (type === 'array') return [];
+  if (type === 'boolean') return false;
+  if (type === 'number' || type === 'integer') return Number(schema['minimum'] ?? 0);
+  return '';
+}
+
+function humanize(value: string): string {
+  return value
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[-_]/g, ' ')
+    .replace(/^./, (letter) => letter.toUpperCase());
+}
+
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: this is the deliberately small JSON-Schema widget dispatch; each primitive type remains native HTML.
+function PrimitiveField({
+  name,
+  schema,
+  value,
+  required,
+  onChange,
+}: {
+  name: string;
+  schema: JsonSchema;
+  value: unknown;
+  required: boolean;
+  onChange(value: unknown): void;
+}) {
+  const type = schemaType(schema);
+  const description = typeof schema['description'] === 'string' ? schema['description'] : null;
+  const choices = Array.isArray(schema['enum']) ? schema['enum'] : null;
+  const id = `tool-field:${name}`;
+
+  if (type === 'boolean') {
+    return (
+      <label style={{ ...fieldStyle, gridTemplateColumns: '18px minmax(0, 1fr)' }}>
+        <Checkbox
+          id={id}
+          checked={value === true}
+          onChange={(event) => onChange(event.target.checked)}
+        />
+        <span>
+          <span style={fieldLabelStyle}>{humanize(name)}</span>
+          {description && <span style={descriptionStyle}>{description}</span>}
+        </span>
+      </label>
+    );
+  }
+
+  const label = (
+    <span style={fieldLabelStyle}>
+      {humanize(name)} {!required && <span style={optionalStyle}>optional</span>}
+    </span>
+  );
+
+  if (choices) {
+    return (
+      <label style={fieldStyle} htmlFor={id}>
+        {label}
+        <Select
+          id={id}
+          value={String(value ?? '')}
+          onChange={(event) => onChange(event.target.value)}
+          style={controlLayoutStyle}
+        >
+          {!required && <option value="">Not set</option>}
+          {choices.map((choice) => (
+            <option key={String(choice)} value={String(choice)}>
+              {String(choice)}
+            </option>
+          ))}
+        </Select>
+        {description && <span style={descriptionStyle}>{description}</span>}
+      </label>
+    );
+  }
+
+  if (type === 'number' || type === 'integer') {
+    return (
+      <label style={fieldStyle} htmlFor={id}>
+        {label}
+        <TextInput
+          id={id}
+          type="number"
+          value={typeof value === 'number' ? value : ''}
+          min={typeof schema['minimum'] === 'number' ? schema['minimum'] : undefined}
+          max={typeof schema['maximum'] === 'number' ? schema['maximum'] : undefined}
+          step={type === 'integer' ? 1 : 'any'}
+          onChange={(event) =>
+            onChange(event.target.value === '' ? undefined : Number(event.target.value))
+          }
+          style={controlLayoutStyle}
+        />
+        {description && <span style={descriptionStyle}>{description}</span>}
+      </label>
+    );
+  }
+
+  if (type === 'array' && schemaType(schemaRecord(schema['items'])) === 'string') {
+    return (
+      <label style={fieldStyle} htmlFor={id}>
+        {label}
+        <TextInput
+          id={id}
+          value={Array.isArray(value) ? value.join(', ') : ''}
+          onChange={(event) =>
+            onChange(
+              event.target.value
+                .split(',')
+                .map((item) => item.trim())
+                .filter(Boolean),
+            )
+          }
+          placeholder="Comma-separated values"
+          style={controlLayoutStyle}
+        />
+        {description && <span style={descriptionStyle}>{description}</span>}
+      </label>
+    );
+  }
+
+  return (
+    <label style={fieldStyle} htmlFor={id}>
+      {label}
+      <TextInput
+        id={id}
+        value={typeof value === 'string' ? value : ''}
+        onChange={(event) => onChange(event.target.value || (required ? '' : undefined))}
+        style={controlLayoutStyle}
+      />
+      {description && <span style={descriptionStyle}>{description}</span>}
+    </label>
+  );
+}
+
+function ObjectFields({
+  schema,
+  value,
+  onChange,
+  path = '',
+}: {
+  schema: JsonSchema;
+  value: Record<string, unknown>;
+  onChange(value: Record<string, unknown>): void;
+  path?: string;
+}) {
+  const properties = schemaRecord(schema['properties']);
+  const required = new Set(Array.isArray(schema['required']) ? schema['required'] : []);
+  return (
+    <div style={{ display: 'grid', gap: 14 }}>
+      {Object.entries(properties).map(([key, child]) => {
+        const childSchema = schemaRecord(child);
+        const childType = schemaType(childSchema);
+        const update = (next: unknown) => {
+          const copy = { ...value };
+          if (next === undefined) delete copy[key];
+          else copy[key] = next;
+          onChange(copy);
+        };
+        if (childType === 'object' || childSchema['properties']) {
+          return (
+            <fieldset key={key} style={fieldsetStyle}>
+              <legend style={legendStyle}>{humanize(key)}</legend>
+              {typeof childSchema['description'] === 'string' && (
+                <p style={{ ...descriptionStyle, marginTop: 0 }}>{childSchema['description']}</p>
+              )}
+              <ObjectFields
+                schema={childSchema}
+                value={schemaRecord(value[key])}
+                onChange={update}
+                path={path ? `${path}.${key}` : key}
+              />
+            </fieldset>
+          );
+        }
+        return (
+          <PrimitiveField
+            key={key}
+            name={path ? `${path}.${key}` : key}
+            schema={childSchema}
+            value={value[key]}
+            required={required.has(key)}
+            onChange={update}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export function ToolSchemaForm({
+  schema: schemaValue,
+  value,
+  onChange,
+}: {
+  schema: unknown;
+  value: Record<string, unknown>;
+  onChange(value: Record<string, unknown>): void;
+}) {
+  const schema = schemaRecord(schemaValue);
+  if (!schema['properties']) {
+    return <div style={descriptionStyle}>This schema has no form-compatible fields.</div>;
+  }
+  return <ObjectFields schema={schema} value={value} onChange={onChange} />;
+}
+
+const fieldStyle: CSSProperties = { display: 'grid', gap: 5 };
+const fieldLabelStyle: CSSProperties = { color: text[1], fontWeight: 600, fontSize: fontSize.sm };
+const optionalStyle: CSSProperties = { color: text[3], fontWeight: 400, marginLeft: 5 };
+const descriptionStyle: CSSProperties = {
+  display: 'block',
+  color: text[2],
+  fontSize: fontSize.sm,
+  lineHeight: 1.4,
+};
+const controlLayoutStyle: CSSProperties = {
+  boxSizing: 'border-box',
+  width: '100%',
+};
+const fieldsetStyle: CSSProperties = {
+  margin: 0,
+  padding: 14,
+  border: '1px solid var(--vgai-boundary-default)',
+  borderRadius: 'var(--vgai-radius-md)',
+};
+const legendStyle: CSSProperties = { padding: '0 6px', color: text[1], fontWeight: 600 };