feat(editor): visual flex-layout inspector + editable padding

Replace FlexContainer's five raw enum dropdowns with a compact auto-layout
widget — an icon direction switch, a 3x3 alignment grid whose axes swap with
the flow direction, a Distribute control and a Stretch toggle — injected
through the same extra/hideFields door as the UINode anchor block.

Add a first-class 'sides' inspector field ({left,top,right,bottom}) so
FlexContainer padding, previously dropped by inferField and uneditable, is
authorable through the normal reflected field door: inference -> per-edge
merge write -> automation coercion -> an L/T/R/B SidesControl. Reusable for
any four-edge box (e.g. TextInput padding).

Also honor ESTELLA_WIN_W/H for screenshot automation (default size unchanged).

Author: esengine

desktop/electron/main.ts

@@ -359,8 +359,10 @@ function createWindow() {
   if (!isMac) Menu.setApplicationMenu(null);
 
   win = new BrowserWindow({
-    width: 1480,
-    height: 920,
+    // Automation (screenshot capture of tall panels) can enlarge the window via env;
+    // unset in normal use, so the default size is unchanged. Mirrors ESTELLA_MCP_W/H.
+    width: Number(process.env.ESTELLA_WIN_W) || 1480,
+    height: Number(process.env.ESTELLA_WIN_H) || 920,
     minWidth: 1080,
     minHeight: 680,
     title: 'Estella Editor',

desktop/src/engine/EditorControlSurface.ts

@@ -135,6 +135,19 @@ export function coerceFieldValue(
       }
       return fail('a "#rrggbbaa" hex string or { r, g, b, a } with 0..1 channels');
     }
+    case 'sides': {
+      // A four-edge box — accept [left, top, right, bottom] or { left, top, right, bottom }.
+      let v: unknown = value;
+      if (typeof v === 'string') v = parseJsonText(v);
+      if (v !== null && typeof v === 'object' && !Array.isArray(v)) {
+        const o = v as Record<string, unknown>;
+        v = [o.left, o.top, o.right, o.bottom];
+      }
+      if (!Array.isArray(v) || v.length < 4 || v.slice(0, 4).some((c) => typeof c !== 'number' || !Number.isFinite(c))) {
+        return fail('4 numbers (e.g. [8, 8, 8, 8]) or { left, top, right, bottom }');
+      }
+      return v.slice(0, 4) as InspectorFieldValue;
+    }
     case 'gradient':
     case 'curve':
     case 'dimension': {

desktop/src/engine/SceneCommands.ts

@@ -128,6 +128,20 @@ export function toModelValue(
         ...(Number.isFinite(w) ? { w } : {}),
       };
     }
+    case 'sides': {
+      // A four-edge box ({ left, top, right, bottom }). Merged onto the base like a vec —
+      // a NaN edge means "keep this entity's own value" so a single-edge edit fanned
+      // across a multi-selection never clobbers the untouched edges.
+      const [l, t, r, b] = value as [number, number, number, number];
+      const base = cur[key] as { left: number; top: number; right: number; bottom: number };
+      return {
+        ...base,
+        ...(Number.isFinite(l) ? { left: l } : {}),
+        ...(Number.isFinite(t) ? { top: t } : {}),
+        ...(Number.isFinite(r) ? { right: r } : {}),
+        ...(Number.isFinite(b) ? { bottom: b } : {}),
+      };
+    }
     case 'vec2list':
       // A whole Vec2[] replacement (polygon vertices / chain points) — normalized to
       // plain {x,y} so a dragged vertex writes clean data; coalesced to one undo step.

desktop/src/engine/schema.ts

@@ -216,6 +216,10 @@ export function inferField(key: string, v: unknown, isColor: boolean): Inspector
     if ('x' in o && 'y' in o) return { key, label, type: 'vec2', value: [o.x, o.y] };
     // CSS-length shape ({ value, unit }) — the UINode Dimension (width/height/inset/margin).
     if ('value' in o && 'unit' in o) return { key, label, type: 'dimension', value: { value: o.value, unit: o.unit } };
+    // Four-edge box ({ left, top, right, bottom }) — FlexContainer / TextInput padding.
+    if ('left' in o && 'top' in o && 'right' in o && 'bottom' in o) {
+      return { key, label, type: 'sides', value: [o.left, o.top, o.right, o.bottom] };
+    }
   }
   return null; // unknown shape — not editable here
 }

