@vgai/editor 0.2.0

package/src/components/inspectors/json-schema-fields.ts

@@ -0,0 +1,281 @@
+/**
+ * JSON Schema → `FieldDescriptor` conversion for DATA ASSETS (W2,
+ * docs/DATA-TOOLS-DESIGN.md §2).
+ *
+ * ARCHITECTURE RULE (spec §0/§2.1): the editor consumes the EMITTED JSON
+ * Schema (`*.schema.json`, the interchange artifact produced by
+ * `toDataJsonSchema`/`z.toJSONSchema`) — it never imports or executes the
+ * project's `*.schema.ts`. That keeps the Data panel a pure consumer of the
+ * contract format ("the contract is the format, not the library") and means
+ * anything that can emit JSON Schema gets an editor for free.
+ *
+ * This is the JSON Schema sibling of `zod-fields.ts`'s `introspectSchema`
+ * (which walks live Zod internals for component schemas). Both funnel into the
+ * same `FieldDescriptor` IR so the Data panel renders with the exact widgets
+ * the component inspector uses. Like `zod-fields.ts`, this module is pure (no
+ * React, no DOM) so it can be unit-tested in Node.
+ */
+
+import type { FieldDescriptor, FieldKind } from './zod-fields';
+
+/**
+ * A `FieldDescriptor` extended with the numeric bounds JSON Schema carries
+ * (`minimum`/`maximum`). The Zod introspection path never surfaced these, but
+ * emitted data-asset schemas do (e.g. `z.number().min(0).max(10)` emits
+ * `"minimum": 0, "maximum": 10`) and the Data panel clamps number edits to
+ * them.
+ *
+ * Widened locally (W2 hardening, spec §2.1 field-depth policy) with three
+ * kinds `zod-fields.ts`'s component-inspector `FieldKind` has no use for, so
+ * they're added here rather than on the shared type:
+ * - `'group'` — an object-typed node whose `properties` the panel can recurse
+ *   into as a nested sub-form (`children` holds the nested descriptors).
+ *   Singleton data assets only; a depth cap degrades deep nesting to `'json'`.
+ * - `'json'` — anything the panel can't type (arrays, unions, a group past
+ *   the depth cap): a raw-JSON cell that parses on commit and REFUSES an
+ *   invalid edit rather than ever writing a string in place of the typed
+ *   value (the invariant this hardening exists to hold — see `JsonCell` in
+ *   `DataPanel.tsx`).
+ * - `'ref'` — a declared `dataRef(target)` field (`@engine/data/data-ref`):
+ *   the emitted schema carries `"x-vgai-ref": target` (a Zod `.meta()` that
+ *   survives `toDataJsonSchema`), so the panel renders a `stem#key` PICKER
+ *   sourced from the target file's own keys instead of a free-text cell.
+ */
+export interface DataFieldDescriptor extends Omit<FieldDescriptor, 'kind'> {
+  kind: FieldKind | 'group' | 'json' | 'ref';
+  /** Nested field descriptors, present only when `kind === 'group'`. */
+  children?: DataFieldDescriptor[];
+  min?: number;
+  max?: number;
+  /** Target asset stem for `kind === 'ref'` — the `dataRef` call's argument. */
+  refTarget?: string;
+}
+
+/**
+ * Defensive recursion cap on nested `group` descriptors (spec §2.1: "1-2
+ * levels" is the blessed shape; this is the hard backstop, not the taught
+ * limit). Past this depth a would-be group degrades to `'json'` — safe,
+ * never a corruption vector, because `JsonCell` never widens a typed value
+ * into a string on commit.
+ */
+const MAX_GROUP_DEPTH = 4;
+
+/**
+ * The two blessed data-asset shapes (spec §2.1), detected from the emitted
+ * schema's top level:
+ * - **singleton** — one config object; `properties` describes its fields.
+ *   Renders as a form.
+ * - **table** — `z.record(rowSchema)`; the emitted schema carries the row
+ *   schema as an object-valued `additionalProperties`. Renders as a grid,
+ *   one row per key in the data file.
+ */
+export type DataAssetShape =
+  | { shape: 'singleton'; fields: DataFieldDescriptor[] }
+  | { shape: 'table'; rowFields: DataFieldDescriptor[] };
+
+/** Loosely-typed view of a JSON Schema node (we only read what we render). */
+interface SchemaNode {
+  type?: string | string[];
+  properties?: Record<string, unknown>;
+  additionalProperties?: unknown;
+  enum?: unknown[];
+  default?: unknown;
+  description?: string;
+  minimum?: number;
+  maximum?: number;
+  anyOf?: unknown[];
+  /** `dataRef(target)`'s marker (`@engine/data/data-ref`) — present iff this is a declared ref field. */
+  'x-vgai-ref'?: string;
+}
+
+function asNode(value: unknown): SchemaNode | null {
+  return value && typeof value === 'object' && !Array.isArray(value) ? (value as SchemaNode) : null;
+}
+
+/**
+ * Heuristic (same idea as `zod-fields.ts`'s `looksLikeColor`): a string field
+ * edits as a color swatch when its name says color, its default is a
+ * `#rrggbb`-style value, or its description mentions color.
+ */
+function looksLikeColor(name: string, def: unknown, description: string | undefined): boolean {
+  if (/colou?r/i.test(name)) return true;
+  if (typeof def === 'string' && /^#/.test(def)) return true;
+  if (typeof description === 'string' && /\bcolou?r\b/i.test(description)) return true;
+  return false;
+}
+
+/** First declared `type` string, unwrapping the `["number","null"]` array form. */
+function nodeType(node: SchemaNode): string | undefined {
+  if (typeof node.type === 'string') return node.type;
+  if (Array.isArray(node.type)) return node.type.find((t) => t !== 'null');
+  return undefined;
+}
+
+/**
+ * Optional/nullable Zod fields can emit as `anyOf` branches; adopt the first
+ * branch that declares a type. Defensive, like zod-fields' fallbacks —
+ * anything unrecognized degrades to a raw text field, never a crash.
+ */
+function unwrapAnyOf(node: SchemaNode): SchemaNode {
+  if (nodeType(node) || node.enum || !Array.isArray(node.anyOf)) return node;
+  const branch = node.anyOf.map(asNode).find((b) => b && (nodeType(b) || b.enum));
+  if (!branch) return node;
+  // Branch supplies the type/enum; the outer node's default/description/
+  // bounds (where present) win, since Zod hoists those to the wrapper.
+  return {
+    ...branch,
+    ...node,
+    ...(branch.type ? { type: branch.type } : {}),
+    ...(branch.enum ? { enum: branch.enum } : {}),
+  };
+}
+
+/**
+ * Map one (unwrapped) schema node to the widget kind + enum options.
+ *
+ * `depth` is the nesting depth of THIS node (0 = a direct field of the
+ * top-level singleton/row schema) — it gates the `'group'` case so recursion
+ * can't run away on a pathological schema; see `MAX_GROUP_DEPTH`.
+ */
+function detectKind(
+  node: SchemaNode,
+  name: string,
+  depth: number,
+): { kind: DataFieldDescriptor['kind']; options?: string[]; refTarget?: string } {
+  // Ref first: a declared `dataRef(target)` field is a plain `{ type:
+  // "string", pattern: ..., "x-vgai-ref": target }` — it must win over both
+  // the enum and plain-string branches below, which would otherwise render
+  // it as ordinary free text.
+  if (typeof node['x-vgai-ref'] === 'string') {
+    return { kind: 'ref', refTarget: node['x-vgai-ref'] };
+  }
+  // Enum first: emitted enums are `{ type: "string", enum: [...] }`, so the
+  // enum check must win over the plain-string branch.
+  if (Array.isArray(node.enum) && node.enum.length > 0) {
+    return { kind: 'enum', options: node.enum.map(String) };
+  }
+  switch (nodeType(node)) {
+    case 'number':
+    case 'integer':
+      return { kind: 'number' };
+    case 'boolean':
+      return { kind: 'boolean' };
+    case 'string':
+      return looksLikeColor(name, node.default, node.description)
+        ? { kind: 'color' }
+        : { kind: 'string' };
+    default:
+      // `type: 'object'` (or absent — Zod can omit `type` on some wrapper
+      // shapes) with an object-valued `properties`: a nested group the panel
+      // can recurse into as a sub-form, UNLESS the depth cap is hit. Arrays,
+      // unions, and anything else with no `properties` to walk (including a
+      // capped-out group) fall through to `'json'` — a raw-JSON cell that
+      // parses on commit and refuses invalid input, never a widened string
+      // (W2 hardening: the prior fallback here was `'string'`, which is
+      // exactly the corruption this module exists to prevent — see
+      // `DataFieldDescriptor`'s doc comment).
+      if (asNode(node.properties) && depth < MAX_GROUP_DEPTH) {
+        return { kind: 'group' };
+      }
+      return { kind: 'json' };
+  }
+}
+
+/** Convert ONE JSON Schema property node into a field descriptor. */
+function toDescriptor(name: string, raw: unknown, depth: number): DataFieldDescriptor {
+  const node = unwrapAnyOf(asNode(raw) ?? {});
+  const { kind, options, refTarget } = detectKind(node, name, depth);
+
+  const fd: DataFieldDescriptor = { name, kind };
+  if (options !== undefined) fd.options = options;
+  if (refTarget !== undefined) fd.refTarget = refTarget;
+  if (node.default !== undefined) fd.default = node.default;
+  if (node.description !== undefined) fd.description = node.description;
+  if (typeof node.minimum === 'number') fd.min = node.minimum;
+  if (typeof node.maximum === 'number') fd.max = node.maximum;
+  if (kind === 'group') fd.children = jsonSchemaToFieldDescriptors(node, depth + 1);
+  return fd;
+}
+
+/**
+ * Convert a JSON Schema OBJECT node's `properties` into field descriptors.
+ *
+ * The `"$schema"` property is skipped: `toDataJsonSchema` deliberately allows
+ * a `"$schema"` string on emitted object schemas so VS Code doesn't flag the
+ * declaration line in data files (spec §9.1) — it is plumbing, not a field.
+ *
+ * `depth` is the nesting depth of the fields THIS call produces (0 at the
+ * top-level call) — threaded through so a nested `group`'s own children are
+ * classified one level deeper; see `MAX_GROUP_DEPTH`.
+ */
+export function jsonSchemaToFieldDescriptors(schema: unknown, depth = 0): DataFieldDescriptor[] {
+  const node = asNode(schema);
+  const props = node ? asNode(node.properties) : null;
+  if (!props) return [];
+
+  const fields: DataFieldDescriptor[] = [];
+  for (const [name, propSchema] of Object.entries(props)) {
+    if (name === '$schema') continue;
+    fields.push(toDescriptor(name, propSchema, depth));
+  }
+  return fields;
+}
+
+/**
+ * Classify an emitted data-asset schema as one of the two blessed shapes
+ * (spec §2.1) and return the descriptors the Data panel renders.
+ *
+ * Table detection MUST run first: a table's emitted schema also carries a
+ * top-level `properties: { "$schema": … }` (the §9.1 allowance), so
+ * "has properties" alone would misread every table as a singleton. The
+ * discriminator is an OBJECT-VALUED `additionalProperties` — the row schema
+ * `z.record(rowSchema)` emits (a bare boolean `additionalProperties` is just
+ * an open/closed-object flag, not a row schema).
+ *
+ * Returns `null` for anything that is neither (the panel shows the file as
+ * unsupported rather than guessing).
+ */
+export function describeDataSchema(schema: unknown): DataAssetShape | null {
+  const node = asNode(schema);
+  if (!node) return null;
+
+  const rowSchema = asNode(node.additionalProperties);
+  if (rowSchema && asNode(rowSchema.properties)) {
+    return { shape: 'table', rowFields: jsonSchemaToFieldDescriptors(rowSchema) };
+  }
+
+  const fields = jsonSchemaToFieldDescriptors(node);
+  if (fields.length > 0) return { shape: 'singleton', fields };
+
+  return null;
+}
+
+/**
+ * A fresh value for one row-schema field (W6b, docs/DATA-TOOLS-DESIGN.md §7):
+ * the schema's own declared `default` when present (cloned — never the same
+ * reference, so two new rows never share a mutable nested object), else the
+ * kind's zero value. Used to build a brand-new table row (add-row) and to
+ * fill in a cell a CSV import left blank/missing (W6c).
+ */
+export function defaultValueForDescriptor(f: DataFieldDescriptor): unknown {
+  if (f.default !== undefined) return structuredClone(f.default);
+  switch (f.kind) {
+    case 'number':
+      return f.min ?? 0;
+    case 'boolean':
+      return false;
+    case 'color':
+      return '#ffffff';
+    case 'enum':
+      return f.options?.[0] ?? '';
+    case 'string':
+    case 'ref':
+      return '';
+    case 'group':
+      return Object.fromEntries(
+        (f.children ?? []).map((c) => [c.name, defaultValueForDescriptor(c)]),
+      );
+    default:
+      return null; // 'json' — JsonCell renders/edits it safely
+  }
+}

package/src/components/inspectors/multi-edit-utils.ts

@@ -0,0 +1,49 @@
+import type { SceneEntity } from '@engine/scene/scene-types';
+
+/** Shared props for all inspector sections. */
+export interface SectionProps {
+  entities: SceneEntity[];
+  ids: string[];
+}
+
+/** Return the common numeric value across entities, or null if mixed. */
+export function commonNum(
+  entities: SceneEntity[],
+  getter: (e: SceneEntity) => number,
+): number | null {
+  if (entities.length === 0) return null;
+  const first = getter(entities[0]!);
+  return entities.every((e) => Math.abs(getter(e) - first) < 0.0005) ? first : null;
+}
+
+/** Return the common string value across entities, or null if mixed. */
+export function commonStr(
+  entities: SceneEntity[],
+  getter: (e: SceneEntity) => string | undefined,
+): string | null {
+  if (entities.length === 0) return null;
+  const first = getter(entities[0]!);
+  return entities.every((e) => getter(e) === first) ? (first ?? null) : null;
+}
+
+/** Return the common boolean value across entities, or null if mixed. */
+export function commonBool(
+  entities: SceneEntity[],
+  getter: (e: SceneEntity) => boolean,
+): boolean | null {
+  if (entities.length === 0) return null;
+  const first = getter(entities[0]!);
+  return entities.every((e) => getter(e) === first) ? first : null;
+}
+
+/** Return the common Vec3 across entities, with per-axis null for mixed. */
+export function commonVec3(
+  entities: SceneEntity[],
+  getter: (e: SceneEntity) => [number, number, number],
+): [number | null, number | null, number | null] {
+  return [
+    commonNum(entities, (e) => getter(e)[0]),
+    commonNum(entities, (e) => getter(e)[1]),
+    commonNum(entities, (e) => getter(e)[2]),
+  ];
+}

package/src/components/inspectors/zod-fields.ts

@@ -0,0 +1,184 @@
+/**
+ * Schema introspection for the component inspector.
+ *
+ * `introspectSchema` walks a Zod object schema (zod 4, the version the engine
+ * uses via `z.toJSONSchema`) and produces a flat list of `FieldDescriptor`s that
+ * the inspector renders as typed widgets. It reads the zod internal `_def`
+ * directly because zod offers no public reflection API. The walk is defensive:
+ * it also understands the zod 3 `_def.typeName` shape and falls back to a plain
+ * string/text field for anything it does not recognise.
+ *
+ * This module is pure (no React, no DOM) so it can be unit-tested in Node.
+ */
+
+import type { z } from 'zod';
+
+/** Widget kind the inspector should render for a field. */
+export type FieldKind = 'number' | 'boolean' | 'string' | 'color' | 'vec3' | 'enum' | 'select';
+
+/** One editable field discovered on a component schema. */
+export interface FieldDescriptor {
+  /** Property name on the component data object. */
+  name: string;
+  /** Which widget to render. */
+  kind: FieldKind;
+  /** Default value from `.default(...)`, if any. */
+  default?: unknown;
+  /** Human description from `.describe(...)`, if any. */
+  description?: string;
+  /** Allowed string values for `enum`/`select` kinds. */
+  options?: string[];
+}
+
+/** Loosely-typed view of a zod node's internal definition. */
+interface ZodDef {
+  type?: string; // zod 4 discriminator: 'number' | 'default' | 'enum' | ...
+  typeName?: string; // zod 3 discriminator: 'ZodNumber' | 'ZodDefault' | ...
+  innerType?: AnyZod; // wrapper (default/optional/nullable/readonly) payload
+  defaultValue?: unknown | (() => unknown); // value (zod 4) or thunk (zod 3)
+  description?: string;
+  entries?: Record<string, string>; // zod 4 enum
+  values?: unknown[]; // zod 3 enum
+  items?: AnyZod[]; // tuple element schemas
+  element?: AnyZod; // array element schema
+}
+
+interface AnyZod {
+  _def?: ZodDef;
+  description?: string;
+  options?: unknown[];
+}
+
+/** Wrapper node types that hold the real schema in `_def.innerType`. */
+const WRAPPERS = new Set(['default', 'optional', 'nullable', 'readonly', 'nonoptional']);
+
+/** Normalised node type string (zod 4 `type` or de-prefixed zod 3 `typeName`). */
+function defType(node: AnyZod | undefined): string {
+  const d = node?._def;
+  if (!d) return 'unknown';
+  if (typeof d.type === 'string') return d.type;
+  if (typeof d.typeName === 'string') return d.typeName.replace(/^Zod/, '').toLowerCase();
+  return 'unknown';
+}
+
+interface Unwrapped {
+  inner: AnyZod;
+  default: unknown;
+  description: string | undefined;
+}
+
+/** Peel wrapper nodes, collecting the default value and description along the way. */
+function unwrap(field: AnyZod): Unwrapped {
+  let cur: AnyZod = field;
+  let def: unknown;
+  let description: string | undefined = field.description ?? field._def?.description;
+
+  while (cur && WRAPPERS.has(defType(cur))) {
+    if (defType(cur) === 'default') {
+      const dv = cur._def?.defaultValue;
+      def = typeof dv === 'function' ? (dv as () => unknown)() : dv;
+    }
+    if (!description) description = cur._def?.description;
+    const inner = cur._def?.innerType;
+    if (!inner) break;
+    cur = inner;
+  }
+  if (!description) description = cur?.description ?? cur?._def?.description;
+  return { inner: cur, default: def, description };
+}
+
+/** Extract the allowed string values of a zod enum (zod 3 or 4 shape). */
+function enumOptions(inner: AnyZod): string[] {
+  const d = inner._def;
+  if (d?.entries) return Object.values(d.entries).map(String);
+  if (Array.isArray(d?.values)) return d.values.map(String);
+  if (Array.isArray(inner.options)) return inner.options.map(String);
+  return [];
+}
+
+/** Heuristic: should this string field be edited as a color swatch? */
+function looksLikeColor(name: string, def: unknown, description: string | undefined): boolean {
+  if (/colou?r/i.test(name)) return true;
+  if (typeof def === 'string' && /^#/.test(def)) return true;
+  if (typeof description === 'string' && /\bcolou?r\b/i.test(description)) return true;
+  return false;
+}
+
+interface KindResult {
+  kind: FieldKind;
+  options?: string[];
+}
+
+function detectKind(
+  inner: AnyZod,
+  name: string,
+  def: unknown,
+  description: string | undefined,
+): KindResult {
+  switch (defType(inner)) {
+    case 'number':
+    case 'int':
+      return { kind: 'number' };
+    case 'boolean':
+      return { kind: 'boolean' };
+    case 'enum':
+    case 'nativeenum': {
+      const options = enumOptions(inner);
+      return options.length ? { kind: 'enum', options } : { kind: 'string' };
+    }
+    case 'string':
+      return looksLikeColor(name, def, description) ? { kind: 'color' } : { kind: 'string' };
+    case 'tuple': {
+      const items = inner._def?.items ?? [];
+      if (items.length === 3 && items.every((it) => defType(it) === 'number')) {
+        return { kind: 'vec3' };
+      }
+      return { kind: 'string' }; // unsupported tuple shape -> text/JSON fallback
+    }
+    case 'array': {
+      const el = inner._def?.element;
+      // Arrays have no fixed length in the schema; only treat a 3-number array
+      // with a length-3 default as a vec3, otherwise fall back to text.
+      if (el && defType(el) === 'number' && Array.isArray(def) && def.length === 3) {
+        return { kind: 'vec3' };
+      }
+      return { kind: 'string' };
+    }
+    default:
+      // Unknown / unsupported zod types: edit as raw text (JSON for non-strings).
+      return { kind: 'string' };
+  }
+}
+
+/** Read the object shape from a zod object schema (zod 3 or 4). */
+function getShape(schema: z.ZodObject<z.ZodRawShape>): Record<string, AnyZod> | undefined {
+  const anySchema = schema as unknown as {
+    shape?: Record<string, AnyZod> | (() => Record<string, AnyZod>);
+    _def?: { shape?: Record<string, AnyZod> | (() => Record<string, AnyZod>) };
+  };
+  const raw = anySchema.shape ?? anySchema._def?.shape;
+  const resolved = typeof raw === 'function' ? raw() : raw;
+  return resolved && typeof resolved === 'object' ? resolved : undefined;
+}
+
+/**
+ * Introspect a Zod object schema into a flat list of editable field descriptors.
+ * Returns `[]` for anything that is not a usable object schema.
+ */
+export function introspectSchema(schema: z.ZodObject<z.ZodRawShape>): FieldDescriptor[] {
+  const shape = getShape(schema);
+  if (!shape) return [];
+
+  const fields: FieldDescriptor[] = [];
+  for (const [name, field] of Object.entries(shape)) {
+    if (!field || typeof field !== 'object') continue;
+    const { inner, default: def, description } = unwrap(field);
+    const { kind, options } = detectKind(inner, name, def, description);
+    const fd: FieldDescriptor = { name, kind };
+    if (def !== undefined) fd.default = def;
+    if (description) fd.description = description;
+    if (options?.length) fd.options = options;
+    fields.push(fd);
+  }
+  return fields;
+}

package/src/components/primitives/ColorInput.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react';
+import { useInteractiveEditScope } from '../../interactive-edit-scope';
+
+interface ColorInputProps {
+  value: string | null;
+  onChange: (value: string) => void;
+}
+
+export function ColorInput({ value, onChange }: ColorInputProps) {
+  // Local draft state for the text input — only commits on blur or Enter.
+  const [draft, setDraft] = useState(value ?? '');
+  const editScope = useInteractiveEditScope();
+
+  // Sync draft when the external value changes (e.g. undo, selection change).
+  useEffect(() => {
+    setDraft(value ?? '');
+  }, [value]);
+
+  const commit = () => {
+    const trimmed = draft.trim();
+    if (trimmed && trimmed !== value) {
+      onChange(trimmed);
+    }
+  };
+
+  if (value === null) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+        <div
+          style={{
+            width: 28,
+            height: 22,
+            border: '1px solid #333',
+            borderRadius: 2,
+            background:
+              'linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%), linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%)',
+            backgroundSize: '8px 8px',
+            backgroundPosition: '0 0, 4px 4px',
+          }}
+        />
+        <input
+          placeholder="mixed"
+          onChange={(e) => {
+            if (e.target.value) onChange(e.target.value);
+          }}
+          style={{
+            flex: 1,
+            background: '#1e1e1e',
+            color: '#666',
+            fontStyle: 'italic',
+            border: '1px solid #333',
+            borderRadius: 2,
+            padding: '2px 4px',
+            fontSize: 12,
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+      <input
+        type="color"
+        value={value}
+        // The native picker fires onChange continuously while dragging. Coalesce
+        // the whole drag into one undo step (beginInteractiveEdit is idempotent);
+        // the gesture closes on blur when the picker is dismissed.
+        onChange={(e) => {
+          editScope?.begin();
+          onChange(e.target.value);
+        }}
+        onBlur={() => editScope?.end()}
+        style={{
+          width: 28,
+          height: 22,
+          border: '1px solid #333',
+          borderRadius: 2,
+          padding: 0,
+          cursor: 'pointer',
+          background: 'transparent',
+        }}
+      />
+      <input
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            commit();
+            (e.target as HTMLInputElement).blur();
+          } else if (e.key === 'Escape') {
+            setDraft(value);
+            (e.target as HTMLInputElement).blur();
+          }
+        }}
+        style={{
+          flex: 1,
+          background: '#1e1e1e',
+          color: '#c5c8ce',
+          border: '1px solid #333',
+          borderRadius: 2,
+          padding: '2px 4px',
+          fontSize: 12,
+        }}
+      />
+    </div>
+  );
+}