@volter/editor-sdk 0.5.57

package/src/widgets/primitives/ColorInput.tsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react';
+import { useInteractiveEditScope } from '../interactive-edit-scope';
+import { ColorSwatchInput, TextInput } from './FormControls';
+
+interface ColorInputProps {
+  value: string | null;
+  onChange: (value: string) => void;
+  /** Read-only: swatch and hex field both refuse input. Optional — existing callers unchanged. */
+  disabled?: boolean;
+}
+
+export function ColorInput({ value, onChange, disabled = false }: 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 className="vgai-color-input">
+        <div className="vgai-color-input-mixed" />
+        <TextInput
+          // Mixed-value language unified on the em-dash (I-15), matching
+          // NumberInput's mixed display.
+          placeholder="—"
+          disabled={disabled}
+          onChange={(e) => {
+            if (e.target.value) onChange(e.target.value);
+          }}
+          data-mixed="true"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="vgai-color-input">
+      <ColorSwatchInput
+        value={value}
+        disabled={disabled}
+        // 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()}
+      />
+      <TextInput
+        value={draft}
+        disabled={disabled}
+        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();
+          }
+        }}
+      />
+    </div>
+  );
+}

package/src/widgets/primitives/DraftTextInput.tsx

@@ -0,0 +1,63 @@
+/**
+ * A text field whose typing is LOCAL until Enter or blur — the discipline
+ * `NumberInput` uses for its typed edits, lifted out for every Inspector row
+ * whose `onChange` is a SOURCE WRITE.
+ *
+ * WHY. A source write remounts the world, and a controlled input that
+ * commits per keystroke re-renders from the in-flight value under the
+ * typist: the second digit of "50" lands on a field that already reverted to
+ * "5" (runhuman pass 49, Grid Size "takes half the value"), a deletion in the
+ * name field "would not take" (pass 45). Commit once, on Enter/blur; Escape
+ * cancels. While not focused the field tracks the live value, so an external
+ * change still shows.
+ */
+
+import { type InputHTMLAttributes, useRef, useState } from 'react';
+import { TextInput } from './FormControls';
+
+export interface DraftTextInputProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onBlur'> {
+  /** The live value, shown whenever the field is not being edited. */
+  readonly value: string;
+  /** Fires ONCE per committed edit (Enter or blur) with the final text. Not
+   *  called when the text is unchanged. */
+  readonly onCommit: (next: string) => void;
+}
+
+export function DraftTextInput({
+  value,
+  onCommit,
+  onKeyDown,
+  onFocus,
+  ...rest
+}: DraftTextInputProps) {
+  const [draft, setDraft] = useState<string | null>(null);
+  // Escape blurs, and blur commits — the flag lets the cancel win over the
+  // stale draft the blur handler still closes over.
+  const cancelled = useRef(false);
+  const commit = (): void => {
+    if (!cancelled.current && draft !== null && draft !== value) onCommit(draft);
+    cancelled.current = false;
+    setDraft(null);
+  };
+  return (
+    <TextInput
+      {...rest}
+      value={draft ?? value}
+      onFocus={(event) => {
+        setDraft(value);
+        onFocus?.(event);
+      }}
+      onChange={(event) => setDraft(event.target.value)}
+      onBlur={commit}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter') (event.target as HTMLInputElement).blur();
+        if (event.key === 'Escape') {
+          cancelled.current = true;
+          (event.target as HTMLInputElement).blur();
+        }
+        onKeyDown?.(event);
+      }}
+    />
+  );
+}

package/src/widgets/primitives/EditorIcon.tsx

