@vgai/editor 0.2.0 → 0.4.0-canary.20260715.0

package/src/components/inspectors/TransformSection.tsx

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
+import { Button, SectionHeader, Vec3Input } from '../../design-system';
 import { useEditorStore } from '../../EditorContext';
-import { SectionHeader } from '../primitives/SectionHeader';
-import { Vec3Input } from '../primitives/Vec3Input';
+import { fieldLabelStyle } from '../inspector-widgets/shared';
 import type { SectionProps } from './multi-edit-utils';
 import { commonVec3 } from './multi-edit-utils';
 
@@ -24,16 +24,8 @@ export function eulerDegToQuat(deg: [number, number, number]): [number, number,
   return [q.x, q.y, q.z, q.w];
 }
 
-const pivotBtnStyle: React.CSSProperties = {
-  background: '#2a2a2a',
-  color: '#8c8c8c',
-  border: '1px solid #444',
-  borderRadius: 2,
-  padding: '2px 6px',
-  fontSize: 10,
-  cursor: 'pointer',
-};
-
+/** Converged onto the shared compact chrome-button family (I-10 — this was
+ *  its own `#2a2a2a`/radius-2 one-off). */
 export function TransformSection({ entities, ids }: SectionProps) {
   const store = useEditorStore();
   const multi = entities.length > 1;
@@ -123,7 +115,7 @@ export function TransformSection({ entities, ids }: SectionProps) {
     <SectionHeader label="Transform">
       <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
         <div>
-          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Position</div>
+          <div style={fieldLabelStyle}>Position</div>
           <Vec3Input
             value={posVec}
             onChange={updatePos}
@@ -133,21 +125,21 @@ export function TransformSection({ entities, ids }: SectionProps) {
           />
         </div>
         <div>
-          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Rotation (degrees)</div>
+          <div style={fieldLabelStyle}>Rotation (degrees)</div>
           <Vec3Input value={rotVec} onChange={updateRot} onAxisChange={setRot} step={1} />
         </div>
         <div>
-          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Scale</div>
+          <div style={fieldLabelStyle}>Scale</div>
           <Vec3Input value={sclVec} onChange={updateScl} onAxisChange={setScl} step={0.05} />
         </div>
         <div>
-          <div style={{ fontSize: 10, color: '#8c8c8c', marginBottom: 2 }}>Pivot</div>
+          <div style={fieldLabelStyle}>Pivot</div>
           <Vec3Input value={pivVec} onChange={updatePiv} onAxisChange={setPiv} step={0.1} />
           <div style={{ display: 'flex', gap: 4, marginTop: 4 }}>
             {hasPivot && (
-              <button
+              <Button
                 type="button"
-                style={pivotBtnStyle}
+                size="compact"
                 onClick={() => {
                   store.batchMutate(ids, (entity) => {
                     delete entity.pivot;
@@ -155,12 +147,12 @@ export function TransformSection({ entities, ids }: SectionProps) {
                 }}
               >
                 Reset
-              </button>
+              </Button>
             )}
             {!multi && (
-              <button
+              <Button
                 type="button"
-                style={pivotBtnStyle}
+                size="compact"
                 onClick={() => {
                   const entity = entities[0]!;
                   const obj = store.objectMap.get(entity.id!);
@@ -181,7 +173,7 @@ export function TransformSection({ entities, ids }: SectionProps) {
                 }}
               >
                 Center to Bounds
-              </button>
+              </Button>
             )}
           </div>
         </div>

package/src/components/patterns/Dialog.tsx

@@ -0,0 +1,95 @@
+import type { HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
+import { Actions, Inline, Stack } from '../primitives/Layout';
+import { Text } from '../primitives/Text';
+
+function classes(base: string, className?: string): string {
+  return className ? `${base} ${className}` : base;
+}
+
+export interface DialogProps extends HTMLAttributes<HTMLDivElement> {
+  labelledBy: string;
+  onDismiss?: () => void;
+  size?: 'compact' | 'default' | 'wide';
+}
+
+/** Modal editor surface. The scrim, sizing, elevation, and spacing are one recipe. */
+export function Dialog({
+  labelledBy,
+  onDismiss,
+  size = 'default',
+  className,
+  ...props
+}: DialogProps) {
+  return (
+    <div
+      className="vgai-dialog-scrim"
+      onPointerDown={(event) => {
+        if (event.target === event.currentTarget) onDismiss?.();
+      }}
+    >
+      <div
+        {...props}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={labelledBy}
+        data-size={size}
+        className={classes('vgai-dialog', className)}
+      />
+    </div>
+  );
+}
+
+export function DialogHeader({
+  titleId,
+  title,
+  description,
+}: {
+  titleId: string;
+  title: ReactNode;
+  description?: ReactNode;
+}) {
+  return (
+    <Stack className="vgai-dialog-header" gap={2}>
+      <Text id={titleId} as="h2" variant="heading">
+        {title}
+      </Text>
+      {description && (
+        <Text as="p" tone="muted">
+          {description}
+        </Text>
+      )}
+    </Stack>
+  );
+}
+
+export function DialogBody({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <Stack {...props} className={classes('vgai-dialog-body', className)} />;
+}
+
+export function DialogFooter({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <Actions {...props} className={classes('vgai-dialog-footer', className)}>
+      {children}
+    </Actions>
+  );
+}
+
+export function DialogField({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>) {
+  return <label {...props} className={classes('vgai-dialog-field', className)} />;
+}
+
+export function DialogFieldLabel({ children }: { children: ReactNode }) {
+  return (
+    <Text variant="label" tone="muted">
+      {children}
+    </Text>
+  );
+}
+
+export function JoinedField({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <Inline {...props} className={classes('vgai-joined-field', className)} />;
+}
+
+export function JoinedFieldSuffix({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return <span {...props} className={classes('vgai-joined-field-suffix', className)} />;
+}

package/src/components/patterns/Fields.tsx

@@ -0,0 +1,44 @@
+import type { HTMLAttributes, LabelHTMLAttributes, ReactNode } from 'react';
+
+function classes(base: string, className?: string): string {
+  return className ? `${base} ${className}` : base;
+}
+
+export function FieldGroup({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div {...props} className={classes('vgai-field-group', className)} />;
+}
+
+export interface FieldRowProps extends HTMLAttributes<HTMLDivElement> {
+  label: ReactNode;
+  htmlFor?: string;
+  hint?: ReactNode;
+  compact?: boolean;
+}
+
+export function FieldRow({
+  label,
+  htmlFor,
+  hint,
+  compact = false,
+  className,
+  children,
+  ...props
+}: FieldRowProps) {
+  return (
+    <div
+      {...props}
+      data-compact={compact || undefined}
+      className={classes('vgai-field-row', className)}
+    >
+      <label htmlFor={htmlFor} className="vgai-field-label">
+        {label}
+      </label>
+      <div className="vgai-field-control">{children}</div>
+      {hint && <div className="vgai-field-hint">{hint}</div>}
+    </div>
+  );
+}
+
+export function FieldLabel({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>) {
+  return <label {...props} className={classes('vgai-field-label', className)} />;
+}

package/src/components/patterns/List.tsx

@@ -0,0 +1,25 @@
+import { type ButtonHTMLAttributes, forwardRef } from 'react';
+
+export interface EditorListButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  selected?: boolean;
+  accent?: 'bar' | 'none';
+}
+
+/** Selectable list row with canonical hover, focus, disabled, and selection paint. */
+export const EditorListButton = forwardRef<HTMLButtonElement, EditorListButtonProps>(
+  function EditorListButton(
+    { selected = false, accent = 'bar', className, type = 'button', ...props },
+    ref,
+  ) {
+    return (
+      <button
+        {...props}
+        ref={ref}
+        type={type}
+        data-selected={selected || undefined}
+        data-accent={accent}
+        className={className ? `vgai-list-button ${className}` : 'vgai-list-button'}
+      />
+    );
+  },
+);

package/src/components/patterns/StateSurface.tsx

@@ -0,0 +1,40 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type StateSurfaceTone = 'neutral' | 'loading' | 'error' | 'success';
+
+export interface StateSurfaceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  tone?: StateSurfaceTone;
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  compact?: boolean;
+}
+
+export function StateSurface({
+  tone = 'neutral',
+  icon,
+  title,
+  description,
+  action,
+  compact = false,
+  className,
+  ...props
+}: StateSurfaceProps) {
+  const defaultRole =
+    tone === 'error' ? 'alert' : tone === 'loading' || tone === 'success' ? 'status' : undefined;
+  return (
+    <div
+      {...props}
+      role={props.role ?? defaultRole}
+      data-tone={tone}
+      data-compact={compact || undefined}
+      className={className ? `vgai-state-surface ${className}` : 'vgai-state-surface'}
+    >
+      {icon && <div className="vgai-state-surface-icon">{icon}</div>}
+      <strong className="vgai-state-surface-title">{title}</strong>
+      {description && <div className="vgai-state-surface-description">{description}</div>}
+      {action && <div className="vgai-state-surface-action">{action}</div>}
+    </div>
+  );
+}

package/src/components/patterns/Surfaces.tsx

@@ -0,0 +1,115 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+function classes(base: string, className?: string): string {
+  return className ? `${base} ${className}` : base;
+}
+
+export type EditorTone = 'info' | 'warning' | 'error' | 'success';
+export type EditorSurfaceVariant = 'shell' | 'panel' | 'chrome' | 'raised' | 'inset' | 'overlay';
+
+export interface EditorSurfaceProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: EditorSurfaceVariant;
+  border?: boolean;
+  scroll?: boolean;
+}
+
+export function EditorSurface({
+  variant = 'panel',
+  border = false,
+  scroll = false,
+  className,
+  ...props
+}: EditorSurfaceProps) {
+  return (
+    <div
+      {...props}
+      data-variant={variant}
+      data-border={border || undefined}
+      data-scroll={scroll || undefined}
+      className={classes('vgai-surface', className)}
+    />
+  );
+}
+
+export interface EditorBannerProps extends HTMLAttributes<HTMLDivElement> {
+  tone?: EditorTone;
+  icon?: ReactNode;
+  actions?: ReactNode;
+}
+
+export function EditorBanner({
+  tone = 'info',
+  icon,
+  actions,
+  className,
+  children,
+  ...props
+}: EditorBannerProps) {
+  return (
+    <div
+      {...props}
+      role={tone === 'error' ? 'alert' : 'status'}
+      data-tone={tone}
+      className={classes('vgai-banner', className)}
+    >
+      {icon && <span className="vgai-banner-icon">{icon}</span>}
+      <div className="vgai-banner-content">{children}</div>
+      {actions && <div className="vgai-banner-actions">{actions}</div>}
+    </div>
+  );
+}
+
+export function EditorPopover({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div {...props} className={classes('vgai-popover', className)} />;
+}
+
+export function EditorBadge({ className, ...props }: HTMLAttributes<HTMLSpanElement>) {
+  return <span {...props} className={classes('vgai-badge', className)} />;
+}
+
+export interface DropIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  position?: 'before' | 'inside' | 'after';
+}
+
+export function DropIndicator({ position = 'inside', className, ...props }: DropIndicatorProps) {
+  return (
+    <div
+      {...props}
+      aria-hidden="true"
+      data-position={position}
+      className={classes('vgai-drop-indicator', className)}
+    />
+  );
+}
+
+export interface ResizeHandleProps extends HTMLAttributes<HTMLDivElement> {
+  orientation: 'horizontal' | 'vertical';
+  label: string;
+  valueNow?: number;
+  valueMin?: number;
+  valueMax?: number;
+}
+
+export function ResizeHandle({
+  orientation,
+  label,
+  valueNow,
+  valueMin = 0,
+  valueMax = 100,
+  className,
+  ...props
+}: ResizeHandleProps) {
+  return (
+    <div
+      {...props}
+      role="separator"
+      aria-label={label}
+      aria-orientation={orientation}
+      aria-valuenow={valueNow}
+      aria-valuemin={valueNow === undefined ? undefined : valueMin}
+      aria-valuemax={valueNow === undefined ? undefined : valueMax}
+      data-orientation={orientation}
+      className={classes('vgai-resize-handle', className)}
+    />
+  );
+}

package/src/components/patterns/Tabs.tsx

@@ -0,0 +1,80 @@
+import { type ButtonHTMLAttributes, forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+
+function classes(base: string, className?: string): string {
+  return className ? `${base} ${className}` : base;
+}
+
+export const EditorTabList = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function EditorTabList({ className, onKeyDown, ...props }, ref) {
+    return (
+      <div
+        {...props}
+        ref={ref}
+        role="tablist"
+        className={classes('vgai-tabs', className)}
+        onKeyDown={(event) => {
+          onKeyDown?.(event);
+          if (event.defaultPrevented) return;
+          if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+          const tabs = Array.from(
+            event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="tab"]:not(:disabled)'),
+          );
+          if (tabs.length === 0) return;
+          event.preventDefault();
+          const current = tabs.indexOf(document.activeElement as HTMLButtonElement);
+          const next =
+            event.key === 'Home'
+              ? tabs[0]
+              : event.key === 'End'
+                ? tabs.at(-1)
+                : event.key === 'ArrowRight'
+                  ? tabs[(current + 1 + tabs.length) % tabs.length]
+                  : tabs[(current - 1 + tabs.length) % tabs.length];
+          next?.focus();
+        }}
+      />
+    );
+  },
+);
+
+export interface EditorTabProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  selected?: boolean;
+  dirty?: boolean;
+  badge?: ReactNode;
+}
+
+export const EditorTab = forwardRef<HTMLButtonElement, EditorTabProps>(function EditorTab(
+  {
+    selected = false,
+    dirty = false,
+    badge,
+    className,
+    type = 'button',
+    tabIndex,
+    children,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <button
+      {...props}
+      ref={ref}
+      type={type}
+      role="tab"
+      tabIndex={tabIndex ?? (selected ? 0 : -1)}
+      aria-selected={selected}
+      data-selected={selected || undefined}
+      className={classes('vgai-tab', className)}
+    >
+      {dirty && (
+        <>
+          <span className="vgai-tab-dirty" title="Unsaved" aria-hidden="true" />
+          <span className="vgai-sr-only">Unsaved</span>
+        </>
+      )}
+      <span className="vgai-tab-label">{children}</span>
+      {badge !== undefined && <span className="vgai-tab-badge">{badge}</span>}
+    </button>
+  );
+});

package/src/components/patterns/Toolbar.tsx

@@ -0,0 +1,51 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+
+function classes(base: string, className?: string): string {
+  return className ? `${base} ${className}` : base;
+}
+
+export interface EditorToolbarProps extends HTMLAttributes<HTMLDivElement> {
+  label: string;
+  compact?: boolean;
+}
+
+export const EditorToolbar = forwardRef<HTMLDivElement, EditorToolbarProps>(function EditorToolbar(
+  { label, compact = false, className, ...props },
+  ref,
+) {
+  return (
+    <div
+      {...props}
+      ref={ref}
+      role="toolbar"
+      aria-label={label}
+      data-compact={compact || undefined}
+      className={classes('vgai-toolbar', className)}
+    />
+  );
+});
+
+export function ToolbarGroup({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div {...props} role="group" className={classes('vgai-toolbar-group', className)} />;
+}
+
+export function ToolbarDivider(props: HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      {...props}
+      aria-hidden="true"
+      className={classes('vgai-toolbar-divider', props.className)}
+    />
+  );
+}
+
+/** Viewport-local tool cluster. Placement remains the viewport's responsibility. */
+export function FloatingToolbar({ className, ...props }: EditorToolbarProps) {
+  return (
+    <EditorToolbar {...props} compact className={classes('vgai-floating-toolbar', className)} />
+  );
+}
+
+export function SplitButtonGroup({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div {...props} role="group" className={classes('vgai-split-button', className)} />;
+}

package/src/components/patterns/Tree.tsx

@@ -0,0 +1,72 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+
+function classes(base: string, className?: string): string {
+  return className ? `${base} ${className}` : base;
+}
+
+export interface EditorTreeProps extends HTMLAttributes<HTMLDivElement> {
+  label: string;
+}
+
+export const EditorTree = forwardRef<HTMLDivElement, EditorTreeProps>(function EditorTree(
+  { label, className, ...props },
+  ref,
+) {
+  return (
+    <div
+      {...props}
+      ref={ref}
+      role="tree"
+      aria-label={label}
+      className={classes('vgai-tree', className)}
+    />
+  );
+});
+
+export interface EditorTreeRowProps extends HTMLAttributes<HTMLDivElement> {
+  level?: number;
+  selected?: boolean;
+  expanded?: boolean | undefined;
+  muted?: boolean;
+  dragging?: boolean;
+  leading?: ReactNode;
+  actions?: ReactNode;
+}
+
+export const EditorTreeRow = forwardRef<HTMLDivElement, EditorTreeRowProps>(function EditorTreeRow(
+  {
+    level = 1,
+    selected = false,
+    expanded,
+    muted = false,
+    dragging = false,
+    leading,
+    actions,
+    className,
+    children,
+    style,
+    ...props
+  },
+  ref,
+) {
+  return (
+    <div
+      {...props}
+      ref={ref}
+      role="treeitem"
+      tabIndex={props.tabIndex ?? -1}
+      aria-level={level}
+      aria-selected={selected}
+      {...(expanded === undefined ? {} : { 'aria-expanded': expanded })}
+      data-selected={selected || undefined}
+      data-muted={muted || undefined}
+      data-dragging={dragging || undefined}
+      className={classes('vgai-tree-row', className)}
+      style={{ paddingLeft: 6 + Math.max(0, level - 1) * 14, ...style }}
+    >
+      {leading && <span className="vgai-tree-row-leading">{leading}</span>}
+      <span className="vgai-tree-row-label">{children}</span>
+      {actions && <span className="vgai-tree-row-actions">{actions}</span>}
+    </div>
+  );
+});

package/src/components/primitives/Button.tsx

@@ -0,0 +1,46 @@
+import { type ButtonHTMLAttributes, forwardRef } from 'react';
+
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'outline'
+  | 'ghost'
+  | 'danger'
+  | 'success'
+  /** @deprecated Use primary. Kept for project-tool source compatibility. */
+  | 'solid';
+export type ButtonSize = 'compact' | 'default' | 'comfortable';
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+export type IconButtonProps = Omit<ButtonProps, 'aria-label'> & {
+  'aria-label': string;
+};
+
+/** Canonical editor button. Visual variants and dimensions live in theme-css. */
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+  { variant = 'secondary', size = 'default', className, type = 'button', ...props },
+  ref,
+) {
+  return (
+    <button
+      {...props}
+      ref={ref}
+      type={type}
+      className={className ? `vgai-btn ${className}` : 'vgai-btn'}
+      data-variant={variant}
+      data-size={size}
+    />
+  );
+});
+
+/** Icon-only button. The accessible name is required by its public type. */
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
+  { variant = 'ghost', ...props },
+  ref,
+) {
+  return <Button {...props} ref={ref} variant={variant} data-icon="true" />;
+});