castle-web-cli 0.4.82 → 0.4.84

package/kits/basic-2d/blueprints/cauldron.scene

@@ -4,17 +4,15 @@
     {
       "components": {
         "Layout": {
-          "width": 80,
-          "height": 80,
+          "width": 100,
+          "height": 100,
           "z": 1
         },
         "Sprite": {
           "file": "drawings/cauldron.pxart"
         },
         "Collider": {
-          "kind": "solid",
-          "width": 70,
-          "height": 70
+          "kind": "solid"
         }
       }
     }

package/kits/basic-2d/editors/BlueprintLibrary.jsx

@@ -17,6 +17,7 @@ export function BlueprintLibrary({
   editCameraRef,
   isPlaying,
   selectedBlueprintPath,
+  instanceBlueprintPath,
   onSelectBlueprint,
   onAddActor,
   dragPlace,
@@ -103,16 +104,22 @@ export function BlueprintLibrary({
         type="button"
         className={styles.bpActionSlot}
         aria-label="Add actor"
-        title="Add actor (creates a new blueprint)"
+        title="New blueprint"
         onClick={onAddActor}
         disabled={isPlaying}>
-        <span className={styles.dashedSquareIcon} aria-hidden="true" />
+        <Icon name="plus" />
       </button>
       {blueprints.map((blueprint) => (
         <button
           key={blueprint.path}
           type="button"
-          className={cx(styles.bpSlot, selectedBlueprintPath === blueprint.path && styles.bpSlotSelected)}
+          className={cx(
+            styles.bpSlot,
+            selectedBlueprintPath === blueprint.path && styles.bpSlotSelected,
+            selectedBlueprintPath !== blueprint.path &&
+              instanceBlueprintPath === blueprint.path &&
+              styles.bpSlotInstance
+          )}
           title={`${blueprint.name} -- click to edit, drag to place`}
           disabled={isPlaying}
           onPointerDown={(event) => onSlotPointerDown(event, blueprint)}
@@ -125,7 +132,6 @@ export function BlueprintLibrary({
             onSelectBlueprint(blueprint.path);
           }}>
           <BlueprintThumbnail blueprint={blueprint} sprites={sprites} />
-          <InstanceCountBadge files={files} blueprintPath={blueprint.path} />
         </button>
       ))}
       {dragPreview ? <BlueprintDragPreview preview={dragPreview} sprites={sprites} /> : null}
@@ -176,12 +182,6 @@ function DeleteBlueprintConfirm({ files, blueprint, onCancel, onConfirm }) {
   );
 }
 
-function InstanceCountBadge({ files, blueprintPath }) {
-  const count = countBlueprintInstances(files, blueprintPath);
-  if (count === 0) return null;
-  return <span className={styles.bpSlotBadge}>{count > 99 ? '99+' : count}</span>;
-}
-
 function BlueprintDragPreview({ preview, sprites }) {
   const layout = preview.blueprint.components?.Layout;
   const width = Math.max(24, Math.min(80, layout?.width ?? 48));
@@ -201,7 +201,7 @@ function BlueprintDragPreview({ preview, sprites }) {
   );
 }
 
-function BlueprintThumbnail({ blueprint, sprites, preview = false }) {
+export function BlueprintThumbnail({ blueprint, sprites, preview = false }) {
   const canvasRef = useRef(null);
   const spritePath = blueprint.components?.Sprite?.file;
   const sprite = spritePath ? sprites?.[spritePath] : null;

package/kits/basic-2d/editors/SceneEditor.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { writeFile } from 'castle-web-sdk';
+import { onSaveReloadState, takeReloadState, writeFile } from 'castle-web-sdk';
 import { basename, formatJson, parseJsonFile } from '../engine/files';
 import {
   arrangeActors,
@@ -17,9 +17,11 @@ import {
   addActorWithBlueprint,
   blueprintDropXY,
   cascadeDeleteBlueprint,
+  countBlueprintInstances,
   forkActorToBlueprint,
   getBlueprintTemplate,
   isBlueprintPath,
+  isInheritedProp,
   migrateOrphanActors,
   placeBlueprintInstance,
   setBlueprintName,
@@ -45,7 +47,7 @@ import {
 import { AutoInspector } from '../engine/autoInspector';
 import { SceneUI } from '../engine/SceneUI';
 import { SelectionOverlay } from './SelectionOverlay';
-import { BlueprintLibrary } from './BlueprintLibrary';
+import { BlueprintLibrary, BlueprintThumbnail } from './BlueprintLibrary';
 import { behaviorClasses, findBehaviorClass } from './behaviorRegistry';
 import { useEditHistory, useUndoRedoShortcuts } from './editorHistory';
 // A blueprint file's `actors[0]` has no `id` (it's the template, not an
@@ -137,16 +139,32 @@ export function SceneEditor({
   const canvasRef = useRef(null);
   const runtimeRef = useRef(null);
   const marqueeRef = useRef(null);
-  const editCameraRef = useRef({ x: 0, y: 0, zoom: 1 });
+  // Ephemeral editor state (camera, play mode, inspected blueprint) restored
+  // across a reload: an agent's CODE edit triggers requestReload, which would
+  // otherwise reset the viewport/play state on every change. Data edits fold in
+  // live without a reload, so they never need this. `takeReloadState` is
+  // one-shot (clears on read), so read it once here. Selection is stashed
+  // separately by SingleEditor.
+  const reloadStashKey = `scene-editor:${path}`;
+  const [reloadStash] = useState(() => takeReloadState(reloadStashKey));
+  const editCameraRef = useRef(reloadStash?.editCamera ?? { x: 0, y: 0, zoom: 1 });
   const selectedActorIdsRef = useRef(selectedActorIds);
   selectedActorIdsRef.current = selectedActorIds;
-  const [isPlaying, setIsPlaying] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(reloadStash?.isPlaying ?? false);
   // Hotbar blueprint selection (tap a slot -> inspect/edit the blueprint in
   // the sidebar; drag remains the placement gesture). Mutually exclusive with
   // actor selection: ANY actor-selection change -- including clearing it via
   // empty-canvas click or Escape -- also drops the blueprint selection, which
   // is why every internal caller goes through the wrapper below.
-  const [selectedBlueprintPath, setSelectedBlueprintPath] = useState(null);
+  const [selectedBlueprintPath, setSelectedBlueprintPath] = useState(
+    reloadStash?.selectedBlueprintPath ?? null
+  );
+  // Read live in the render loop (a ref so changing it doesn't restart the
+  // loop): while a blueprint is selected, its instances stay lit and every
+  // other actor dims. Assigned below once `hotbarBlueprint` resolves, so a
+  // stale/deleted selection (file vanished) doesn't dim the scene with nothing
+  // to highlight.
+  const selectedBlueprintPathRef = useRef(selectedBlueprintPath);
   const onSelectActorIds = useCallback(
     (ids) => {
       setSelectedBlueprintPath(null);
@@ -171,6 +189,19 @@ export function SceneEditor({
   // then, but without this the keyboard shortcut could still rewrite the
   // scene file out from under the running play-mode runtime.
   useUndoRedoShortcuts(history, !isPlaying);
+  // Stash ephemeral editor state right before a reload so it survives an agent
+  // code edit. `editCamera` is read live from the ref at save time (a reload is
+  // imminent, so the latest value is what matters); isPlaying / blueprint
+  // selection re-register whenever they change.
+  useEffect(
+    () =>
+      onSaveReloadState(reloadStashKey, () => ({
+        isPlaying,
+        selectedBlueprintPath,
+        editCamera: editCameraRef.current,
+      })),
+    [reloadStashKey, isPlaying, selectedBlueprintPath]
+  );
   const showMulti = !isBlueprintFile && (selectedActorIds.length > 1 || multiSelectMode);
   const inspectorSheet = useSelectionInspectorSheet(true);
   const { value: parsedSceneData, error } = parseJsonFile(path, text);
@@ -196,6 +227,7 @@ export function SceneEditor({
     editCameraRef,
     marqueeRef,
     selectedActorIdsRef,
+    selectedBlueprintPathRef,
   });
   const panGesture = usePanGesture({ canvasRef, editCameraRef, isPlaying });
   useScenePlayKeys(runtimeRef);
@@ -249,8 +281,11 @@ export function SceneEditor({
     selectedActorIds.length === 1
       ? previewSceneData.actors.find((actor) => actor.id === selectedActorIds[0])
       : undefined;
+  const selectedBlueprintTemplate = rawSelectedActor?.blueprint
+    ? getBlueprintTemplate(files, rawSelectedActor.blueprint)
+    : undefined;
   const selectedBlueprintName = rawSelectedActor?.blueprint
-    ? getBlueprintTemplate(files, rawSelectedActor.blueprint)?.name ?? basename(rawSelectedActor.blueprint)
+    ? selectedBlueprintTemplate?.name ?? basename(rawSelectedActor.blueprint)
     : undefined;
   // Hotbar-selected blueprint, resolved fresh from live files each render. A
   // selection whose file vanished (cascade delete, external edit) degrades to
@@ -259,6 +294,9 @@ export function SceneEditor({
     !isBlueprintFile && selectedBlueprintPath
       ? getBlueprintTemplate(files, selectedBlueprintPath)
       : null;
+  // Only dim for a blueprint that actually resolves to an inspectable template
+  // (mirrors the sidebar): a vanished/stale selection highlights nothing.
+  selectedBlueprintPathRef.current = hotbarBlueprint ? selectedBlueprintPath : null;
   // Template edits from the sidebar write the BLUEPRINT file, not this scene:
   // optimistic fold into live files state (instant merged-instance updates
   // here) + debounced writeFile via SingleEditor's saver, which also makes
@@ -391,24 +429,6 @@ export function SceneEditor({
     void writeFile(result.blueprintFile.path, result.blueprintFile.text);
     history.commit(serialize(result.sceneData));
   };
-  const inspectorLabel = isBlueprintFile
-    ? 'Blueprint'
-    : hotbarBlueprint
-      ? 'Blueprint'
-      : showMulti
-        ? 'Multi-select'
-        : selectedActor
-          ? 'Inspector'
-          : 'Scene';
-  const inspectorHint = isBlueprintFile
-    ? sceneData.name ?? basename(path)
-    : hotbarBlueprint
-      ? hotbarBlueprint.name
-      : showMulti
-        ? `${selectedActorIds.length} actor${selectedActorIds.length === 1 ? '' : 's'} selected`
-        : selectedActor
-          ? `actor ${selectedActor.id}`
-          : 'scene settings';
   return (
     <>
       <EditorHeader
@@ -451,6 +471,7 @@ export function SceneEditor({
                 editCameraRef={editCameraRef}
                 isPlaying={isPlaying}
                 selectedBlueprintPath={selectedBlueprintPath}
+                instanceBlueprintPath={rawSelectedActor?.blueprint ?? null}
                 onSelectBlueprint={onSelectBlueprint}
                 onAddActor={onAddActor}
                 dragPlace={dragPlace}
@@ -506,6 +527,7 @@ export function SceneEditor({
                   editCameraRef={editCameraRef}
                   sceneData={sceneData}
                   previewSceneData={previewSceneData}
+                  sprites={sprites}
                   selectedActorIds={selectedActorIds}
                   snap={snapSettings}
                   onArrange={isBlueprintFile ? undefined : actions.arrangeSelection}
@@ -519,13 +541,15 @@ export function SceneEditor({
           </div>
           <aside {...inspectorSheet.rootProps}>
             <div {...inspectorSheet.grabProps}>
-              <SheetGrabHandle label={inspectorLabel} hint={inspectorHint} />
+              <SheetGrabHandle />
             </div>
             <div className={cx(styles.sheetBody, styles.inspectorBody)}>
               {hotbarBlueprint ? (
                 <BlueprintInspector
                   name={hotbarBlueprint.name}
                   template={hotbarBlueprint}
+                  sprites={sprites}
+                  blueprintPath={selectedBlueprintPath}
                   files={files}
                   onRename={blueprintActions.rename}
                   onSetComponent={blueprintActions.setComponent}
@@ -542,14 +566,23 @@ export function SceneEditor({
                 />
               ) : selectedActor ? (
                 <ActorInspector
+                  key={selectedActor.id}
                   selectedActor={selectedActor}
                   rawActor={rawSelectedActor}
                   blueprintName={selectedBlueprintName}
+                  blueprintTemplate={selectedBlueprintTemplate}
+                  sprites={sprites}
                   files={files}
+                  showAddBehavior={isBlueprintFile}
                   onSetComponent={actions.updateComponent}
                   onAddBehavior={actions.addBehavior}
                   onRemoveBehavior={actions.removeBehavior}
                   onFork={isBlueprintFile ? undefined : onForkSelection}
+                  onEditBlueprint={
+                    isBlueprintFile || !rawSelectedActor?.blueprint
+                      ? undefined
+                      : () => onSelectBlueprint(rawSelectedActor.blueprint)
+                  }
                 />
               ) : (
                 <SceneInspector
@@ -692,8 +725,9 @@ function parseHexColor(value) {
 function useSelectionInspectorSheet(open) {
   // Inspector visibility is driven by selection / multi-mode; the sheet hook
   // owns the drag-resize height and remembers it across selections while
-  // mounted (and restores it when the sheet reopens).
-  return useMobileSheet({ open, baseClassName: styles.inspector });
+  // mounted (and restores it when the sheet reopens), plus persists it across
+  // reloads via `storageKey`.
+  return useMobileSheet({ open, baseClassName: styles.inspector, storageKey: 'scene-inspector' });
 }
 function useSelectionGesture(args) {
   const dragRef = useRef(null);
@@ -724,6 +758,7 @@ function useSelectionGesture(args) {
       movingActorIds: [],
       moveStarts: {},
       recordedMoveSnapshot: false,
+      lastMoveKey: '0,0',
       selectionBeforeMarquee: [...current.selectedActorIds],
     };
     if (event.shiftKey) {
@@ -759,6 +794,15 @@ function useSelectionGesture(args) {
       const dx = snapDelta(dxTotal, snap.gridSize, snap.enabled);
       const dy = snapDelta(dyTotal, snap.gridSize, snap.enabled);
       drag.lastPoint = point;
+      // Key the commit on the snapped delta, not on `nextScene === sceneData`.
+      // `moveActorsFromStarts` returns the pointer-down scene unchanged when the
+      // delta lands back on the start, and an identity guard would skip applying
+      // it -- stranding the actors on the last grid step instead of letting them
+      // return to origin. Re-apply whenever the snapped delta changes; the
+      // identity check now only gates recording the undo snapshot.
+      const moveKey = `${dx},${dy}`;
+      if (moveKey === drag.lastMoveKey) return;
+      drag.lastMoveKey = moveKey;
       const nextScene = moveActorsFromStarts(
         current.sceneData,
         drag.movingActorIds,
@@ -766,8 +810,7 @@ function useSelectionGesture(args) {
         dx,
         dy
       );
-      if (nextScene === current.sceneData) return;
-      if (!drag.recordedMoveSnapshot) {
+      if (nextScene !== current.sceneData && !drag.recordedMoveSnapshot) {
         current.recordSceneSnapshot();
         drag.recordedMoveSnapshot = true;
       }
@@ -1179,6 +1222,7 @@ function useScenePlayLoop({
   editCameraRef,
   marqueeRef,
   selectedActorIdsRef,
+  selectedBlueprintPathRef,
 }) {
   // Spin up / tear down the play-mode runtime as the user toggles play. `text`
   // is the stable identity for `sceneData` (which is re-parsed every render);
@@ -1234,7 +1278,7 @@ function useScenePlayLoop({
           viewport: frameViewport,
           useCamera: true,
           editPlaceholders: !isPlaying,
-          editSelectedActorIds,
+          dimBlueprintPath: isPlaying ? null : selectedBlueprintPathRef.current,
         });
       }
       raf = requestAnimationFrame(frame);
@@ -1242,7 +1286,17 @@ function useScenePlayLoop({
     raf = requestAnimationFrame(frame);
     return () => cancelAnimationFrame(raf);
     // eslint-disable-next-line react-hooks/exhaustive-deps -- `text` proxies `sceneData` identity; resetting on every parse churns the loop and wipes runtime state.
-  }, [sprites, files, isPlaying, text, canvasRef, runtimeRef, marqueeRef, selectedActorIdsRef]);
+  }, [
+    sprites,
+    files,
+    isPlaying,
+    text,
+    canvasRef,
+    runtimeRef,
+    marqueeRef,
+    selectedActorIdsRef,
+    selectedBlueprintPathRef,
+  ]);
 }
 function useScenePlayKeys(runtimeRef) {
   useEffect(() => {
@@ -1343,6 +1397,8 @@ function SceneInspector({ sceneData, snapSettings, onChangeScene, onChangeEditor
 function BlueprintInspector({
   name,
   template,
+  sprites,
+  blueprintPath,
   files,
   onRename,
   onSetComponent,
@@ -1350,16 +1406,25 @@ function BlueprintInspector({
   onRemoveBehavior,
 }) {
   const templateActor = { id: '__blueprint__', components: template.components };
+  const instanceCount = countBlueprintInstances(files, blueprintPath);
   return (
     <>
-      <div className={styles.instanceHint}>
-        <input
-          className={styles.blueprintNameInput}
-          value={name}
-          onChange={(event) => onRename?.(event.target.value)}
-          aria-label="Blueprint name"
-          spellCheck={false}
-        />
+      <div className={styles.instanceHeader}>
+        <div className={styles.instanceHeaderName}>
+          <BlueprintThumbnail blueprint={template} sprites={sprites} />
+          <div className={styles.instanceHeaderNameCol}>
+            <input
+              className={styles.blueprintNameInput}
+              value={name}
+              onChange={(event) => onRename?.(event.target.value)}
+              aria-label="Blueprint name"
+              spellCheck={false}
+            />
+            <span className={styles.instanceHeaderId}>
+              {instanceCount} {instanceCount === 1 ? 'actor' : 'actors'}
+            </span>
+          </div>
+        </div>
       </div>
       <ActorInspector
         selectedActor={templateActor}
@@ -1372,15 +1437,43 @@ function BlueprintInspector({
     </>
   );
 }
+// Per-behavior helper the inspector fields use to render instance overrides.
+// `isOverridden` is true only for inherited props the instance has its own
+// value for (position/rotation are `inherit: false` and always instance-local,
+// so they never read as "overriding" a blueprint default). `baseline` is what
+// the prop falls back to when reset -- the blueprint template value if present,
+// else the behavior's default. `reset` writes that baseline; for inherited
+// props `applyComponentPatch` then drops the now-redundant override.
+function makeOverrideContext({ Behavior, rawComponent, templateProps, setComponent }) {
+  const baselineOf = (prop) =>
+    templateProps && prop in templateProps ? templateProps[prop] : Behavior?.defaultProps?.[prop];
+  return {
+    isOverridden: (prop) =>
+      isInheritedProp(Behavior, prop) && !!rawComponent && prop in rawComponent,
+    // True when the behavior overrides at least one inherited prop -- i.e. it
+    // has a field that renders with the purple override tint. Drives the
+    // matching tint on the panel's title. Position/rotation are inherit:false,
+    // so a position-only instance override doesn't count (nor does it tint any
+    // field), matching isOverridden's semantics.
+    anyOverridden: () =>
+      !!rawComponent && Object.keys(rawComponent).some((prop) => isInheritedProp(Behavior, prop)),
+    baseline: baselineOf,
+    reset: (prop) => setComponent({ [prop]: baselineOf(prop) }),
+  };
+}
 function ActorInspector({
   selectedActor,
   rawActor,
   blueprintName,
+  blueprintTemplate,
+  sprites,
+  showAddBehavior = true,
   files,
   onSetComponent,
   onAddBehavior,
   onRemoveBehavior,
   onFork,
+  onEditBlueprint,
 }) {
   const isInstance = Boolean(rawActor?.blueprint);
   const presentNames = new Set(
@@ -1392,38 +1485,96 @@ function ActorInspector({
     (candidate) => !presentNames.has(candidate.behaviorName)
   );
   const behaviorEntries = Object.entries(selectedActor.components).filter((entry) => !!entry[1]);
+  // For an instance, behaviors it doesn't already override are collapsed behind
+  // a reveal button; Layout and any behavior with an instance override stay
+  // visible below the header. Revealing is a pure view toggle -- it never
+  // touches the actor, it just exposes the inherited behaviors' fields so they
+  // can be overridden. Keyed by actor id at the call site, so the collapsed
+  // state resets when a different actor is selected.
+  const [showAllBehaviors, setShowAllBehaviors] = useState(false);
+  const isPinnedBehavior = (behaviorName) =>
+    behaviorName === 'Layout' || Boolean(rawActor?.components?.[behaviorName]);
+  const collapsed = isInstance && !showAllBehaviors;
+  const visibleEntries = collapsed
+    ? behaviorEntries.filter(([behaviorName]) => isPinnedBehavior(behaviorName))
+    : behaviorEntries;
+  const showReveal = collapsed && visibleEntries.length < behaviorEntries.length;
   return (
     <>
       {isInstance ? (
-        <div className={styles.instanceHint}>
-          <span className={styles.instanceHintLabel}>Instance of {blueprintName}</span>
+        <div className={styles.instanceHeader}>
+          <div className={styles.instanceHeaderName}>
+            <BlueprintThumbnail
+              blueprint={blueprintTemplate ?? { components: selectedActor.components }}
+              sprites={sprites}
+            />
+            <div className={styles.instanceHeaderNameCol}>
+              <span className={styles.instanceHeaderNameText}>
+                <strong className={styles.instanceHeaderNameStrong}>{blueprintName}</strong> Actor
+              </span>
+              <span className={styles.instanceHeaderId}>id: {selectedActor.id}</span>
+            </div>
+          </div>
+          {onEditBlueprint ? (
+            <button
+              type="button"
+              className={styles.instanceForkButton}
+              onClick={onEditBlueprint}
+              title="Select this blueprint in the hotbar">
+              <Icon name="pencil" />
+              <span>Edit blueprint</span>
+            </button>
+          ) : null}
           {onFork ? (
-            <IconButton icon="code-fork" label="New blueprint from this actor" onClick={onFork} />
+            <button
+              type="button"
+              className={styles.instanceForkButton}
+              onClick={onFork}
+              title="New blueprint from this actor">
+              <Icon name="code-fork" />
+              <span>Fork new blueprint</span>
+            </button>
           ) : null}
         </div>
       ) : null}
-      <AddBehaviorPicker
-        available={availableBehaviors}
-        onAdd={(behaviorName) => onAddBehavior(selectedActor.id, behaviorName)}
-      />
-      {behaviorEntries.map(([behaviorName, component], index) => {
+      {showAddBehavior ? (
+        <AddBehaviorPicker
+          available={availableBehaviors}
+          onAdd={(behaviorName) => onAddBehavior(selectedActor.id, behaviorName)}
+        />
+      ) : null}
+      {visibleEntries.map(([behaviorName, component], index) => {
         const Behavior = behaviorClasses.find(
           (candidate) => candidate.behaviorName === behaviorName
         );
         const Inspector = Behavior?.Inspector;
+        const setComponent = (nextProps) =>
+          onSetComponent(selectedActor.id, behaviorName, nextProps);
+        // Instance overrides get a purple tint + "Default: X [Reset]" sub-line.
+        // Null when editing a blueprint template (nothing to override against).
+        const override = isInstance
+          ? makeOverrideContext({
+              Behavior,
+              rawComponent: rawActor?.components?.[behaviorName],
+              templateProps: blueprintTemplate?.components?.[behaviorName],
+              setComponent,
+            })
+          : null;
         const body = Inspector ? (
           <Inspector
             actor={selectedActor}
             component={component}
             files={files}
-            setComponent={(nextProps) => onSetComponent(selectedActor.id, behaviorName, nextProps)}
+            setComponent={setComponent}
+            override={override}
           />
         ) : (
           <AutoInspector
             behaviorName={behaviorName}
             defaultProps={Behavior?.defaultProps ?? component}
             component={component}
-            setComponent={(nextProps) => onSetComponent(selectedActor.id, behaviorName, nextProps)}
+            setComponent={setComponent}
+            override={override}
           />
         );
         // Layout is core to every actor -- it cannot be removed. A component
@@ -1432,7 +1583,9 @@ function ActorInspector({
         // inherited component" concept (see propertyMeta punt list).
         const removable =
           behaviorName !== 'Layout' && (!isInstance || Boolean(rawActor.components?.[behaviorName]));
-        const isLast = index === behaviorEntries.length - 1;
+        // When the reveal button follows, keep the last visible panel's divider
+        // so it doesn't merge into the button row.
+        const isLast = index === visibleEntries.length - 1 && !showReveal;
         // Trash renders before the panel so the panel stays the wrapper's
         // last child -- the panel's own `:last-child` border zeroes out, and
         // this wrapper owns the divider between panels deterministically.
@@ -1469,6 +1622,15 @@ function ActorInspector({
           </div>
         );
       })}
+      {showReveal ? (
+        <button
+          type="button"
+          className={styles.revealOverridesButton}
+          onClick={() => setShowAllBehaviors(true)}>
+          <Icon name="chevron-down" />
+          <span>Override behavior properties</span>
+        </button>
+      ) : null}
     </>
   );
 }