@@ -0,0 +1,157 @@
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import {
+  faCaretDown,
+  faCaretRight,
+  faChevronDown,
+  faChevronRight,
+} from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import type React from 'react';
+import { useSyncExternalStore } from 'react';
+import { activeIconGlyph, activeIconSetSnapshot, subscribeIconSets } from '../icon-set-registry';
+import { themeVars } from '../theme';
+
+export type EditorIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type EditorIconTone = 'current' | 'primary' | 'muted' | 'dim' | 'accent' | 'danger';
+
+// A glyph's size is the ICON scale (`theme.ts`'s `iconSize`), not the type
+// scale: these sizes used to be the font's rungs, so a skin that tightened its
+// text shrank every glyph with it — under Blender's density the chrome drew
+// 10–11 px glyphs where Blender draws 14.
+const SIZE: Record<EditorIconSize, string> = {
+  xs: 'var(--vgai-icon-xs)',
+  sm: 'var(--vgai-icon-sm)',
+  md: 'var(--vgai-icon-md)',
+  lg: 'var(--vgai-icon-lg)',
+  xl: 'var(--vgai-icon-xl)',
+  '2xl': 'var(--vgai-icon-2xl)',
+};
+
+const TONE: Record<EditorIconTone, string | undefined> = {
+  current: undefined,
+  primary: themeVars.content.primary,
+  muted: themeVars.content.muted,
+  dim: themeVars.content.dim,
+  accent: themeVars.accent.default,
+  danger: themeVars.semantic.danger,
+};
+
+export interface EditorIconProps extends Omit<React.HTMLAttributes<SVGSVGElement>, 'color'> {
+  icon: IconDefinition;
+  size?: EditorIconSize;
+  tone?: EditorIconTone;
+  /** Icons inside already-labelled controls stay decorative by default. */
+  label?: string;
+  spin?: boolean;
+}
+
+/** Canonical editor-chrome icon metrics and accessibility behavior. */
+export function EditorIcon({
+  icon,
+  size = 'sm',
+  tone = 'current',
+  label,
+  className,
+  style,
+  spin = false,
+  ...svgProps
+}: EditorIconProps) {
+  // The active icon set (`icon-set-registry.ts`): a glyph it carries for this
+  // name paints in Font Awesome's box (1.25em fixed width, 1em tall, the
+  // -0.125em baseline) so no site notices which set is on.
+  useSyncExternalStore(subscribeIconSets, activeIconSetSnapshot, activeIconSetSnapshot);
+  const glyph = activeIconGlyph(icon.iconName);
+  if (glyph) {
+    // THE GLYPH'S OWN COLOUR, and who wins. A site that names a tone has
+    // said something about THIS instance — de-emphasis (`dim`/`muted` on a
+    // quiet rail), status (`danger`) — and that always wins; `current` is the
+    // default, i.e. the site said nothing, so the glyph's category speaks.
+    const siteToned = tone !== 'current';
+    const categoryInk = glyph.tone ? `var(--vgai-category-${glyph.tone}, currentColor)` : undefined;
+    // With a `tonedPath` the category tints only that path and the body stays
+    // `currentColor` — Blender's operator marks tint the OPERATED element and
+    // leave the cube neutral. Without one, the category is the whole glyph's
+    // ink, so it rides `color` and every path inherits it.
+    const svgColor = siteToned ? TONE[tone] : glyph.tonedPath ? undefined : categoryInk;
+    const tonedFill = siteToned ? 'currentColor' : (categoryInk ?? 'currentColor');
+    return (
+      <svg
+        {...svgProps}
+        viewBox={glyph.viewBox ?? '0 0 16 16'}
+        // THE SITE'S HALF OF THE INK. A category token is the glyph's colour
+        // at FULL opacity (`theme.ts`'s category docblock) and Blender's own
+        // alpha belongs to the SITE — 0.80 in the Outliner and on an inactive
+        // Properties tab, 1.00 on the open tab and in the tool shelf. A site
+        // can only apply that to the glyphs it actually tints, so the tone
+        // rides out as a DOM marker: a set with no tone for this name (Font
+        // Awesome's, every Classic surface) carries no attribute and no rule
+        // keyed on it can reach it.
+        data-vgai-tone={siteToned ? undefined : glyph.tone}
+        className={className}
+        aria-hidden={label ? undefined : (svgProps['aria-hidden'] ?? 'true')}
+        aria-label={label}
+        role={label ? 'img' : undefined}
+        style={{
+          width: '1.25em',
+          height: '1em',
+          overflow: 'visible',
+          verticalAlign: '-0.125em',
+          fontSize: SIZE[size],
+          color: svgColor,
+          ...style,
+        }}
+      >
+        <path d={glyph.path} fill="currentColor" />
+        {glyph.tonedPath ? <path d={glyph.tonedPath} fill={tonedFill} /> : null}
+      </svg>
+    );
+  }
+  return (
+    <FontAwesomeIcon
+      {...svgProps}
+      icon={icon}
+      fixedWidth
+      spin={spin}
+      className={className}
+      aria-hidden={label ? undefined : (svgProps['aria-hidden'] ?? 'true')}
+      aria-label={label}
+      role={label ? 'img' : undefined}
+      style={{ fontSize: SIZE[size], color: TONE[tone], ...style }}
+    />
+  );
+}
+
+export function DisclosureIcon({
+  direction,
+  size = 'xs',
+  tone = 'current',
+  style,
+}: {
+  direction: 'right' | 'down';
+  size?: EditorIconSize;
+  tone?: EditorIconTone;
+  style?: React.CSSProperties;
+}) {
+  return (
+    <EditorIcon
+      icon={direction === 'right' ? faChevronRight : faChevronDown}
+      size={size}
+      tone={tone}
+      {...(style ? { style } : {})}
+    />
+  );
+}
+
+export function TreeDisclosureIcon({
+  direction,
+  size = 'xs',
+  tone = 'current',
+}: {
+  direction: 'right' | 'down';
+  size?: EditorIconSize;
+  tone?: EditorIconTone;
+}) {
+  return (
+    <EditorIcon icon={direction === 'right' ? faCaretRight : faCaretDown} size={size} tone={tone} />
+  );
+}

