Basic placement editor.

src/components/palette/PaletteProperty.svelte

@@ -25,6 +25,7 @@
     import { tick } from 'svelte';
     import { DOCUMENTATION_SYMBOL, EDIT_SYMBOL } from '../../parser/Symbols';
     import MotionEditor from './MotionEditor.svelte';
+    import PlacementEditor from './PlacementEditor.svelte';
 
     export let project: Project;
     export let property: OutputProperty;
@@ -137,12 +138,24 @@
         {:else if property.type === 'content'}
             <ContentEditor {project} list={values.getList()} {editable} />
         {:else if property.type === 'place'}
-            {@const place = values.getPlace(project)}
-            {@const motion = values.getMotion(project)}
+            {@const place = values.getEvaluationOf(
+                project,
+                project.shares.output.Place
+            )}
+            {@const motion = values.getEvaluationOf(
+                project,
+                project.shares.input.Motion
+            )}
+            {@const placement = values.getEvaluationOf(
+                project,
+                project.shares.input.Placement
+            )}
             {#if place}
                 <PlaceEditor {project} {place} {editable} convertable={true} />
             {:else if motion}
                 <MotionEditor {project} {motion} {editable} />
+            {:else if placement}
+                <PlacementEditor {project} {placement} {editable} />
             {/if}
         {/if}
     </div>

src/components/palette/PlaceEditor.svelte

@@ -134,7 +134,7 @@
                         project.shares.input.Placement.getReference(
                             project.locales
                         ),
-                        []
+                        [place]
                     ),
                 ],
             ])}>→{project.shares.input.Placement.getNames()[0]}</Button

src/components/palette/PlacementEditor.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import Evaluate from '../../nodes/Evaluate';
+    import type Project from '@models/Project';
+    import PlaceEditor from './PlaceEditor.svelte';
+
+    export let project: Project;
+    export let placement: Evaluate;
+    export let editable: boolean;
+
+    $: place = placement.getInput(
+        project.shares.input.Placement.inputs[0],
+        project.getNodeContext(placement)
+    );
+</script>
+
+<div class="motion">
+    {project.shares.input.Placement.names.getPreferredNameString([], true)}
+    {#if place instanceof Evaluate}
+        <div class="field"
+            ><PlaceEditor {project} {place} {editable} convertable={false} />
+        </div>
+    {/if}
+</div>
+
+<style>
+    .motion {
+        display: flex;
+        flex-direction: column;
+        gap: var(--wordplay-spacing);
+    }
+    .field {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        font-family: var(--wordplay-code-font);
+        width: 100%;
+    }
+</style>

src/edit/OutputPropertyValueSet.ts

@@ -14,6 +14,8 @@ import type Bind from '../nodes/Bind';
 import type { Database } from '../db/Database';
 import MarkupValue from '@values/MarkupValue';
 import type Locale from '../locale/Locale';
+import type StructureDefinition from '../nodes/StructureDefinition';
+import type StreamDefinition from '../nodes/StreamDefinition';
 
 /**
  * Represents one or more equivalent inputs to an output expression.
@@ -124,18 +126,13 @@ export default class OutputPropertyValueSet {
         return expr instanceof ListLiteral ? expr : undefined;
     }
 
-    getPlace(project: Project) {
+    getEvaluationOf(
+        project: Project,
+        definition: StructureDefinition | StreamDefinition
+    ) {
         const expr = this.getExpression();
         return expr instanceof Evaluate &&
-            expr.is(project.shares.output.Place, project.getNodeContext(expr))
-            ? expr
-            : undefined;
-    }
-
-    getMotion(project: Project) {
-        const expr = this.getExpression();
-        return expr instanceof Evaluate &&
-            expr.is(project.shares.input.Motion, project.getNodeContext(expr))
+            expr.is(definition, project.getNodeContext(expr))
             ? expr
             : undefined;
     }

src/edit/ShapeProperties.ts

@@ -1,3 +1,22 @@
-import NumberLiteral from '../nodes/NumberLiteral';
-import Unit from '../nodes/Unit';
-import OutputPropertyRange from './OutputPropertyRange';
+import type Locale from '../locale/Locale';
+import type Project from '../models/Project';
+import ListLiteral from '../nodes/ListLiteral';
+import { getOutputProperties } from './OutputProperties';
+import OutputProperty from './OutputProperty';
+
+export default function getShapeProperties(
+    project: Project,
+    locale: Locale
+): OutputProperty[] {
+    return [
+        new OutputProperty(
+            locale.output.Stage.content,
+            'content',
+            true,
+            false,
+            (expr) => expr instanceof ListLiteral,
+            () => ListLiteral.make([])
+        ),
+        ...getOutputProperties(project, locale),
+    ];
+}