desktop/src/i18n/messages/details.ts

@@ -70,6 +70,33 @@ export const detailsMessages = defineMessages({
         zh: '由父级布局决定位置 · 自身对齐覆盖交叉轴。',
     },
 
+    // — FlexContainer layout widget (direction / alignment grid / distribute / wrap) —
+    'det.flexDirection': { en: 'Direction', zh: '方向' },
+    'det.flexDirectionAria': { en: 'Flex direction', zh: '排列方向' },
+    'det.flexRow': { en: 'Row →', zh: '横向 →' },
+    'det.flexColumn': { en: 'Column ↓', zh: '纵向 ↓' },
+    'det.flexRowReverse': { en: 'Row reversed ←', zh: '横向反转 ←' },
+    'det.flexColumnReverse': { en: 'Column reversed ↑', zh: '纵向反转 ↑' },
+    'det.flexAlign': { en: 'Align', zh: '对齐' },
+    'det.flexAlignGridAria': { en: 'Alignment grid', zh: '对齐网格' },
+    'det.flexAlignCell': { en: 'Align {main} / {cross}', zh: '主轴 {main} · 交叉轴 {cross}' },
+    'det.flexMainStart': { en: 'main start', zh: '主轴起点' },
+    'det.flexMainCenter': { en: 'main center', zh: '主轴居中' },
+    'det.flexMainEnd': { en: 'main end', zh: '主轴终点' },
+    'det.flexCrossStart': { en: 'cross start', zh: '交叉轴起点' },
+    'det.flexCrossCenter': { en: 'cross center', zh: '交叉轴居中' },
+    'det.flexCrossEnd': { en: 'cross end', zh: '交叉轴终点' },
+    'det.flexDistribute': { en: 'Distribute', zh: '分布' },
+    'det.flexDistributeAria': { en: 'Main-axis distribution', zh: '主轴分布' },
+    'det.flexPacked': { en: 'Packed', zh: '紧凑' },
+    'det.flexBetween': { en: 'Between', zh: '两端' },
+    'det.flexAround': { en: 'Around', zh: '环绕' },
+    'det.flexEvenly': { en: 'Evenly', zh: '均匀' },
+    'det.flexWrap': { en: 'Wrap', zh: '换行' },
+    'det.flexWrapAria': { en: 'Wrap children onto multiple lines', zh: '子项换到多行' },
+    'det.flexStretch': { en: 'Stretch', zh: '填满' },
+    'det.flexStretchAria': { en: 'Stretch children across the cross axis', zh: '子项填满交叉轴' },
+
     // — Component section chrome —
     'det.enableComponent': { en: 'Enable component', zh: '启用组件' },
     'det.disableComponent': { en: 'Disable component', zh: '禁用组件' },

desktop/src/panels/Details.tsx

@@ -4,6 +4,10 @@ import { useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'reac
 import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
 import {
   AlertTriangle,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUp,
   Box,
   Camera,
   Check,
@@ -55,7 +59,7 @@ import { InspectorClipboard } from '@/engine/inspectorClipboard';
 import { SceneCommands, toModelValue } from '@/engine/SceneCommands';
 import { ENTITY_SOURCES, createFromSource } from '@/engine/entitySources';
 import { PlayInspect } from '@/engine/PlayInspect';
-import { DimensionUnit, AnchorAxis, detectAnchorAxes, UIPositionType, parseLocaleTable, EasingType, INVALID_ENTITY } from 'esengine';
+import { DimensionUnit, AnchorAxis, detectAnchorAxes, UIPositionType, FlexDirection, FlexWrap, JustifyContent, AlignItems, parseLocaleTable, EasingType, INVALID_ENTITY } from 'esengine';
 import type { SceneData, InputMapAsset, ActionType, Binding, LocaleTableAsset, PluralCategory, GearValue, GearTween } from 'esengine';
 import { modelAddableComponentEntries, subscribeSchemas, getSchemaRevision, prettyLabel, hexToRgba, dynamicEnumOptions, boxGroupsFor, isRequiredEmpty, type BoxGroupDef } from '@/engine/schema';
 import * as imap from '@/project/inputMapDoc';
@@ -248,6 +252,41 @@ export function VecControl({
   );
 }
 
+// A four-edge box ({ left, top, right, bottom }) as four labelled wells — the padding
+// analog of VecControl. Edges are L·T·R·B; each edit writes ONLY its edge (NaN on the
+// others) so a single-edge change fanned across a multi-selection keeps the untouched
+// edges of the non-primary entities (see toModelValue 'sides').
+const SIDE_EDGES = ['l', 't', 'r', 'b'] as const;
+export function SidesControl({
+  value,
+  mixed,
+  onBegin,
+  onEnd,
+  onCancel,
+  onChange,
+}: ControlGesture & { value: number[]; mixed?: boolean; onChange: (v: number[]) => void }) {
+  return (
+    <div className="vec sides">
+      {SIDE_EDGES.map((edge, i) => (
+        <VecField
+          key={edge}
+          axis={edge}
+          value={value[i] ?? 0}
+          mixed={mixed}
+          onBegin={onBegin}
+          onEnd={onEnd}
+          onCancel={onCancel}
+          onCommit={(v) => {
+            const next = [NaN, NaN, NaN, NaN];
+            next[i] = v;
+            onChange(next);
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
 // A named-int dropdown (e.g. Camera projection, body type) — a themed popover, not
 // a native <select>, so the list matches the editor and searches when long. The
 // stored value is the option's int; an unknown value shows a "(n)" placeholder.
@@ -1287,6 +1326,9 @@ function FieldRow({ entities, comp, field, write }: { entities: EntityId[]; comp
     case 'dimension':
       control = <DimControl value={field.value as DimensionValue} mixed={mixed} onBegin={begin} onEnd={end} onChange={apply} />;
       break;
+    case 'sides':
+      control = <SidesControl value={field.value as number[]} mixed={mixed} onBegin={begin} onEnd={end} onCancel={cancel} onChange={apply} />;
+      break;
     case 'bool':
       control = <BoolControl value={field.value as boolean} mixed={mixed} onBegin={begin} onEnd={end} onChange={apply} />;
       break;
@@ -1710,6 +1752,134 @@ function UILayoutControl({ entities, comp }: { entities: EntityId[]; comp: Inspe
   );
 }
 
+// The FlexContainer "auto-layout" widget — direction, a 3×3 alignment grid, main-axis
+// distribution and a cross-axis stretch toggle, in place of five stacked enum dropdowns.
+// The grid's axes swap with the flow direction so the highlighted cell always reads as
+// where the children actually pack (the Figma model). Gap + padding stay as normal
+// fields below (padding via the reflected 'sides' control).
+const FLEX_DIR_OPTS: SegmentedOption<string>[] = [
+  { value: String(FlexDirection.Row), icon: <ArrowRight size={12} strokeWidth={2.2} />, title: t('det.flexRow') },
+  { value: String(FlexDirection.Column), icon: <ArrowDown size={12} strokeWidth={2.2} />, title: t('det.flexColumn') },
+  { value: String(FlexDirection.RowReverse), icon: <ArrowLeft size={12} strokeWidth={2.2} />, title: t('det.flexRowReverse') },
+  { value: String(FlexDirection.ColumnReverse), icon: <ArrowUp size={12} strokeWidth={2.2} />, title: t('det.flexColumnReverse') },
+];
+const FLEX_DISTRIBUTE_OPTS: SegmentedOption<string>[] = [
+  { value: 'packed', label: t('det.flexPacked') },
+  { value: String(JustifyContent.SpaceBetween), label: t('det.flexBetween') },
+  { value: String(JustifyContent.SpaceAround), label: t('det.flexAround') },
+  { value: String(JustifyContent.SpaceEvenly), label: t('det.flexEvenly') },
+];
+const FLEX_MAIN_LABEL = [t('det.flexMainStart'), t('det.flexMainCenter'), t('det.flexMainEnd')];
+const FLEX_CROSS_LABEL = [t('det.flexCrossStart'), t('det.flexCrossCenter'), t('det.flexCrossEnd')];
+// Fields the widget owns, so the generic field flow skips them — gap, padding and the
+// wrap-only alignContent stay as normal rows below (padding via the 'sides' control).
+const FLEX_WIDGET_OWNED_FIELDS: ReadonlySet<string> = new Set(['direction', 'justifyContent', 'alignItems', 'wrap']);
+// Place the cell's dot at its spatial position (col → left/centre/right, row →
+// top/middle/bottom) so the grid previews where children land, Figma-style.
+const FLEX_JUSTIFY_CSS = ['flex-start', 'center', 'flex-end'];
+
+function FlexLayoutControl({ entities, comp }: { entities: EntityId[]; comp: InspectorComponent }) {
+  const field = (key: string) => comp.fields.find((f) => f.key === key);
+  const fieldNum = (key: string, dflt: number) => {
+    const f = field(key);
+    return f && f.mixed !== true ? Number(f.value) : dflt;
+  };
+  const dir = fieldNum('direction', FlexDirection.Row);
+  const justify = fieldNum('justifyContent', JustifyContent.Start);
+  const align = fieldNum('alignItems', AlignItems.Stretch);
+  const wrap = fieldNum('wrap', FlexWrap.NoWrap);
+  const horizontal = dir === FlexDirection.Row || dir === FlexDirection.RowReverse;
+
+  const write = (label: string, edits: Array<[string, number]>) => {
+    SceneCommands.beginGesture(label);
+    for (const id of entities) for (const [k, v] of edits) SceneCommands.setField(id, 'FlexContainer', k, 'enum', v);
+    SceneCommands.endGesture();
+  };
+
+  // 3×3 grid cell (col c, row r), c/r ∈ {0 Start, 1 Centre, 2 End}. The MAIN axis is
+  // columns when the flow is horizontal, rows when vertical — so a click packs the
+  // children where the cell sits. Space-mode justify has no single active cell.
+  const packed = justify <= JustifyContent.End;
+  const activeMain = packed ? justify : null;
+  const activeCross = align <= AlignItems.End ? align : null; // Stretch → no single lane
+  const cell = (c: number, r: number) => {
+    const main = horizontal ? c : r;
+    const cross = horizontal ? r : c;
+    return { main, cross, on: activeMain === main && activeCross === cross };
+  };
+  const distributeValue = justify >= JustifyContent.SpaceBetween ? String(justify) : 'packed';
+  const stretched = align === AlignItems.Stretch;
+
+  return (
+    <div className="flex-block">
+      <div className="flex-row">
+        <span className="flex-lbl">{t('det.flexDirection')}</span>
+        <Segmented
+          grow
+          ariaLabel={t('det.flexDirectionAria')}
+          value={field('direction')?.mixed ? '' : String(dir)}
+          options={FLEX_DIR_OPTS}
+          onChange={(v) => write('Flex Direction', [['direction', Number(v)]])}
+        />
+      </div>
+      <div className="flex-row flex-align-row">
+        <span className="flex-lbl">{t('det.flexAlign')}</span>
+        <div className="flex-grid" role="group" aria-label={t('det.flexAlignGridAria')}>
+          {[0, 1, 2].map((r) =>
+            [0, 1, 2].map((c) => {
+              const st = cell(c, r);
+              return (
+                <button
+                  key={`${c}-${r}`}
+                  type="button"
+                  className={`flex-cell${st.on ? ' on' : ''}${packed ? '' : ' dim'}`}
+                  style={{ justifyContent: FLEX_JUSTIFY_CSS[c], alignItems: FLEX_JUSTIFY_CSS[r] }}
+                  title={t('det.flexAlignCell', { main: FLEX_MAIN_LABEL[st.main], cross: FLEX_CROSS_LABEL[st.cross] })}
+                  aria-pressed={st.on}
+                  onClick={() => write('Flex Align', [['justifyContent', st.main], ['alignItems', st.cross]])}
+                >
+                  <i />
+                </button>
+              );
+            }),
+          )}
+        </div>
+        <button
+          type="button"
+          className={`flex-toggle${stretched ? ' on' : ''}`}
+          title={t('det.flexStretchAria')}
+          aria-pressed={stretched}
+          onClick={() => write('Flex Stretch', [['alignItems', stretched ? AlignItems.Center : AlignItems.Stretch]])}
+        >
+          {t('det.flexStretch')}
+        </button>
+      </div>
+      <div className="flex-row">
+        <span className="flex-lbl">{t('det.flexDistribute')}</span>
+        <Segmented
+          grow
+          ariaLabel={t('det.flexDistributeAria')}
+          value={distributeValue}
+          options={FLEX_DISTRIBUTE_OPTS}
+          onChange={(val) => write('Flex Distribute', [['justifyContent', val === 'packed' ? JustifyContent.Start : Number(val)]])}
+        />
+      </div>
+      <div className="flex-row">
+        <span className="flex-lbl">{t('det.flexWrap')}</span>
+        <button
+          type="button"
+          className={`flex-toggle${wrap === FlexWrap.Wrap ? ' on' : ''}`}
+          title={t('det.flexWrapAria')}
+          aria-pressed={wrap === FlexWrap.Wrap}
+          onClick={() => write('Flex Wrap', [['wrap', wrap === FlexWrap.Wrap ? FlexWrap.NoWrap : FlexWrap.Wrap]])}
+        >
+          {t('det.flexWrap')}
+        </button>
+      </div>
+    </div>
+  );
+}
+
 // One side of a box-model group: a lettered edge (L/R/T/B) + its Dimension well.
 // It commits through `fieldWriter` — the same door as FieldRow — so undo, mixed,
 // and reset behave identically; right-click keeps the per-field Copy/Paste/Reset.
@@ -3205,16 +3375,20 @@ function EditorDetails() {
             extra={
               comp.name === 'UINode'
                 ? <UILayoutControl entities={ids} comp={comp} />
-                : COMP_COLLIDER_SHAPE[comp.name]
-                  ? <ColliderShapeControl entities={ids} current={comp.name} />
-                  : undefined
+                : comp.name === 'FlexContainer'
+                  ? <FlexLayoutControl entities={ids} comp={comp} />
+                  : COMP_COLLIDER_SHAPE[comp.name]
+                    ? <ColliderShapeControl entities={ids} current={comp.name} />
+                    : undefined
             }
             hideFields={
               comp.name === 'UINode'
                 ? uiLayoutOwnedFields(
                     Number(comp.fields.find((f) => f.key === 'position')?.value ?? 0) === UIPositionType.Absolute,
                   )
-                : undefined
+                : comp.name === 'FlexContainer'
+                  ? FLEX_WIDGET_OWNED_FIELDS
+                  : undefined
             }
           />
         ))}

desktop/src/theme/inspector.css

@@ -126,6 +126,27 @@
 .box-side.modified .box-side-k { color: var(--warn); }
 .box-side.mixed .box-side-k { color: var(--text-mute); }
 
+/* FlexContainer auto-layout widget: a labelled direction switch, a 3×3 alignment grid
+   whose dot sits where children pack, a main-axis Distribute control and a cross-axis
+   Stretch toggle — a compact visual stand-in for five stacked enum dropdowns. */
+.flex-block { padding: 7px 8px 9px; display: flex; flex-direction: column; gap: 9px; }
+.flex-row { display: flex; align-items: center; gap: 9px; }
+.flex-lbl { font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .5px; color: var(--text-mute); flex-shrink: 0; width: 56px; }
+.flex-row .seg { flex: 1; min-width: 0; }
+.flex-align-row { align-items: stretch; }
+.flex-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; width: 66px; height: 66px; flex-shrink: 0; padding: 3px; background: var(--inset); border: 1px solid var(--border); border-radius: var(--r-sm); }
+.flex-cell { display: flex; padding: 3px; border-radius: 2px; background: none; border: none; cursor: pointer; transition: background var(--t-fast); }
+.flex-cell i { width: 4px; height: 4px; border-radius: 1px; background: var(--text-mute); font-style: normal; transition: background var(--t-fast), transform var(--t-fast); }
+.flex-cell:hover { background: var(--srf-4); }
+.flex-cell:hover i { background: var(--text-dim); }
+.flex-cell.on { background: var(--acc-soft); }
+.flex-cell.on i { background: var(--acc); transform: scale(1.6); }
+.flex-cell.dim i { opacity: .4; }
+.flex-toggle { flex: 1; min-height: 24px; display: flex; align-items: center; justify-content: center; padding: 0 10px; font-size: var(--fs-2xs); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--inset); color: var(--text-dim); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
+.flex-align-row .flex-toggle { flex: 0 0 44px; }
+.flex-toggle:hover { border-color: var(--acc); color: var(--text); }
+.flex-toggle.on { background: var(--acc); border-color: var(--acc); color: var(--on-accent); }
+
 /* property rows (label col + value col, reset on right) */
 .prop { display: grid; grid-template-columns: 38% 1fr 18px; align-items: center; gap: 4px; min-height: var(--h-prop); padding: 1px 0; position: relative; }
 .prop-label { font-size: var(--fs-sm); color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 2px; }
@@ -166,6 +187,8 @@
 .ax.y { background: var(--ax-y); }
 .ax.z { background: var(--ax-z); }
 .ax.w, .ax.h { background: var(--srf-5); color: var(--text-dim); }
+/* Edge-labelled wells (SidesControl: padding L·T·R·B) — neutral, like w/h. */
+.ax.l, .ax.t, .ax.r, .ax.b { background: var(--srf-5); color: var(--text-dim); }
 .vfield input { width: 100%; min-width: 0; background: none; border: none; outline: none; padding: 0 5px; font-size: var(--fs-xs); color: var(--text); font-family: var(--mono); }
 
 .sw { position: relative; width: 28px; height: 18px; border-radius: var(--r-xs); border: 1px solid var(--border-line); flex-shrink: 0; cursor: pointer; overflow: hidden; padding: 0;

desktop/src/types.ts

@@ -43,6 +43,7 @@ export type InspectorFieldType =
   | 'gradient' // a color-over-life gradient ({ stops: [...] })
   | 'curve' // a scalar over-life curve ({ keys: [...] })
   | 'dimension' // a CSS-style length ({ value, unit }) — UINode box/inset fields
+  | 'sides' // a four-edge box ({ left, top, right, bottom }) — FlexContainer/TextInput padding
   | 'asset' // a texture/material/font/... ref (@uuid: string, or 0 for none)
   | 'entity'; // a reference to another scene entity (source id, or 0/INVALID for none)