package/src/widgets/primitives/FormControls.tsx

@@ -0,0 +1,88 @@
+import {
+  forwardRef,
+  type InputHTMLAttributes,
+  type SelectHTMLAttributes,
+  type TextareaHTMLAttributes,
+} from 'react';
+
+function classes(base: string, className?: string): string {
+  return className ? `${base} ${className}` : base;
+}
+
+export type TextInputProps = InputHTMLAttributes<HTMLInputElement>;
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
+  { className, type = 'text', ...props },
+  ref,
+) {
+  return <input {...props} ref={ref} type={type} className={classes('vgai-input', className)} />;
+});
+
+export type SelectProps = SelectHTMLAttributes<HTMLSelectElement>;
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { className, ...props },
+  ref,
+) {
+  return <select {...props} ref={ref} className={classes('vgai-select', className)} />;
+});
+
+export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+/** Canonical multiline editor field. Paint and interaction states live in theme.css. */
+export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(function TextArea(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <textarea {...props} ref={ref} className={classes('vgai-input vgai-textarea', className)} />
+  );
+});
+
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <input {...props} ref={ref} type="checkbox" className={classes('vgai-checkbox', className)} />
+  );
+});
+
+export type ColorSwatchInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+/** Native color picker with editor-owned dimensions, border, and focus treatment. */
+export const ColorSwatchInput = forwardRef<HTMLInputElement, ColorSwatchInputProps>(
+  function ColorSwatchInput({ className, ...props }, ref) {
+    return (
+      <input
+        {...props}
+        ref={ref}
+        type="color"
+        className={classes('vgai-color-swatch', className)}
+      />
+    );
+  },
+);
+
+export type FileInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+/** File input kept native for platform behavior while sharing editor focus/disabled states. */
+export const FileInput = forwardRef<HTMLInputElement, FileInputProps>(function FileInput(
+  { className, ...props },
+  ref,
+) {
+  return (
+    <input {...props} ref={ref} type="file" className={classes('vgai-file-input', className)} />
+  );
+});
+
+export type RangeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>;
+
+export const RangeInput = forwardRef<HTMLInputElement, RangeInputProps>(function RangeInput(
+  { className, ...props },
+  ref,
+) {
+  return <input {...props} ref={ref} type="range" className={classes('vgai-range', className)} />;
+});

package/src/widgets/primitives/HoverPreview.tsx

@@ -0,0 +1,96 @@
+/**
+ * HoverPreview — a rich, anchored preview that opens on hover or keyboard
+ * focus of its single trigger child, through {@link AnchoredMenu} (portaled,
+ * no focus trap, dismissed on leave/blur/Escape/outside press).
+ *
+ * This is the design-system's OWNED home for hover-triggered preview
+ * behavior, the same way {@link Tooltip} owns hover-triggered text tips:
+ * product surfaces declare WHAT previews (`content`), never wire
+ * `onMouseEnter`/`onMouseLeave` themselves — the migration guard forbids
+ * exactly those handlers outside `primitives/` because hand-rolled hover
+ * wiring is how focus parity (a keyboard user must get the same preview) and
+ * Escape semantics quietly fork per surface.
+ *
+ * Where {@link Tooltip} carries a string and a hotkey, HoverPreview carries
+ * an arbitrary body (a thumbnail card, a monospace excerpt). Escape closes
+ * the preview and STOPS there — the surface around it never also reads that
+ * Escape (the first consumer is the chat composer, where Escape would
+ * otherwise close the composer itself).
+ */
+
+import {
+  cloneElement,
+  isValidElement,
+  type KeyboardEvent,
+  type ReactElement,
+  type ReactNode,
+  useId,
+  useRef,
+  useState,
+} from 'react';
+import { AnchoredMenu, type AnchoredMenuProps } from './AnchoredMenu';
+
+export interface HoverPreviewProps
+  extends Omit<
+    AnchoredMenuProps,
+    'anchorRef' | 'children' | 'onDismiss' | 'id' | 'role' | 'content'
+  > {
+  /** The rich preview body, rendered inside the anchored surface. */
+  readonly preview: ReactNode;
+  /** The single trigger element the preview anchors to. */
+  readonly children: ReactElement<{ 'aria-describedby'?: string }>;
+}
+
+export function HoverPreview({ preview, children, ...menuProps }: HoverPreviewProps) {
+  const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLElement | null>(null);
+  const id = useId();
+
+  const close = () => setOpen(false);
+  const openAt = (anchor: HTMLElement) => {
+    anchorRef.current = anchor;
+    setOpen(true);
+  };
+
+  let child = children;
+  if (isValidElement<{ 'aria-describedby'?: string }>(children)) {
+    const describedBy = [children.props['aria-describedby'], open ? id : null]
+      .filter(Boolean)
+      .join(' ');
+    child = cloneElement(children, describedBy ? { 'aria-describedby': describedBy } : {});
+  }
+
+  return (
+    <span
+      className="vgai-tooltip-anchor"
+      onMouseEnter={(event) => openAt(event.currentTarget)}
+      onMouseLeave={close}
+      onFocusCapture={(event) => openAt(event.currentTarget)}
+      onBlurCapture={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) close();
+      }}
+      onKeyDown={(event: KeyboardEvent) => {
+        if (event.key !== 'Escape' || !open) return;
+        // The preview consumed the key; the surface around it must not also
+        // read this Escape (e.g. as "close the composer").
+        event.preventDefault();
+        event.stopPropagation();
+        close();
+      }}
+    >
+      {child}
+      {open && anchorRef.current && (
+        <AnchoredMenu
+          {...menuProps}
+          anchorRef={anchorRef}
+          id={id}
+          role="tooltip"
+          autoFocusFirst={false}
+          onDismiss={close}
+        >
+          {preview}
+        </AnchoredMenu>
+      )}
+    </span>
+  );
+}

package/src/widgets/primitives/JsonInput.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useRef, useState } from 'react';
+import { themeVars } from '../theme';
+import { TextInput } from './FormControls';
+
+/**
+ * Type-preserving JSON input for the component inspector's raw path.
+ *
+ * Same invariant as DataPanel's `JsonCell` (W2 hardening, fd9f450c), kept as
+ * a separate primitive on purpose — the inspector writes the in-memory scene
+ * store, DataPanel writes files; the two systems stay uncoupled:
+ * **a commit must never widen a typed value into a JSON string.**
+ * `commit()` parses the draft and hands `onCommit` the PARSED value; on parse
+ * failure it REFUSES — draft kept, error shown, no write. Unlike the sibling
+ * keystroke-live inputs, this commits on blur/Enter only (mid-edit JSON is
+ * almost always invalid).
+ */
+export function JsonInput({
+  value,
+  onCommit,
+  style,
+  disabled = false,
+}: {
+  value: unknown;
+  onCommit: (value: unknown) => void;
+  style?: React.CSSProperties;
+  /** Read-only: the field refuses input. Optional — existing callers unchanged. */
+  disabled?: boolean;
+}) {
+  const display = value === undefined ? '' : JSON.stringify(value);
+  const [draft, setDraft] = useState(display);
+  const [invalid, setInvalid] = useState(false);
+  // Escape below calls `.blur()` imperatively to drop focus, which fires the
+  // native blur/focusout event SYNCHRONOUSLY, inside the same handler/render —
+  // so the resulting `onBlur={commit}` call closes over the PRE-revert
+  // `draft`/`display` (React hasn't re-rendered yet) and would re-derive
+  // `invalid: true` right after Escape just cleared it. This ref lets Escape
+  // tell the nested commit to no-op instead of racing it.
+  const revertingRef = useRef(false);
+
+  // Re-sync when the underlying value changes (undo, another widget, reload).
+  useEffect(() => {
+    setDraft(display);
+    setInvalid(false);
+  }, [display]);
+
+  const commit = () => {
+    if (revertingRef.current) {
+      revertingRef.current = false;
+      return;
+    }
+    if (draft === display) {
+      setInvalid(false);
+      return;
+    }
+    let parsed: unknown;
+    try {
+      parsed = JSON.parse(draft);
+    } catch {
+      setInvalid(true); // refuse: keep the draft, no onCommit, no write
+      return;
+    }
+    setInvalid(false);
+    onCommit(parsed);
+  };
+
+  return (
+    <div>
+      <TextInput
+        data-testid="json-input"
+        // Self-styled baseline (I-28): the shared field class means this
+        // primitive is never silently unstyled when a caller passes no
+        // `style` — callers now only supply layout (width/flex).
+        aria-invalid={invalid || undefined}
+        data-tone={invalid ? 'danger' : undefined}
+        disabled={disabled}
+        value={draft}
+        onChange={(e) => {
+          setDraft(e.target.value);
+          if (invalid) setInvalid(false);
+        }}
+        onBlur={commit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            commit();
+          } else if (e.key === 'Escape') {
+            revertingRef.current = true;
+            setDraft(display);
+            setInvalid(false);
+            (e.target as HTMLInputElement).blur();
+          }
+        }}
+        style={style}
+        title={
+          invalid
+            ? 'Not valid JSON — nothing written. Fix the JSON or press Escape to revert.'
+            : undefined
+        }
+      />
+      {invalid && (
+        <div
+          data-testid="json-input-error"
+          style={{
+            fontSize: 'var(--vgai-font-sm)',
+            color: themeVars.semantic.danger,
+            marginTop: 2,
+          }}
+        >
+          Not valid JSON — nothing written. Fix the JSON or press Escape to revert.
+        </div>
+      )}
+    </div>
+  );
+}

package/src/widgets/primitives/Layout.tsx

@@ -0,0 +1,100 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+
+export type LayoutGap = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+export type LayoutAlignment = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type LayoutJustification = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+
+interface LayoutProps extends HTMLAttributes<HTMLDivElement> {
+  gap?: LayoutGap;
+  align?: LayoutAlignment;
+  justify?: LayoutJustification;
+  padding?: LayoutGap;
+  paddingX?: LayoutGap;
+  paddingY?: LayoutGap;
+}
+
+const alignValue: Record<LayoutAlignment, CSSProperties['alignItems']> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  stretch: 'stretch',
+  baseline: 'baseline',
+};
+
+const justifyValue: Record<LayoutJustification, CSSProperties['justifyContent']> = {
+  start: 'flex-start',
+  center: 'center',
+  end: 'flex-end',
+  between: 'space-between',
+  around: 'space-around',
+  evenly: 'space-evenly',
+};
+
+function token(value: LayoutGap | undefined): string | undefined {
+  return value === 0 ? '0px' : value === undefined ? undefined : `var(--vgai-space-${value})`;
+}
+
+function layoutStyle({
+  gap,
+  align,
+  justify,
+  padding,
+  paddingX,
+  paddingY,
+  style,
+}: LayoutProps): CSSProperties {
+  return {
+    gap: token(gap),
+    alignItems: align ? alignValue[align] : undefined,
+    justifyContent: justify ? justifyValue[justify] : undefined,
+    padding: token(padding),
+    paddingInline: token(paddingX),
+    paddingBlock: token(paddingY),
+    ...style,
+  };
+}
+
+function classes(base: string, className?: string): string {
+  return className ? `${base} ${className}` : base;
+}
+
+export function Stack({ className, ...props }: LayoutProps) {
+  return <div {...props} className={classes('vgai-stack', className)} style={layoutStyle(props)} />;
+}
+
+export function Inline({ className, ...props }: LayoutProps) {
+  return (
+    <div {...props} className={classes('vgai-inline', className)} style={layoutStyle(props)} />
+  );
+}
+
+export function Spacer({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return <span {...props} aria-hidden="true" className={classes('vgai-spacer', className)} />;
+}
+
+export function Divider({
+  orientation = 'horizontal',
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { orientation?: 'horizontal' | 'vertical' }) {
+  return (
+    <div
+      {...props}
+      aria-hidden="true"
+      data-orientation={orientation}
+      className={classes('vgai-divider', className)}
+    />
+  );
+}
+
+export function Actions({
+  children,
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement> & { children: ReactNode }) {
+  return (
+    <Inline {...props} className={classes('vgai-actions', className)} gap={2} align="center">
+      {children}
+    </Inline>
+  );
+}