@salsita-ai/sdk 0.0.0-stage → 0.49.0-develop.cbee856178

package/dist/docs/3d-scene/rendering/scene-entity-object.mdx

@@ -0,0 +1,2576 @@
+# Scene Entity Object
+
+- [Use case](#use-case)
+- [Guide](#guide)
+- [Limitations](#limitations)
+- [TypeScript Interfaces](#typescript-interfaces)
+- [Example](#example)
+- [Test cases](#test-cases)
+- [Complete Implementation](#complete-implementation)
+
+## Use case
+
+Use `sceneEntityObject` when you need to render custom React Three Fiber components while retaining Phoenix platform features like positioning, selection highlighting, and conditional rendering. Unlike [customSceneEntity](?path=/docs/3d-scene-rendering-custom-entity--docs) which bypasses the entire rendering pipeline, `sceneEntityObject` integrates with Phoenix's object management system.
+
+This is useful when you want procedural geometry that reacts to entity state, but still need per-entity selection, `sceneEntityProperties` for entity positioning, `sceneEntityObjectProperties` for object transforms, or conditional mounting via `$filter`. The example demonstrates a scene with multiple entity types (houses, trees, fences, garden) where each entity can be selected on the canvas and configured through the sidebar.
+
+The key differences between rendering approaches:
+
+- [sceneEntityRemoteObject](?path=/docs/3d-scene-rendering-basic--docs) loads static GLTF files with Phoenix handling all transforms
+- `sceneEntityObject` renders custom React Three Fiber components while Phoenix manages positioning and selection
+- [customSceneEntity](?path=/docs/3d-scene-rendering-custom-entity--docs) gives full control but bypasses positioning, selection highlighting, and other object features
+
+## Guide
+
+The implementation combines YAML configuration for Phoenix features with React components for 3D content.
+
+### Basic Setup
+
+Add a `sceneEntityObject` component to your entity type. The `name` property references a Phoenix element that will render the 3D content:
+
+```yaml
+components:
+  House:
+    sceneEntityObject:
+      main:
+        name: HouseElement
+```
+
+Create the element using `createCustomPhoenixEntityElement()`:
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('HouseElement', () => (
+  <group>
+    <mesh position={[0, 40, 0]} castShadow>
+      <boxGeometry args={[80, 80, 60]} />
+      <meshStandardMaterial color="#e8d4b8" />
+    </mesh>
+  </group>
+))
+```
+
+The component name must match the `name` in your YAML configuration. You can use any React Three Fiber components including primitives, drei helpers, or custom THREE.js objects.
+
+### Entity Positioning with sceneEntityProperties
+
+Use `sceneEntityProperties` to position entire entities based on their attributes. This is useful when entity position is stored as domain data:
+
+```yaml
+shapes:
+  Tree:
+    x:
+      type: number
+    z:
+      type: number
+
+components:
+  Tree:
+    sceneEntityProperties:
+      main:
+        offsetX:
+          $read: x
+        offsetZ:
+          $read: z
+
+    sceneEntityObject:
+      main:
+        name: TreeElement
+```
+
+The entity reads its `x` and `z` attributes and uses them to position itself in the scene. The TreeElement component doesn't need to handle positioning - it renders at the origin and Phoenix moves it.
+
+### Conditional Rendering with $filter
+
+Use `$filter` to conditionally mount different objects based on entity state. This is useful for style variations or state-dependent rendering where you want completely different components:
+
+```yaml
+expressions:
+  House:
+    $isClassicStyle:
+      type: boolean
+    $isModernStyle:
+      type: boolean
+
+components:
+  House:
+    sceneEntityObject:
+      classic:
+        $filter:
+          $read: $isClassicStyle
+        name: ClassicHouseElement
+      modern:
+        $filter:
+          $read: $isModernStyle
+        name: ModernHouseElement
+```
+
+When the filter expression returns false, the object is not mounted at all. This differs from hiding with `visible: false` - the React component is completely unmounted and remounted when conditions change.
+
+The corresponding expressions implementation:
+
+```typescript
+export default phx.domain.implementCustomExpressions({
+  House: {
+    $isClassicStyle: s => s.style === 'classic',
+    $isModernStyle: s => s.style === 'modern',
+  },
+})
+```
+
+### Selection and Highlighting
+
+Add `selectable` and `detail` components to enable canvas click selection:
+
+```yaml
+components:
+  Tree:
+    sceneEntityObject:
+      main:
+        name: TreeElement
+
+    selectable:
+      default: {}
+
+    detail:
+      main:
+        title: Tree
+        subtitle: Click to configure
+        description: Configure the tree
+```
+
+When users click the entity in the canvas, it becomes selected and highlighted. The `detail` component provides text shown in the selection UI.
+
+### Reusable Component Pattern
+
+For variants that share rendering logic, create a reusable library component and thin element wrappers:
+
+```tsx
+// _library/Tree.tsx
+export interface TreeProps {
+  readonly isWinter: boolean
+  readonly foliageColors: readonly string[]
+  readonly scale: number
+}
+
+export function Tree({ isWinter, foliageColors, scale }: TreeProps) {
+  return (
+    <Float speed={isWinter ? 0.5 : 1} rotationIntensity={0.1}>
+      <group scale={scale}>
+        <mesh position={[0, 25, 0]} castShadow>
+          <cylinderGeometry args={[4, 6, 50, 8]} />
+          <meshStandardMaterial color="#5c4033" />
+        </mesh>
+        <mesh position={[0, 60, 0]} castShadow>
+          <coneGeometry args={[25, 40, 8]} />
+          <meshStandardMaterial color={foliageColors[0]} />
+        </mesh>
+      </group>
+    </Float>
+  )
+}
+```
+
+```tsx
+// elements/SmallSummerTreeElement.tsx
+import { phx } from '../../.phoenix/phx.js'
+import { Tree } from '../_library/Tree.js'
+
+const SUMMER_FOLIAGE = ['#228b22', '#2e8b2e', '#32cd32']
+
+export default phx.frontend.createCustomPhoenixEntityElement('SmallSummerTreeElement', () => (
+  <Tree isWinter={false} foliageColors={SUMMER_FOLIAGE} scale={0.6} />
+))
+```
+
+This pattern keeps elements simple (just wiring props) while the library component handles all the R3F rendering.
+
+### Canvas Environment
+
+For scene-wide elements like lighting and sky, use `canvasCustomEnvironment` with `createCustomPhoenixLayoutElement`:
+
+```yaml
+components:
+  Scene:
+    canvasCustomEnvironment:
+      default:
+        name: CanvasEnvironment
+```
+
+```tsx
+export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {
+  const rootEntity = phx.frontend.useRootEntityState()
+  const isWinter = rootEntity.isWinter
+
+  return (
+    <>
+      <Sky sunPosition={isWinter ? [100, 20, 100] : [100, 50, 100]} />
+      <ambientLight intensity={isWinter ? 0.6 : 0.4} />
+      <Environment preset={isWinter ? 'dawn' : 'park'} />
+    </>
+  )
+})
+```
+
+Environment elements render at the canvas level and are not associated with specific entities.
+
+### Material Override with Swatches
+
+To override materials on custom React elements from a parent entity, name your materials and use `sceneEntityRemoteMaterialOverride`. This lets you define a color swatch at the Scene level that cascades to child entities.
+
+First, name the materials in your React components so they can be targeted:
+
+```tsx
+// _library/Fence.tsx
+function PicketPost({ position, color, isWinter }) {
+  return (
+    <group position={position}>
+      <mesh position={[0, 10, 0]} castShadow>
+        <boxGeometry args={[2, 20, 2]} />
+        <meshStandardMaterial name="fenceMaterial" color={color} />
+      </mesh>
+    </group>
+  )
+}
+```
+
+Add the swatch attribute to the Scene shape and define expressions to resolve swatch keys to colors:
+
+```yaml
+shapes:
+  Scene:
+    fenceColor:
+      type: string
+
+expressions:
+  Scene:
+    $fenceColorHex:
+      type: string
+    $fenceColorSwatches:
+      type: object
+```
+
+```typescript
+const FENCE_COLORS = {
+  Natural: '#deb887',
+  White: '#f5f5f5',
+  Brown: '#8b4513',
+  Gray: '#708090',
+} as const
+
+export default phx.domain.implementCustomExpressions({
+  Scene: {
+    $fenceColorSwatches: () => ({
+      Natural: { color: FENCE_COLORS.Natural, swatchName: 'Natural' },
+      White: { color: FENCE_COLORS.White, swatchName: 'White' },
+      Brown: { color: FENCE_COLORS.Brown, swatchName: 'Brown' },
+      Gray: { color: FENCE_COLORS.Gray, swatchName: 'Gray' },
+    }),
+    $fenceColorHex: s => FENCE_COLORS[s.fenceColor] ?? FENCE_COLORS.Natural,
+  },
+})
+```
+
+Configure the material swatch selector and material override on the Scene entity. The override references a source GLTF material and targets materials by name:
+
+```yaml
+components:
+  Scene:
+    propertyPage:
+      main:
+        children:
+          - kind: propertyContainerItem
+            props:
+              title: Fence Color
+              description: Select a color for the fence
+            children:
+              - kind: materialSwatchSelector
+                props:
+                  instanceName: fenceColor
+
+    materialSwatch:
+      fenceColor:
+        selectedSwatchKey:
+          $bind: fenceColor
+        swatches:
+          $read: $fenceColorSwatches
+
+    sceneEntityRemoteMaterialOverride:
+      fenceMaterial:
+        fileUrl: '/models/buckyball.glb'
+        materialName: sampleMaterial
+        materialsToOverride: ['fenceMaterial']
+        color:
+          $read: $fenceColorHex
+```
+
+The `sceneEntityRemoteMaterialOverride` uses a source material from a GLTF file (`buckyball.glb/sampleMaterial`) as the base, then overrides properties like `color`. The `materialsToOverride` array specifies which material names to target - in this case, all `fenceMaterial` instances in child entities. This override cascades from Scene to the Fence entity, applying the selected color to all fence meshes.
+
+## Limitations
+
+When using `sceneEntityObject` with Phoenix elements (via the `name` prop), there are several limitations to be aware of. These stem from how Phoenix wraps and processes custom React components.
+
+### Group Wrapping
+
+Phoenix elements are wrapped in a `<group>` container. Your component renders inside this wrapper, adding an extra node to the scene graph hierarchy. Transforms from `sceneEntityObjectProperties` are applied to the wrapper group, not directly to your component's root.
+
+### Morph Targets Not Supported
+
+Morph target animations (`morphTargetInfluences`) only work when passing an `Object3D` directly via the `object` prop. When using `name` to reference a Phoenix element, morph targets are not applied because the wrapper group has no morph target dictionary.
+
+### Static Object Reference
+
+Phoenix captures the object reference once on mount. Features that depend on traversing the object graph are computed at this initial moment:
+
+- **Selection highlighting** - clones the object structure once; won't reflect meshes added later
+- **Material overrides** - traverses to find named materials on mount; new meshes won't receive overrides
+- **Layer settings** - interactivity and render layers are set via traversal; dynamically added meshes may not be interactive
+- **Transformers and clips** - applied once to the captured reference
+- **Frustum culling** - setting applied via traversal on mount
+
+If your component dynamically adds, removes, or modifies meshes after the initial render, these features won't update to reflect those changes.
+
+### Workarounds
+
+For components with dynamic internal structure, consider:
+
+- Use `$filter` to swap between different element variants rather than dynamically mutating a single element's mesh structure
+- Keep the mesh structure static and use React state to change material colors, positions, or other properties that don't require Phoenix to re-traverse
+- For advanced cases requiring dynamic meshes with full Phoenix features, use `sceneEntityRemoteObject` with GLTF files instead
+
+### When to Use customSceneEntity Instead
+
+If you need full control over dynamic 3D content and don't require Phoenix features like selection highlighting, material overrides, or decals, use [customSceneEntity](?path=/docs/3d-scene-rendering-custom-entity--docs) instead. It bypasses Phoenix's object management entirely, giving you direct control at the cost of platform integration.
+
+## TypeScript Interfaces
+
+```typescript
+export type SceneEntityObjectComponentState = {
+  /**
+   * Three.js object instance to render in the scene.
+   * Use when you need to pass an existing Object3D.
+   */
+  readonly object?: Object3D | undefined
+
+  /**
+   * Name of the PHX element to render in the scene.
+   * Must match a component registered via createCustomPhoenixEntityElement.
+   */
+  readonly name?: string | undefined
+
+  /**
+   * React node to render inside the scene object.
+   * Alternative to using name - allows inline JSX in frontend code.
+   */
+  readonly node?: Exclude<ReactNode, undefined> | undefined
+}
+```
+
+```typescript
+export type SceneEntityObjectPropertiesComponentState = {
+  /** Whether the object is visible */
+  readonly visible?: boolean | undefined
+
+  /** Position offset in configured dimension unit */
+  readonly offsetX?: number | undefined
+  readonly offsetY?: number | undefined
+  readonly offsetZ?: number | undefined
+
+  /** Rotation in radians */
+  readonly rotationX?: number | undefined
+  readonly rotationY?: number | undefined
+  readonly rotationZ?: number | undefined
+
+  /** Scale multipliers */
+  readonly scaleX?: number | undefined
+  readonly scaleY?: number | undefined
+  readonly scaleZ?: number | undefined
+
+  /**
+   * When set to false, the object is skipped from rendering
+   * but can still be used for camera fitting and highlighting.
+   */
+  readonly rendered?: boolean | undefined
+
+  /**
+   * When set to false, the object is skipped from mouse interactions.
+   * Useful for performance optimization with invisible bounding boxes.
+   */
+  readonly interactive?: boolean | undefined
+
+  /**
+   * When true (the default), the object will only be rendered when it is inside the camera's frustum.
+   * It may be appropriate to set this to false for certain objects, e.g. objects whose size changes
+   * significantly through morphing, or objects that are always visible.
+   */
+  readonly frustumCulled?: boolean | undefined
+
+  /**
+   * Whether the object casts shadows.
+   * @default false
+   */
+  readonly castShadow?: boolean | undefined
+
+  /**
+   * Whether the object receives shadows.
+   * @default false
+   */
+  readonly receiveShadow?: boolean | undefined
+
+  /**
+   * When set to `true`, selection highlighting is disabled for this object.
+   * The object remains selectable but no visual highlight effect is applied.
+   * The object also won't be faded when other objects are selected.
+   * @default false
+   */
+  readonly highlightingDisabled?: boolean | undefined
+}
+```
+
+## Example
+
+The example shows a house scene with multiple selectable entities. Click on houses, trees, or fences to select them and configure their attributes in the sidebar. Toggle the Winter switch to see all elements update - this demonstrates conditional rendering where different element variants are mounted based on state. Use the Fence Color swatch selector to change the fence color across all fence styles - this demonstrates how `sceneEntityRemoteMaterialOverride` on a parent entity cascades to child entities with named materials.
+
+## Test cases
+
+- Custom React Three Fiber components render correctly in the scene
+- `sceneEntityProperties` positions entities based on attribute values
+- `selectable` enables click-to-select with highlight on custom objects
+- `$filter` conditionally mounts/unmounts objects when expressions change
+- Multiple `sceneEntityObject` instances can be attached to one entity type
+- Canvas environment elements render lighting and sky correctly
+- Child entities in composition hierarchy render independently
+- Material swatch selector on Scene changes fence color across all fence styles
+- `sceneEntityRemoteMaterialOverride` cascades from parent to child entities
+
+## Complete Implementation
+
+{/* AUTO-GENERATED SECTION: This section is automatically updated by 'phoenix story build' */}
+
+<details>
+<summary>Click to view the complete implementation files</summary>
+
+### ./spec/domain.yaml
+
+```yaml
+model:
+  latest:
+    entityTypes:
+      - Scene
+      - House
+      - Tree
+      - Fence
+      - Garden
+    aliases:
+      RootEntity:
+        - Scene
+    commonTypes:
+      HouseStyle:
+        enum:
+          - classic
+          - modern
+          - cottage
+      TreeSize:
+        enum:
+          - small
+          - medium
+          - large
+      FenceStyle:
+        enum:
+          - picket
+          - modern
+          - stone
+      LayoutShape:
+        enum:
+          - square
+          - circular
+          - hexagonal
+    shapes:
+      Scene:
+        isWinter:
+          type: boolean
+        gardenShape:
+          $ref: '#/model/latest/commonTypes/LayoutShape'
+        fenceColor:
+          type: string
+      House:
+        style:
+          $ref: '#/model/latest/commonTypes/HouseStyle'
+      Tree:
+        x:
+          type: number
+        z:
+          type: number
+        size:
+          $ref: '#/model/latest/commonTypes/TreeSize'
+      Fence:
+        style:
+          $ref: '#/model/latest/commonTypes/FenceStyle'
+      Garden: {}
+
+expressions:
+  Scene:
+    $fenceColorHex:
+      type: string
+    $fenceColorSwatches:
+      type: object
+  House:
+    $isClassicSummer:
+      type: boolean
+    $isClassicWinter:
+      type: boolean
+    $isModernSummer:
+      type: boolean
+    $isModernWinter:
+      type: boolean
+    $isCottageSummer:
+      type: boolean
+    $isCottageWinter:
+      type: boolean
+    $smokePosition:
+      type: object
+      properties:
+        x:
+          type: number
+        y:
+          type: number
+        z:
+          type: number
+  Tree:
+    $isSmallSummer:
+      type: boolean
+    $isSmallWinter:
+      type: boolean
+    $isMediumSummer:
+      type: boolean
+    $isMediumWinter:
+      type: boolean
+    $isLargeSummer:
+      type: boolean
+    $isLargeWinter:
+      type: boolean
+  Fence:
+    $isPicketSquareSummer:
+      type: boolean
+    $isPicketSquareWinter:
+      type: boolean
+    $isPicketCircularSummer:
+      type: boolean
+    $isPicketCircularWinter:
+      type: boolean
+    $isPicketHexagonalSummer:
+      type: boolean
+    $isPicketHexagonalWinter:
+      type: boolean
+    $isModernSquareSummer:
+      type: boolean
+    $isModernSquareWinter:
+      type: boolean
+    $isModernCircularSummer:
+      type: boolean
+    $isModernCircularWinter:
+      type: boolean
+    $isModernHexagonalSummer:
+      type: boolean
+    $isModernHexagonalWinter:
+      type: boolean
+    $isStoneSquareSummer:
+      type: boolean
+    $isStoneSquareWinter:
+      type: boolean
+    $isStoneCircularSummer:
+      type: boolean
+    $isStoneCircularWinter:
+      type: boolean
+    $isStoneHexagonalSummer:
+      type: boolean
+    $isStoneHexagonalWinter:
+      type: boolean
+  Garden:
+    $isSquareSummer:
+      type: boolean
+    $isSquareWinter:
+      type: boolean
+    $isCircularSummer:
+      type: boolean
+    $isCircularWinter:
+      type: boolean
+    $isHexagonalSummer:
+      type: boolean
+    $isHexagonalWinter:
+      type: boolean
+
+relations:
+  Scene:
+    $house:
+      kind: allOfType
+      target: House
+      cardinality: 1-1
+      composedOf: true
+    $trees:
+      kind: allOfType
+      target: Tree
+      cardinality: 0-N
+      composedOf: true
+    $fence:
+      kind: allOfType
+      target: Fence
+      cardinality: 1-1
+      composedOf: true
+    $garden:
+      kind: allOfType
+      target: Garden
+      cardinality: 1-1
+      composedOf: true
+  House:
+    $scene:
+      kind: allOfType
+      target: Scene
+      cardinality: 1-1
+      composedOf: false
+  Tree:
+    $scene:
+      kind: allOfType
+      target: Scene
+      cardinality: 1-1
+      composedOf: false
+  Fence:
+    $scene:
+      kind: allOfType
+      target: Scene
+      cardinality: 1-1
+      composedOf: false
+  Garden:
+    $scene:
+      kind: allOfType
+      target: Scene
+      cardinality: 1-1
+      composedOf: false
+
+presets:
+  - rootEntityType: Scene
+    initialDomainEntities:
+      - id: Scene-1
+        type: Scene
+        isWinter: false
+        gardenShape: square
+        fenceColor: Natural
+      - id: House-1
+        type: House
+        style: classic
+      - id: Garden-1
+        type: Garden
+      - id: Fence-1
+        type: Fence
+        style: picket
+      - id: Tree-1
+        type: Tree
+        x: -120
+        z: -100
+        size: large
+      - id: Tree-2
+        type: Tree
+        x: -140
+        z: 80
+        size: medium
+      - id: Tree-3
+        type: Tree
+        x: 130
+        z: -90
+        size: medium
+      - id: Tree-4
+        type: Tree
+        x: 150
+        z: 100
+        size: small
+      - id: Tree-5
+        type: Tree
+        x: -100
+        z: 130
+        size: medium
+      - id: Tree-6
+        type: Tree
+        x: 110
+        z: -130
+        size: large
+      - id: Tree-7
+        type: Tree
+        x: -150
+        z: -60
+        size: small
+      - id: Tree-8
+        type: Tree
+        x: 140
+        z: 140
+        size: medium
+
+components:
+  Scene:
+    applicationConfig:
+      main:
+        layout: universal
+        miniSidebar: true
+        splitSidebar: true
+
+    canvasConfig:
+      default:
+        shadows: soft
+
+    canvasCustomEnvironment:
+      default:
+        name: CanvasEnvironment
+
+    staticPerspectiveCamera:
+      default:
+        animateOnLoad: false
+        priority: 1
+        fov: 45
+        near: 10
+        far: 1500
+        distance: 550
+        minDistance: 200
+        maxDistance: 1000
+        azimuthAngle: 0.6
+        polarAngle: 1.1
+        minPolarAngle: 0.3
+        maxPolarAngle: 1.5
+        lookAtY: 50
+
+    propertyPage:
+      main:
+        children:
+          - kind: propertyContainerGroup
+            props:
+              spacing: large
+            children:
+              - kind: attributeSwitchSelector
+                props:
+                  instanceName: isWinter
+                  title: Season
+                  description: Toggle between summer and winter
+              - kind: propertyContainerItem
+                props:
+                  title: Garden Shape
+                  description: Change the shape of the garden
+                children:
+                  - kind: attributeCardSelector
+                    props:
+                      instanceName: gardenShape
+              - kind: propertyContainerItem
+                props:
+                  title: Fence Color
+                  description: Select a color for the fence
+                children:
+                  - kind: materialSwatchSelector
+                    props:
+                      instanceName: fenceColor
+
+    attributeSwitch:
+      isWinter:
+        value:
+          $bind: isWinter
+
+    attributeSelection:
+      gardenShape:
+        value:
+          $bind: gardenShape
+        options:
+          - label: Square
+            value: square
+            img: /images/scene-entity-object/garden-square.svg
+          - label: Circular
+            value: circular
+            img: /images/scene-entity-object/garden-circular.svg
+          - label: Hexagonal
+            value: hexagonal
+            img: /images/scene-entity-object/garden-hexagonal.svg
+
+    materialSwatch:
+      fenceColor:
+        selectedSwatchKey:
+          $bind: fenceColor
+        swatches:
+          $read: $fenceColorSwatches
+
+    sceneEntityRemoteMaterialOverride:
+      fenceMaterial:
+        fileUrl: '/models/buckyball.glb'
+        materialName: sampleMaterial
+        materialsToOverride: ['fenceMaterial']
+        color:
+          $read: $fenceColorHex
+
+  House:
+    sceneEntityObject:
+      classicSummer:
+        $filter:
+          active:
+            $read: $isClassicSummer
+        name: ClassicSummerHouseElement
+      classicWinter:
+        $filter:
+          active:
+            $read: $isClassicWinter
+        name: ClassicWinterHouseElement
+      modernSummer:
+        $filter:
+          active:
+            $read: $isModernSummer
+        name: ModernSummerHouseElement
+      modernWinter:
+        $filter:
+          active:
+            $read: $isModernWinter
+        name: ModernWinterHouseElement
+      cottageSummer:
+        $filter:
+          active:
+            $read: $isCottageSummer
+        name: CottageSummerHouseElement
+      cottageWinter:
+        $filter:
+          active:
+            $read: $isCottageWinter
+        name: CottageWinterHouseElement
+
+    selectable:
+      default: {}
+
+    detail:
+      main:
+        title: House
+        subtitle: Click to configure
+        description: Configure the house style
+
+    propertyPage:
+      main:
+        children:
+          - kind: propertyContainerGroup
+            props:
+              spacing: large
+            children:
+              - kind: propertyContainerItem
+                props:
+                  title: House Style
+                  description: Choose a house style
+                children:
+                  - kind: attributeCardSelector
+                    props:
+                      instanceName: style
+
+    attributeSelection:
+      style:
+        value:
+          $bind: style
+        options:
+          - label: Classic
+            value: classic
+            img: /images/scene-entity-object/house-classic.svg
+          - label: Modern
+            value: modern
+            img: /images/scene-entity-object/house-modern.svg
+          - label: Cottage
+            value: cottage
+            img: /images/scene-entity-object/house-cottage.svg
+
+  Tree:
+    sceneEntityProperties:
+      main:
+        offsetX:
+          $read: x
+        offsetZ:
+          $read: z
+
+    sceneEntityObject:
+      smallSummer:
+        $filter:
+          active:
+            $read: $isSmallSummer
+        name: SmallSummerTreeElement
+      smallWinter:
+        $filter:
+          active:
+            $read: $isSmallWinter
+        name: SmallWinterTreeElement
+      mediumSummer:
+        $filter:
+          active:
+            $read: $isMediumSummer
+        name: MediumSummerTreeElement
+      mediumWinter:
+        $filter:
+          active:
+            $read: $isMediumWinter
+        name: MediumWinterTreeElement
+      largeSummer:
+        $filter:
+          active:
+            $read: $isLargeSummer
+        name: LargeSummerTreeElement
+      largeWinter:
+        $filter:
+          active:
+            $read: $isLargeWinter
+        name: LargeWinterTreeElement
+
+    selectable:
+      default: {}
+
+    detail:
+      main:
+        title: Tree
+        subtitle: Click to configure
+        description: Configure the tree size
+
+    propertyPage:
+      main:
+        children:
+          - kind: propertyContainerGroup
+            props:
+              spacing: large
+            children:
+              - kind: propertyContainerItem
+                props:
+                  title: Tree Size
+                  description: Choose tree size
+                children:
+                  - kind: attributeCardSelector
+                    props:
+                      instanceName: size
+
+    attributeSelection:
+      size:
+        value:
+          $bind: size
+        options:
+          - label: Small
+            value: small
+            img: /images/scene-entity-object/tree-small.svg
+          - label: Medium
+            value: medium
+            img: /images/scene-entity-object/tree-medium.svg
+          - label: Large
+            value: large
+            img: /images/scene-entity-object/tree-large.svg
+
+  Fence:
+    sceneEntityObject:
+      picketSquareSummer:
+        $filter:
+          active:
+            $read: $isPicketSquareSummer
+        name: PicketSquareSummerFenceElement
+      picketSquareWinter:
+        $filter:
+          active:
+            $read: $isPicketSquareWinter
+        name: PicketSquareWinterFenceElement
+      picketCircularSummer:
+        $filter:
+          active:
+            $read: $isPicketCircularSummer
+        name: PicketCircularSummerFenceElement
+      picketCircularWinter:
+        $filter:
+          active:
+            $read: $isPicketCircularWinter
+        name: PicketCircularWinterFenceElement
+      picketHexagonalSummer:
+        $filter:
+          active:
+            $read: $isPicketHexagonalSummer
+        name: PicketHexagonalSummerFenceElement
+      picketHexagonalWinter:
+        $filter:
+          active:
+            $read: $isPicketHexagonalWinter
+        name: PicketHexagonalWinterFenceElement
+      modernSquareSummer:
+        $filter:
+          active:
+            $read: $isModernSquareSummer
+        name: ModernSquareSummerFenceElement
+      modernSquareWinter:
+        $filter:
+          active:
+            $read: $isModernSquareWinter
+        name: ModernSquareWinterFenceElement
+      modernCircularSummer:
+        $filter:
+          active:
+            $read: $isModernCircularSummer
+        name: ModernCircularSummerFenceElement
+      modernCircularWinter:
+        $filter:
+          active:
+            $read: $isModernCircularWinter
+        name: ModernCircularWinterFenceElement
+      modernHexagonalSummer:
+        $filter:
+          active:
+            $read: $isModernHexagonalSummer
+        name: ModernHexagonalSummerFenceElement
+      modernHexagonalWinter:
+        $filter:
+          active:
+            $read: $isModernHexagonalWinter
+        name: ModernHexagonalWinterFenceElement
+      stoneSquareSummer:
+        $filter:
+          active:
+            $read: $isStoneSquareSummer
+        name: StoneSquareSummerFenceElement
+      stoneSquareWinter:
+        $filter:
+          active:
+            $read: $isStoneSquareWinter
+        name: StoneSquareWinterFenceElement
+      stoneCircularSummer:
+        $filter:
+          active:
+            $read: $isStoneCircularSummer
+        name: StoneCircularSummerFenceElement
+      stoneCircularWinter:
+        $filter:
+          active:
+            $read: $isStoneCircularWinter
+        name: StoneCircularWinterFenceElement
+      stoneHexagonalSummer:
+        $filter:
+          active:
+            $read: $isStoneHexagonalSummer
+        name: StoneHexagonalSummerFenceElement
+      stoneHexagonalWinter:
+        $filter:
+          active:
+            $read: $isStoneHexagonalWinter
+        name: StoneHexagonalWinterFenceElement
+
+    selectable:
+      default: {}
+
+    detail:
+      main:
+        title: Fence
+        subtitle: Click to configure
+        description: Configure the fence style
+
+    propertyPage:
+      main:
+        children:
+          - kind: propertyContainerGroup
+            props:
+              spacing: large
+            children:
+              - kind: propertyContainerItem
+                props:
+                  title: Fence Style
+                  description: Choose fence style
+                children:
+                  - kind: attributeCardSelector
+                    props:
+                      instanceName: style
+
+    attributeSelection:
+      style:
+        value:
+          $bind: style
+        options:
+          - label: Picket
+            value: picket
+            img: /images/scene-entity-object/fence-picket.svg
+          - label: Modern
+            value: modern
+            img: /images/scene-entity-object/fence-modern.svg
+          - label: Stone
+            value: stone
+            img: /images/scene-entity-object/fence-stone.svg
+
+  Garden:
+    sceneEntityObject:
+      squareSummer:
+        $filter:
+          active:
+            $read: $isSquareSummer
+        name: SquareSummerGardenElement
+      squareWinter:
+        $filter:
+          active:
+            $read: $isSquareWinter
+        name: SquareWinterGardenElement
+      circularSummer:
+        $filter:
+          active:
+            $read: $isCircularSummer
+        name: CircularSummerGardenElement
+      circularWinter:
+        $filter:
+          active:
+            $read: $isCircularWinter
+        name: CircularWinterGardenElement
+      hexagonalSummer:
+        $filter:
+          active:
+            $read: $isHexagonalSummer
+        name: HexagonalSummerGardenElement
+      hexagonalWinter:
+        $filter:
+          active:
+            $read: $isHexagonalWinter
+        name: HexagonalWinterGardenElement
+```
+
+### ./src/\_library/ClassicHouse.tsx
+
+```tsx
+export interface ClassicHouseProps {
+  readonly isWinter: boolean
+}
+
+export function ClassicHouse({ isWinter }: ClassicHouseProps) {
+  const roofColor = isWinter ? '#f5f5f5' : '#8b4513'
+  const windowColor = isWinter ? '#a8d8ea' : '#87ceeb'
+
+  return (
+    <group>
+      <mesh position={[0, 40, 0]} castShadow receiveShadow>
+        <boxGeometry args={[80, 80, 60]} />
+        <meshStandardMaterial color="#e8d4b8" />
+      </mesh>
+
+      <mesh position={[0, 95, 0]} rotation={[0, Math.PI / 4, 0]} castShadow>
+        <coneGeometry args={[70, 40, 4]} />
+        <meshStandardMaterial color={roofColor} />
+      </mesh>
+
+      <mesh position={[0, 20, 31]}>
+        <boxGeometry args={[18, 40, 2]} />
+        <meshStandardMaterial color="#5c4033" />
+      </mesh>
+      <mesh position={[0, 20, 32]}>
+        <boxGeometry args={[22, 44, 1]} />
+        <meshStandardMaterial color="#3d2817" />
+      </mesh>
+
+      <mesh position={[-25, 50, 31]}>
+        <boxGeometry args={[15, 15, 2]} />
+        <meshStandardMaterial color={windowColor} />
+      </mesh>
+      <mesh position={[-25, 50, 32]}>
+        <boxGeometry args={[18, 18, 1]} />
+        <meshStandardMaterial color="#3d2817" />
+      </mesh>
+
+      <mesh position={[25, 50, 31]}>
+        <boxGeometry args={[15, 15, 2]} />
+        <meshStandardMaterial color={windowColor} />
+      </mesh>
+      <mesh position={[25, 50, 32]}>
+        <boxGeometry args={[18, 18, 1]} />
+        <meshStandardMaterial color="#3d2817" />
+      </mesh>
+
+      <mesh position={[25, 110, -10]} castShadow>
+        <boxGeometry args={[15, 30, 15]} />
+        <meshStandardMaterial color="#8b0000" />
+      </mesh>
+
+      {isWinter && (
+        <>
+          <mesh position={[-25, 43, 32]}>
+            <boxGeometry args={[18, 2, 3]} />
+            <meshStandardMaterial color="#b8e0f0" transparent opacity={0.8} />
+          </mesh>
+          <mesh position={[25, 43, 32]}>
+            <boxGeometry args={[18, 2, 3]} />
+            <meshStandardMaterial color="#b8e0f0" transparent opacity={0.8} />
+          </mesh>
+        </>
+      )}
+    </group>
+  )
+}
+```
+
+### ./src/\_library/CottageHouse.tsx
+
+```tsx
+export interface CottageHouseProps {
+  readonly isWinter: boolean
+}
+
+export function CottageHouse({ isWinter }: CottageHouseProps) {
+  const roofColor = isWinter ? '#d4c4a8' : '#8b7355'
+  const wallColor = isWinter ? '#f0ebe0' : '#e8dcc8'
+  const windowColor = isWinter ? '#c8e0f0' : '#a8d4e8'
+  const trimColor = '#5c4033'
+
+  return (
+    <group>
+      <mesh position={[0, 30, 0]} castShadow receiveShadow>
+        <boxGeometry args={[70, 60, 55]} />
+        <meshStandardMaterial color={wallColor} />
+      </mesh>
+
+      <mesh position={[0, 0, 28]}>
+        <boxGeometry args={[74, 4, 4]} />
+        <meshStandardMaterial color={trimColor} />
+      </mesh>
+      <mesh position={[0, 60, 28]}>
+        <boxGeometry args={[74, 4, 4]} />
+        <meshStandardMaterial color={trimColor} />
+      </mesh>
+      <mesh position={[-35, 30, 28]}>
+        <boxGeometry args={[4, 60, 4]} />
+        <meshStandardMaterial color={trimColor} />
+      </mesh>
+      <mesh position={[35, 30, 28]}>
+        <boxGeometry args={[4, 60, 4]} />
+        <meshStandardMaterial color={trimColor} />
+      </mesh>
+
+      {/* Roof slopes */}
+      <mesh position={[-18, 76, 0]} rotation={[0, 0, Math.PI / 4.5]} castShadow>
+        <boxGeometry args={[42, 5, 60]} />
+        <meshStandardMaterial color={roofColor} />
+      </mesh>
+      <mesh position={[18, 76, 0]} rotation={[0, 0, -Math.PI / 4.5]} castShadow>
+        <boxGeometry args={[42, 5, 60]} />
+        <meshStandardMaterial color={roofColor} />
+      </mesh>
+
+      {/* Roof ridge */}
+      <mesh position={[0, 88, 0]} castShadow>
+        <boxGeometry args={[8, 4, 62]} />
+        <meshStandardMaterial color={trimColor} />
+      </mesh>
+
+      {/* Roof overhang/eaves */}
+      <mesh position={[0, 61, 0]} castShadow>
+        <boxGeometry args={[76, 2, 60]} />
+        <meshStandardMaterial color={trimColor} />
+      </mesh>
+
+      <mesh position={[0, 18, 28]}>
+        <boxGeometry args={[18, 36, 2]} />
+        <meshStandardMaterial color="#654321" />
+      </mesh>
+      <mesh position={[0, 18, 29]}>
+        <boxGeometry args={[22, 40, 1]} />
+        <meshStandardMaterial color={trimColor} />
+      </mesh>
+
+      <mesh position={[-22, 40, 28]}>
+        <circleGeometry args={[7, 16]} />
+        <meshStandardMaterial color={windowColor} />
+      </mesh>
+      <mesh position={[-22, 40, 28.5]}>
+        <ringGeometry args={[6, 8, 16]} />
+        <meshStandardMaterial color={trimColor} />
+      </mesh>
+      <mesh position={[22, 40, 28]}>
+        <circleGeometry args={[7, 16]} />
+        <meshStandardMaterial color={windowColor} />
+      </mesh>
+      <mesh position={[22, 40, 28.5]}>
+        <ringGeometry args={[6, 8, 16]} />
+        <meshStandardMaterial color={trimColor} />
+      </mesh>
+
+      {/* Chimney */}
+      <mesh position={[18, 78, -15]} castShadow>
+        <boxGeometry args={[10, 22, 10]} />
+        <meshStandardMaterial color="#707070" />
+      </mesh>
+      <mesh position={[18, 91, -15]} castShadow>
+        <boxGeometry args={[12, 4, 12]} />
+        <meshStandardMaterial color="#606060" />
+      </mesh>
+
+      {!isWinter && (
+        <>
+          <mesh position={[-22, 30, 30]}>
+            <boxGeometry args={[16, 4, 6]} />
+            <meshStandardMaterial color={trimColor} />
+          </mesh>
+          <mesh position={[-22, 33, 30]}>
+            <sphereGeometry args={[3, 8, 8]} />
+            <meshStandardMaterial color="#ff6b6b" />
+          </mesh>
+          <mesh position={[-18, 33, 30]}>
+            <sphereGeometry args={[2.5, 8, 8]} />
+            <meshStandardMaterial color="#ffd93d" />
+          </mesh>
+          <mesh position={[-26, 33, 30]}>
+            <sphereGeometry args={[2.5, 8, 8]} />
+            <meshStandardMaterial color="#ff6b6b" />
+          </mesh>
+
+          <mesh position={[22, 30, 30]}>
+            <boxGeometry args={[16, 4, 6]} />
+            <meshStandardMaterial color={trimColor} />
+          </mesh>
+          <mesh position={[22, 33, 30]}>
+            <sphereGeometry args={[3, 8, 8]} />
+            <meshStandardMaterial color="#c9b1ff" />
+          </mesh>
+          <mesh position={[18, 33, 30]}>
+            <sphereGeometry args={[2.5, 8, 8]} />
+            <meshStandardMaterial color="#ff6b6b" />
+          </mesh>
+          <mesh position={[26, 33, 30]}>
+            <sphereGeometry args={[2.5, 8, 8]} />
+            <meshStandardMaterial color="#ffd93d" />
+          </mesh>
+        </>
+      )}
+
+      {isWinter && (
+        <>
+          <mesh position={[-18, 78, 0]} rotation={[0, 0, Math.PI / 4.5]}>
+            <boxGeometry args={[44, 2, 62]} />
+            <meshStandardMaterial color="#ffffff" transparent opacity={0.9} />
+          </mesh>
+          <mesh position={[18, 78, 0]} rotation={[0, 0, -Math.PI / 4.5]}>
+            <boxGeometry args={[44, 2, 62]} />
+            <meshStandardMaterial color="#ffffff" transparent opacity={0.9} />
+          </mesh>
+        </>
+      )}
+    </group>
+  )
+}
+```
+
+### ./src/\_library/Fence.tsx
+
+```tsx
+type LayoutShape = 'square' | 'circular' | 'hexagonal'
+
+function generateSquarePositions(spacing: number, size: number): Array<readonly [number, number, number]> {
+  const positions: Array<readonly [number, number, number]> = []
+
+  for (let x = -size; x <= size; x += spacing) {
+    positions.push([x, 0, size] as const)
+    positions.push([x, 0, -size] as const)
+  }
+  for (let z = -size + spacing; z < size; z += spacing) {
+    positions.push([size, 0, z] as const)
+    positions.push([-size, 0, z] as const)
+  }
+
+  return positions
+}
+
+function generateCircularPositions(count: number, radius: number): Array<readonly [number, number, number]> {
+  const positions: Array<readonly [number, number, number]> = []
+
+  for (let i = 0; i < count; i++) {
+    const angle = (i / count) * Math.PI * 2
+    const x = Math.cos(angle) * radius
+    const z = Math.sin(angle) * radius
+    positions.push([x, 0, z] as const)
+  }
+
+  return positions
+}
+
+function generateHexagonalPositions(spacing: number, radius: number): Array<readonly [number, number, number]> {
+  const positions: Array<readonly [number, number, number]> = []
+  const sides = 6
+
+  for (let side = 0; side < sides; side++) {
+    const angle1 = (side / sides) * Math.PI * 2
+    const angle2 = ((side + 1) / sides) * Math.PI * 2
+
+    const x1 = Math.cos(angle1) * radius
+    const z1 = Math.sin(angle1) * radius
+    const x2 = Math.cos(angle2) * radius
+    const z2 = Math.sin(angle2) * radius
+
+    const sideLength = Math.sqrt((x2 - x1) ** 2 + (z2 - z1) ** 2)
+    const postsOnSide = Math.max(2, Math.floor(sideLength / spacing))
+
+    for (let i = 0; i < postsOnSide; i++) {
+      const t = i / postsOnSide
+      const x = x1 + (x2 - x1) * t
+      const z = z1 + (z2 - z1) * t
+      positions.push([x, 0, z] as const)
+    }
+  }
+
+  return positions
+}
+
+function getPositions(shape: LayoutShape): Array<readonly [number, number, number]> {
+  switch (shape) {
+    case 'circular':
+      return generateCircularPositions(48, 180)
+    case 'hexagonal':
+      return generateHexagonalPositions(15, 180)
+    default:
+      return generateSquarePositions(15, 180)
+  }
+}
+
+interface PicketPostProps {
+  readonly position: readonly [number, number, number]
+  readonly color: string
+  readonly isWinter: boolean
+}
+
+function PicketPost({ position, color, isWinter }: PicketPostProps) {
+  return (
+    <group position={position as [number, number, number]}>
+      <mesh position={[0, 10, 0]} castShadow>
+        <boxGeometry args={[2, 20, 2]} />
+        <meshStandardMaterial name="fenceMaterial" color={color} />
+      </mesh>
+      <mesh position={[0, 22, 0]} castShadow>
+        <coneGeometry args={[2, 4, 4]} />
+        <meshStandardMaterial name="fenceMaterial" color={color} />
+      </mesh>
+      {isWinter && (
+        <mesh position={[0, 24, 0]}>
+          <sphereGeometry args={[2.5, 8, 8]} />
+          <meshStandardMaterial color="#ffffff" />
+        </mesh>
+      )}
+    </group>
+  )
+}
+
+export interface PicketFenceProps {
+  readonly shape: LayoutShape
+  readonly isWinter: boolean
+}
+
+export function PicketFence({ shape, isWinter }: PicketFenceProps) {
+  const positions = getPositions(shape)
+  const fenceColor = isWinter ? '#e8e0d8' : '#deb887'
+
+  return (
+    <group>
+      {positions.map((pos, i) => (
+        <PicketPost key={i} position={pos} color={fenceColor} isWinter={isWinter} />
+      ))}
+    </group>
+  )
+}
+
+interface ModernPostProps {
+  readonly position: readonly [number, number, number]
+  readonly isWinter: boolean
+}
+
+function ModernPost({ position, isWinter }: ModernPostProps) {
+  const [x, , z] = position
+  const angle = Math.atan2(z, x)
+
+  return (
+    <group position={position as [number, number, number]} rotation={[0, -angle + Math.PI / 2, 0]}>
+      <mesh position={[0, 12, 0]} castShadow>
+        <boxGeometry args={[3, 24, 3]} />
+        <meshStandardMaterial
+          name="fenceMaterial"
+          color={isWinter ? '#b0b0b0' : '#404040'}
+          metalness={0.8}
+          roughness={0.2}
+        />
+      </mesh>
+      <mesh position={[0, 8, 0]} castShadow>
+        <boxGeometry args={[12, 16, 0.5]} />
+        <meshStandardMaterial
+          name="fenceMaterial"
+          color={isWinter ? '#c0c0c0' : '#606060'}
+          metalness={0.6}
+          roughness={0.3}
+        />
+      </mesh>
+    </group>
+  )
+}
+
+export interface ModernFenceProps {
+  readonly shape: LayoutShape
+  readonly isWinter: boolean
+}
+
+export function ModernFence({ shape, isWinter }: ModernFenceProps) {
+  const positions = getPositions(shape)
+
+  return (
+    <group>
+      {positions.map((pos, i) => (
+        <ModernPost key={i} position={pos} isWinter={isWinter} />
+      ))}
+    </group>
+  )
+}
+
+interface StonePostProps {
+  readonly position: readonly [number, number, number]
+  readonly isWinter: boolean
+}
+
+function StonePost({ position, isWinter }: StonePostProps) {
+  return (
+    <group position={position as [number, number, number]}>
+      <mesh position={[0, 6, 0]} castShadow>
+        <boxGeometry args={[8, 12, 8]} />
+        <meshStandardMaterial name="fenceMaterial" color={isWinter ? '#d0d0d0' : '#808080'} roughness={0.9} />
+      </mesh>
+      <mesh position={[0, 14, 0]} castShadow>
+        <boxGeometry args={[6, 4, 6]} />
+        <meshStandardMaterial name="fenceMaterial" color={isWinter ? '#e0e0e0' : '#909090'} roughness={0.9} />
+      </mesh>
+      {isWinter && (
+        <mesh position={[0, 17, 0]}>
+          <boxGeometry args={[7, 2, 7]} />
+          <meshStandardMaterial color="#ffffff" />
+        </mesh>
+      )}
+    </group>
+  )
+}
+
+export interface StoneFenceProps {
+  readonly shape: LayoutShape
+  readonly isWinter: boolean
+}
+
+export function StoneFence({ shape, isWinter }: StoneFenceProps) {
+  const positions = getPositions(shape)
+
+  return (
+    <group>
+      {positions.map((pos, i) => (
+        <StonePost key={i} position={pos} isWinter={isWinter} />
+      ))}
+    </group>
+  )
+}
+```
+
+### ./src/\_library/Garden.tsx
+
+```tsx
+import { useMemo } from 'react'
+
+interface FlowerData {
+  readonly pos: readonly [number, number, number]
+  readonly color: string
+}
+
+function generateSquareFlowers(): FlowerData[] {
+  const flowerPositions: FlowerData[] = []
+  const colors = ['#ff69b4', '#ff6347', '#ffd700', '#ff4500', '#da70d6', '#ffffff']
+
+  for (let i = 0; i < 60; i++) {
+    const x = (Math.random() - 0.5) * 350
+    const z = (Math.random() - 0.5) * 350
+
+    const distFromCenter = Math.sqrt(x * x + z * z)
+    if (distFromCenter < 60) continue
+    if (Math.abs(x) >= 170 || Math.abs(z) >= 170) continue
+
+    flowerPositions.push({
+      pos: [x, 3, z] as const,
+      color: colors[Math.floor(Math.random() * colors.length)] ?? '#ff69b4',
+    })
+  }
+  return flowerPositions
+}
+
+function generateCircularFlowers(): FlowerData[] {
+  const flowerPositions: FlowerData[] = []
+  const colors = ['#ff69b4', '#ff6347', '#ffd700', '#ff4500', '#da70d6', '#ffffff']
+
+  for (let i = 0; i < 60; i++) {
+    const x = (Math.random() - 0.5) * 350
+    const z = (Math.random() - 0.5) * 350
+
+    const distFromCenter = Math.sqrt(x * x + z * z)
+    if (distFromCenter < 60) continue
+    if (distFromCenter >= 170) continue
+
+    flowerPositions.push({
+      pos: [x, 3, z] as const,
+      color: colors[Math.floor(Math.random() * colors.length)] ?? '#ff69b4',
+    })
+  }
+  return flowerPositions
+}
+
+function generateHexagonalFlowers(): FlowerData[] {
+  const flowerPositions: FlowerData[] = []
+  const colors = ['#ff69b4', '#ff6347', '#ffd700', '#ff4500', '#da70d6', '#ffffff']
+
+  for (let i = 0; i < 60; i++) {
+    const x = (Math.random() - 0.5) * 350
+    const z = (Math.random() - 0.5) * 350
+
+    const distFromCenter = Math.sqrt(x * x + z * z)
+    if (distFromCenter < 60) continue
+
+    const angle = Math.atan2(z, x)
+    const sides = 6
+    const sectorAngle = (Math.PI * 2) / sides
+    const localAngle = ((angle % sectorAngle) + sectorAngle) % sectorAngle
+    const maxRadius = 170 / Math.cos(localAngle - sectorAngle / 2)
+    if (distFromCenter >= maxRadius) continue
+
+    flowerPositions.push({
+      pos: [x, 3, z] as const,
+      color: colors[Math.floor(Math.random() * colors.length)] ?? '#ff69b4',
+    })
+  }
+  return flowerPositions
+}
+
+function Snowman({ position }: { readonly position: readonly [number, number, number] }) {
+  return (
+    <group position={position as [number, number, number]}>
+      <mesh position={[0, 4, 0]} castShadow>
+        <sphereGeometry args={[15, 16, 16]} />
+        <meshStandardMaterial color="#ffffff" />
+      </mesh>
+      <mesh position={[0, 22, 0]} castShadow>
+        <sphereGeometry args={[10, 16, 16]} />
+        <meshStandardMaterial color="#ffffff" />
+      </mesh>
+      <mesh position={[0, 35, 0]} castShadow>
+        <sphereGeometry args={[7, 16, 16]} />
+        <meshStandardMaterial color="#ffffff" />
+      </mesh>
+      <mesh position={[-2, 35, 4]}>
+        <sphereGeometry args={[1, 8, 8]} />
+        <meshStandardMaterial color="#1a1a1a" />
+      </mesh>
+      <mesh position={[2, 35, 4]}>
+        <sphereGeometry args={[1, 8, 8]} />
+        <meshStandardMaterial color="#1a1a1a" />
+      </mesh>
+      <mesh position={[0, 33, 6]} rotation={[Math.PI / 2, 0, 0]}>
+        <coneGeometry args={[2, 8, 8]} />
+        <meshStandardMaterial color="#ff6600" />
+      </mesh>
+    </group>
+  )
+}
+
+export interface GardenProps {
+  readonly isWinter: boolean
+  readonly groundColor: string
+  readonly pathColor: string
+  readonly bushColor: string
+  readonly bushColor2: string
+}
+
+export interface SquareGardenProps extends GardenProps {}
+
+export function SquareGarden({ isWinter, groundColor, pathColor, bushColor, bushColor2 }: SquareGardenProps) {
+  const flowers = useMemo(() => generateSquareFlowers(), [])
+
+  return (
+    <group>
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.1, 0]} receiveShadow>
+        <planeGeometry args={[360, 360]} />
+        <meshStandardMaterial color={groundColor} />
+      </mesh>
+
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.5, 80]} receiveShadow>
+        <planeGeometry args={[25, 100]} />
+        <meshStandardMaterial color={pathColor} />
+      </mesh>
+
+      {!isWinter &&
+        flowers.map((flower, i) => (
+          <group key={i} position={flower.pos as [number, number, number]}>
+            <mesh position={[0, 2, 0]}>
+              <sphereGeometry args={[2, 8, 8]} />
+              <meshStandardMaterial color={flower.color} />
+            </mesh>
+            <mesh position={[0, 0, 0]}>
+              <cylinderGeometry args={[0.3, 0.3, 4, 6]} />
+              <meshStandardMaterial color="#228b22" />
+            </mesh>
+          </group>
+        ))}
+
+      {isWinter && <Snowman position={[80, 0, 80]} />}
+
+      <mesh position={[-50, 8, 25]} castShadow>
+        <sphereGeometry args={[12, 8, 8]} />
+        <meshStandardMaterial color={bushColor} />
+      </mesh>
+      <mesh position={[50, 8, 25]} castShadow>
+        <sphereGeometry args={[12, 8, 8]} />
+        <meshStandardMaterial color={bushColor} />
+      </mesh>
+      <mesh position={[-55, 6, 10]} castShadow>
+        <sphereGeometry args={[8, 8, 8]} />
+        <meshStandardMaterial color={bushColor2} />
+      </mesh>
+      <mesh position={[55, 6, 10]} castShadow>
+        <sphereGeometry args={[8, 8, 8]} />
+        <meshStandardMaterial color={bushColor2} />
+      </mesh>
+    </group>
+  )
+}
+
+export interface CircularGardenProps extends GardenProps {}
+
+export function CircularGarden({ isWinter, groundColor, pathColor, bushColor, bushColor2 }: CircularGardenProps) {
+  const flowers = useMemo(() => generateCircularFlowers(), [])
+
+  return (
+    <group>
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.1, 0]} receiveShadow>
+        <circleGeometry args={[180, 64]} />
+        <meshStandardMaterial color={groundColor} />
+      </mesh>
+
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.5, 80]} receiveShadow>
+        <planeGeometry args={[25, 100]} />
+        <meshStandardMaterial color={pathColor} />
+      </mesh>
+
+      {!isWinter &&
+        flowers.map((flower, i) => (
+          <group key={i} position={flower.pos as [number, number, number]}>
+            <mesh position={[0, 2, 0]}>
+              <sphereGeometry args={[2, 8, 8]} />
+              <meshStandardMaterial color={flower.color} />
+            </mesh>
+            <mesh position={[0, 0, 0]}>
+              <cylinderGeometry args={[0.3, 0.3, 4, 6]} />
+              <meshStandardMaterial color="#228b22" />
+            </mesh>
+          </group>
+        ))}
+
+      {isWinter && <Snowman position={[80, 0, 80]} />}
+
+      <mesh position={[-50, 8, 25]} castShadow>
+        <sphereGeometry args={[12, 8, 8]} />
+        <meshStandardMaterial color={bushColor} />
+      </mesh>
+      <mesh position={[50, 8, 25]} castShadow>
+        <sphereGeometry args={[12, 8, 8]} />
+        <meshStandardMaterial color={bushColor} />
+      </mesh>
+      <mesh position={[-55, 6, 10]} castShadow>
+        <sphereGeometry args={[8, 8, 8]} />
+        <meshStandardMaterial color={bushColor2} />
+      </mesh>
+      <mesh position={[55, 6, 10]} castShadow>
+        <sphereGeometry args={[8, 8, 8]} />
+        <meshStandardMaterial color={bushColor2} />
+      </mesh>
+    </group>
+  )
+}
+
+export interface HexagonalGardenProps extends GardenProps {}
+
+export function HexagonalGarden({ isWinter, groundColor, pathColor, bushColor, bushColor2 }: HexagonalGardenProps) {
+  const flowers = useMemo(() => generateHexagonalFlowers(), [])
+
+  return (
+    <group>
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.1, 0]} receiveShadow>
+        <circleGeometry args={[180, 6]} />
+        <meshStandardMaterial color={groundColor} />
+      </mesh>
+
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0.5, 80]} receiveShadow>
+        <planeGeometry args={[25, 100]} />
+        <meshStandardMaterial color={pathColor} />
+      </mesh>
+
+      {!isWinter &&
+        flowers.map((flower, i) => (
+          <group key={i} position={flower.pos as [number, number, number]}>
+            <mesh position={[0, 2, 0]}>
+              <sphereGeometry args={[2, 8, 8]} />
+              <meshStandardMaterial color={flower.color} />
+            </mesh>
+            <mesh position={[0, 0, 0]}>
+              <cylinderGeometry args={[0.3, 0.3, 4, 6]} />
+              <meshStandardMaterial color="#228b22" />
+            </mesh>
+          </group>
+        ))}
+
+      {isWinter && <Snowman position={[80, 0, 80]} />}
+
+      <mesh position={[-50, 8, 25]} castShadow>
+        <sphereGeometry args={[12, 8, 8]} />
+        <meshStandardMaterial color={bushColor} />
+      </mesh>
+      <mesh position={[50, 8, 25]} castShadow>
+        <sphereGeometry args={[12, 8, 8]} />
+        <meshStandardMaterial color={bushColor} />
+      </mesh>
+      <mesh position={[-55, 6, 10]} castShadow>
+        <sphereGeometry args={[8, 8, 8]} />
+        <meshStandardMaterial color={bushColor2} />
+      </mesh>
+      <mesh position={[55, 6, 10]} castShadow>
+        <sphereGeometry args={[8, 8, 8]} />
+        <meshStandardMaterial color={bushColor2} />
+      </mesh>
+    </group>
+  )
+}
+```
+
+### ./src/\_library/ModernHouse.tsx
+
+```tsx
+export interface ModernHouseProps {
+  readonly isWinter: boolean
+}
+
+export function ModernHouse({ isWinter }: ModernHouseProps) {
+  const roofColor = isWinter ? '#e8e8e8' : '#404040'
+  const windowColor = isWinter ? '#a8d8ea' : '#87ceeb'
+
+  return (
+    <group>
+      <mesh position={[0, 30, 0]} castShadow receiveShadow>
+        <boxGeometry args={[100, 60, 70]} />
+        <meshStandardMaterial color="#f0f0f0" />
+      </mesh>
+
+      <mesh position={[0, 65, 0]} castShadow>
+        <boxGeometry args={[110, 10, 80]} />
+        <meshStandardMaterial color={roofColor} />
+      </mesh>
+
+      <mesh position={[0, 20, 36]}>
+        <boxGeometry args={[30, 40, 2]} />
+        <meshStandardMaterial color={windowColor} transparent opacity={0.8} />
+      </mesh>
+
+      <mesh position={[-30, 35, 36]}>
+        <boxGeometry args={[20, 30, 2]} />
+        <meshStandardMaterial color={windowColor} transparent opacity={0.8} />
+      </mesh>
+
+      <mesh position={[30, 35, 36]}>
+        <boxGeometry args={[20, 30, 2]} />
+        <meshStandardMaterial color={windowColor} transparent opacity={0.8} />
+      </mesh>
+
+      <mesh position={[-45, 65, 25]} castShadow>
+        <boxGeometry args={[8, 20, 8]} />
+        <meshStandardMaterial color="#606060" />
+      </mesh>
+    </group>
+  )
+}
+```
+
+### ./src/\_library/Tree.tsx
+
+```tsx
+import { Float } from '@react-three/drei'
+
+export interface TreeProps {
+  readonly isWinter: boolean
+  readonly foliageColors: readonly string[]
+  readonly scale: number
+}
+
+export function Tree({ isWinter, foliageColors, scale }: TreeProps) {
+  return (
+    <Float speed={isWinter ? 0.5 : 1} rotationIntensity={0.1} floatIntensity={isWinter ? 0.1 : 0.3}>
+      <group scale={scale}>
+        <mesh position={[0, 25, 0]} castShadow>
+          <cylinderGeometry args={[4, 6, 50, 8]} />
+          <meshStandardMaterial color="#5c4033" />
+        </mesh>
+
+        <mesh position={[0, 60, 0]} castShadow>
+          <coneGeometry args={[25, 40, 8]} />
+          <meshStandardMaterial color={foliageColors[0]} />
+        </mesh>
+        <mesh position={[0, 85, 0]} castShadow>
+          <coneGeometry args={[20, 35, 8]} />
+          <meshStandardMaterial color={foliageColors[1]} />
+        </mesh>
+        <mesh position={[0, 105, 0]} castShadow>
+          <coneGeometry args={[14, 30, 8]} />
+          <meshStandardMaterial color={foliageColors[2]} />
+        </mesh>
+      </group>
+    </Float>
+  )
+}
+```
+
+### ./src/elements/CanvasEnvironment.tsx
+
+```tsx
+import { Environment, Sky } from '@react-three/drei'
+import { useFrame } from '@react-three/fiber'
+import { useMemo, useRef } from 'react'
+import * as THREE from 'three'
+
+import { phx } from '../../.phoenix/phx.js'
+
+function Snowflakes() {
+  const particlesRef = useRef<THREE.InstancedMesh>(null)
+  const particleCount = 100
+
+  const particles = useMemo(() => {
+    return Array.from({ length: particleCount }, () => ({
+      x: (Math.random() - 0.5) * 400,
+      z: (Math.random() - 0.5) * 400,
+      offset: Math.random() * 200,
+      speed: 20 + Math.random() * 30,
+      wobbleSpeed: 1 + Math.random() * 2,
+      wobbleAmount: 5 + Math.random() * 10,
+    }))
+  }, [])
+
+  const dummy = useMemo(() => new THREE.Object3D(), [])
+
+  useFrame(state => {
+    if (!particlesRef.current) return
+
+    const time = state.clock.elapsedTime
+
+    particles.forEach((particle, i) => {
+      const y = (particle.offset + 200 - ((time * particle.speed) % 200)) % 200
+      const wobbleX = Math.sin(time * particle.wobbleSpeed) * particle.wobbleAmount
+      const wobbleZ = Math.cos(time * particle.wobbleSpeed * 0.7) * particle.wobbleAmount
+
+      dummy.position.set(particle.x + wobbleX, y, particle.z + wobbleZ)
+      dummy.scale.setScalar(1.5)
+      dummy.updateMatrix()
+      particlesRef.current!.setMatrixAt(i, dummy.matrix)
+    })
+
+    particlesRef.current.instanceMatrix.needsUpdate = true
+  })
+
+  return (
+    <instancedMesh ref={particlesRef} args={[undefined, undefined, particleCount]}>
+      <sphereGeometry args={[1, 6, 6]} />
+      <meshStandardMaterial color="#ffffff" />
+    </instancedMesh>
+  )
+}
+
+interface SmokePosition {
+  readonly x: number
+  readonly y: number
+  readonly z: number
+}
+
+function Smoke({ isWinter, position }: { readonly isWinter: boolean; readonly position: SmokePosition }) {
+  const particlesRef = useRef<THREE.InstancedMesh>(null)
+  const particleCount = isWinter ? 30 : 20
+
+  const particles = useMemo(() => {
+    return Array.from({ length: particleCount }, (_, i) => ({
+      offset: Math.random() * Math.PI * 2,
+      speed: 0.3 + Math.random() * 0.3,
+      xWobble: (Math.random() - 0.5) * 0.5,
+      zWobble: (Math.random() - 0.5) * 0.5,
+      baseY: i * 5,
+    }))
+  }, [particleCount])
+
+  const dummy = useMemo(() => new THREE.Object3D(), [])
+
+  useFrame(state => {
+    if (!particlesRef.current) return
+
+    const time = state.clock.elapsedTime
+
+    particles.forEach((particle, i) => {
+      const cyclePosition = (time * particle.speed + particle.offset) % 1
+      const y = particle.baseY + cyclePosition * (isWinter ? 100 : 80)
+      const scale = 1 - cyclePosition * 0.7
+      const wobbleX = Math.sin(time * 2 + particle.offset) * particle.xWobble * 10
+      const wobbleZ = Math.cos(time * 2 + particle.offset) * particle.zWobble * 10
+
+      dummy.position.set(position.x + wobbleX, position.y + y, position.z + wobbleZ)
+      dummy.scale.setScalar(scale * (isWinter ? 8 : 6))
+      dummy.updateMatrix()
+      particlesRef.current!.setMatrixAt(i, dummy.matrix)
+    })
+
+    particlesRef.current.instanceMatrix.needsUpdate = true
+  })
+
+  return (
+    <instancedMesh ref={particlesRef} args={[undefined, undefined, particleCount]}>
+      <sphereGeometry args={[1, 8, 8]} />
+      <meshStandardMaterial color={isWinter ? '#e8e8e8' : '#d3d3d3'} transparent opacity={isWinter ? 0.8 : 0.6} />
+    </instancedMesh>
+  )
+}
+
+export default phx.frontend.createCustomPhoenixLayoutElement('CanvasEnvironment', () => {
+  const rootEntity = phx.frontend.useRootEntityState()
+  const isWinter = rootEntity?.isWinter ?? false
+  const smokePosition = (rootEntity?.$house as { $smokePosition?: SmokePosition })?.$smokePosition ?? {
+    x: 25,
+    y: 125,
+    z: -10,
+  }
+
+  return (
+    <>
+      <Smoke isWinter={isWinter} position={smokePosition} />
+      {isWinter && <Snowflakes />}
+
+      <Sky
+        distance={45000}
+        sunPosition={isWinter ? [100, 20, 100] : [100, 50, 100]}
+        inclination={isWinter ? 0.48 : 0.52}
+        azimuth={0.25}
+        rayleigh={isWinter ? 0.5 : 2}
+      />
+
+      <ambientLight intensity={isWinter ? 0.6 : 0.4} color={isWinter ? '#e8f4ff' : '#ffffff'} />
+
+      <directionalLight
+        position={[150, 200, 100]}
+        intensity={isWinter ? 0.8 : 1.2}
+        color={isWinter ? '#f0f8ff' : '#fff5e6'}
+        castShadow
+        shadow-mapSize-width={2048}
+        shadow-mapSize-height={2048}
+        shadow-camera-far={600}
+        shadow-camera-left={-250}
+        shadow-camera-right={250}
+        shadow-camera-top={250}
+        shadow-camera-bottom={-250}
+        shadow-bias={-0.0001}
+      />
+
+      <directionalLight
+        position={[-100, 100, -100]}
+        intensity={isWinter ? 0.3 : 0.4}
+        color={isWinter ? '#c8d8e8' : '#ffe4c4'}
+      />
+
+      <Environment preset={isWinter ? 'dawn' : 'park'} />
+
+      <fog attach="fog" args={[isWinter ? '#e8f0f8' : '#c8e8c8', 700, 1300]} />
+
+      <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -1, 0]} receiveShadow>
+        <planeGeometry args={[10000, 10000]} />
+        <meshStandardMaterial color={isWinter ? '#e8e8e8' : '#90c090'} />
+      </mesh>
+    </>
+  )
+})
+```
+
+### ./src/elements/CircularSummerGardenElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { CircularGarden } from '../_library/Garden.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('CircularSummerGardenElement', () => (
+  <CircularGarden isWinter={false} groundColor="#3cb371" pathColor="#d2b48c" bushColor="#2e8b57" bushColor2="#3cb371" />
+))
+```
+
+### ./src/elements/CircularWinterGardenElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { CircularGarden } from '../_library/Garden.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('CircularWinterGardenElement', () => (
+  <CircularGarden isWinter={true} groundColor="#f5f5f5" pathColor="#c4b8a8" bushColor="#f0f0f0" bushColor2="#e8e8e8" />
+))
+```
+
+### ./src/elements/ClassicSummerHouseElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { ClassicHouse } from '../_library/ClassicHouse.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('ClassicSummerHouseElement', () => (
+  <ClassicHouse isWinter={false} />
+))
+```
+
+### ./src/elements/ClassicWinterHouseElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { ClassicHouse } from '../_library/ClassicHouse.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('ClassicWinterHouseElement', () => (
+  <ClassicHouse isWinter={true} />
+))
+```
+
+### ./src/elements/CottageSummerHouseElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { CottageHouse } from '../_library/CottageHouse.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('CottageSummerHouseElement', () => (
+  <CottageHouse isWinter={false} />
+))
+```
+
+### ./src/elements/CottageWinterHouseElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { CottageHouse } from '../_library/CottageHouse.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('CottageWinterHouseElement', () => (
+  <CottageHouse isWinter={true} />
+))
+```
+
+### ./src/elements/HexagonalSummerGardenElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { HexagonalGarden } from '../_library/Garden.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('HexagonalSummerGardenElement', () => (
+  <HexagonalGarden
+    isWinter={false}
+    groundColor="#3cb371"
+    pathColor="#d2b48c"
+    bushColor="#2e8b57"
+    bushColor2="#3cb371"
+  />
+))
+```
+
+### ./src/elements/HexagonalWinterGardenElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { HexagonalGarden } from '../_library/Garden.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('HexagonalWinterGardenElement', () => (
+  <HexagonalGarden isWinter={true} groundColor="#f5f5f5" pathColor="#c4b8a8" bushColor="#f0f0f0" bushColor2="#e8e8e8" />
+))
+```
+
+### ./src/elements/LargeSummerTreeElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { Tree } from '../_library/Tree.js'
+
+const SUMMER_FOLIAGE = ['#228b22', '#2e8b2e', '#32cd32']
+
+export default phx.frontend.createCustomPhoenixEntityElement('LargeSummerTreeElement', () => (
+  <Tree isWinter={false} foliageColors={SUMMER_FOLIAGE} scale={1.1} />
+))
+```
+
+### ./src/elements/LargeWinterTreeElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { Tree } from '../_library/Tree.js'
+
+const WINTER_FOLIAGE = ['#f0f0f0', '#e8e8e8', '#ffffff']
+
+export default phx.frontend.createCustomPhoenixEntityElement('LargeWinterTreeElement', () => (
+  <Tree isWinter={true} foliageColors={WINTER_FOLIAGE} scale={1.1} />
+))
+```
+
+### ./src/elements/MediumSummerTreeElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { Tree } from '../_library/Tree.js'
+
+const SUMMER_FOLIAGE = ['#228b22', '#2e8b2e', '#32cd32']
+
+export default phx.frontend.createCustomPhoenixEntityElement('MediumSummerTreeElement', () => (
+  <Tree isWinter={false} foliageColors={SUMMER_FOLIAGE} scale={0.85} />
+))
+```
+
+### ./src/elements/MediumWinterTreeElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { Tree } from '../_library/Tree.js'
+
+const WINTER_FOLIAGE = ['#f0f0f0', '#e8e8e8', '#ffffff']
+
+export default phx.frontend.createCustomPhoenixEntityElement('MediumWinterTreeElement', () => (
+  <Tree isWinter={true} foliageColors={WINTER_FOLIAGE} scale={0.85} />
+))
+```
+
+### ./src/elements/ModernCircularSummerFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { ModernFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('ModernCircularSummerFenceElement', () => (
+  <ModernFence shape="circular" isWinter={false} />
+))
+```
+
+### ./src/elements/ModernCircularWinterFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { ModernFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('ModernCircularWinterFenceElement', () => (
+  <ModernFence shape="circular" isWinter={true} />
+))
+```
+
+### ./src/elements/ModernHexagonalSummerFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { ModernFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('ModernHexagonalSummerFenceElement', () => (
+  <ModernFence shape="hexagonal" isWinter={false} />
+))
+```
+
+### ./src/elements/ModernHexagonalWinterFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { ModernFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('ModernHexagonalWinterFenceElement', () => (
+  <ModernFence shape="hexagonal" isWinter={true} />
+))
+```
+
+### ./src/elements/ModernSquareSummerFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { ModernFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('ModernSquareSummerFenceElement', () => (
+  <ModernFence shape="square" isWinter={false} />
+))
+```
+
+### ./src/elements/ModernSquareWinterFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { ModernFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('ModernSquareWinterFenceElement', () => (
+  <ModernFence shape="square" isWinter={true} />
+))
+```
+
+### ./src/elements/ModernSummerHouseElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { ModernHouse } from '../_library/ModernHouse.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('ModernSummerHouseElement', () => (
+  <ModernHouse isWinter={false} />
+))
+```
+
+### ./src/elements/ModernWinterHouseElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { ModernHouse } from '../_library/ModernHouse.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('ModernWinterHouseElement', () => (
+  <ModernHouse isWinter={true} />
+))
+```
+
+### ./src/elements/PicketCircularSummerFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { PicketFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('PicketCircularSummerFenceElement', () => (
+  <PicketFence shape="circular" isWinter={false} />
+))
+```
+
+### ./src/elements/PicketCircularWinterFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { PicketFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('PicketCircularWinterFenceElement', () => (
+  <PicketFence shape="circular" isWinter={true} />
+))
+```
+
+### ./src/elements/PicketHexagonalSummerFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { PicketFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('PicketHexagonalSummerFenceElement', () => (
+  <PicketFence shape="hexagonal" isWinter={false} />
+))
+```
+
+### ./src/elements/PicketHexagonalWinterFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { PicketFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('PicketHexagonalWinterFenceElement', () => (
+  <PicketFence shape="hexagonal" isWinter={true} />
+))
+```
+
+### ./src/elements/PicketSquareSummerFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { PicketFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('PicketSquareSummerFenceElement', () => (
+  <PicketFence shape="square" isWinter={false} />
+))
+```
+
+### ./src/elements/PicketSquareWinterFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { PicketFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('PicketSquareWinterFenceElement', () => (
+  <PicketFence shape="square" isWinter={true} />
+))
+```
+
+### ./src/elements/SmallSummerTreeElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { Tree } from '../_library/Tree.js'
+
+const SUMMER_FOLIAGE = ['#228b22', '#2e8b2e', '#32cd32']
+
+export default phx.frontend.createCustomPhoenixEntityElement('SmallSummerTreeElement', () => (
+  <Tree isWinter={false} foliageColors={SUMMER_FOLIAGE} scale={0.6} />
+))
+```
+
+### ./src/elements/SmallWinterTreeElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { Tree } from '../_library/Tree.js'
+
+const WINTER_FOLIAGE = ['#f0f0f0', '#e8e8e8', '#ffffff']
+
+export default phx.frontend.createCustomPhoenixEntityElement('SmallWinterTreeElement', () => (
+  <Tree isWinter={true} foliageColors={WINTER_FOLIAGE} scale={0.6} />
+))
+```
+
+### ./src/elements/SquareSummerGardenElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { SquareGarden } from '../_library/Garden.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('SquareSummerGardenElement', () => (
+  <SquareGarden isWinter={false} groundColor="#3cb371" pathColor="#d2b48c" bushColor="#2e8b57" bushColor2="#3cb371" />
+))
+```
+
+### ./src/elements/SquareWinterGardenElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { SquareGarden } from '../_library/Garden.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('SquareWinterGardenElement', () => (
+  <SquareGarden isWinter={true} groundColor="#f5f5f5" pathColor="#c4b8a8" bushColor="#f0f0f0" bushColor2="#e8e8e8" />
+))
+```
+
+### ./src/elements/StoneCircularSummerFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { StoneFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('StoneCircularSummerFenceElement', () => (
+  <StoneFence shape="circular" isWinter={false} />
+))
+```
+
+### ./src/elements/StoneCircularWinterFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { StoneFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('StoneCircularWinterFenceElement', () => (
+  <StoneFence shape="circular" isWinter={true} />
+))
+```
+
+### ./src/elements/StoneHexagonalSummerFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { StoneFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('StoneHexagonalSummerFenceElement', () => (
+  <StoneFence shape="hexagonal" isWinter={false} />
+))
+```
+
+### ./src/elements/StoneHexagonalWinterFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { StoneFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('StoneHexagonalWinterFenceElement', () => (
+  <StoneFence shape="hexagonal" isWinter={true} />
+))
+```
+
+### ./src/elements/StoneSquareSummerFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { StoneFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('StoneSquareSummerFenceElement', () => (
+  <StoneFence shape="square" isWinter={false} />
+))
+```
+
+### ./src/elements/StoneSquareWinterFenceElement.tsx
+
+```tsx
+import { phx } from '../../.phoenix/phx.js'
+import { StoneFence } from '../_library/Fence.js'
+
+export default phx.frontend.createCustomPhoenixEntityElement('StoneSquareWinterFenceElement', () => (
+  <StoneFence shape="square" isWinter={true} />
+))
+```
+
+### ./src/expressions/house.ts
+
+```ts
+import { match } from 'ts-pattern'
+
+import { phx } from '../../.phoenix/phx.js'
+
+const SMOKE_POSITIONS = {
+  classic: { x: 25, y: 125, z: -10 },
+  modern: { x: -45, y: 85, z: 25 },
+  cottage: { x: 18, y: 95, z: -15 },
+} as const
+
+const FENCE_COLORS = {
+  Natural: '#deb887',
+  White: '#f5f5f5',
+  Brown: '#8b4513',
+  Gray: '#708090',
+} as const
+
+export default phx.domain.implementCustomExpressions({
+  Scene: {
+    $fenceColorSwatches: () => ({
+      Natural: { color: FENCE_COLORS.Natural, swatchName: 'Natural' },
+      White: { color: FENCE_COLORS.White, swatchName: 'White' },
+      Brown: { color: FENCE_COLORS.Brown, swatchName: 'Brown' },
+      Gray: { color: FENCE_COLORS.Gray, swatchName: 'Gray' },
+    }),
+    $fenceColorHex: s => FENCE_COLORS[s.fenceColor as keyof typeof FENCE_COLORS] ?? FENCE_COLORS.Natural,
+  },
+  House: {
+    $isClassicSummer: s => s.style === 'classic' && !s.$scene.isWinter,
+    $isClassicWinter: s => s.style === 'classic' && s.$scene.isWinter,
+    $isModernSummer: s => s.style === 'modern' && !s.$scene.isWinter,
+    $isModernWinter: s => s.style === 'modern' && s.$scene.isWinter,
+    $isCottageSummer: s => s.style === 'cottage' && !s.$scene.isWinter,
+    $isCottageWinter: s => s.style === 'cottage' && s.$scene.isWinter,
+    $smokePosition: s =>
+      match(s.style)
+        .with('classic', () => SMOKE_POSITIONS.classic)
+        .with('modern', () => SMOKE_POSITIONS.modern)
+        .with('cottage', () => SMOKE_POSITIONS.cottage)
+        .exhaustive(),
+  },
+  Tree: {
+    $isSmallSummer: s => s.size === 'small' && !s.$scene.isWinter,
+    $isSmallWinter: s => s.size === 'small' && s.$scene.isWinter,
+    $isMediumSummer: s => s.size === 'medium' && !s.$scene.isWinter,
+    $isMediumWinter: s => s.size === 'medium' && s.$scene.isWinter,
+    $isLargeSummer: s => s.size === 'large' && !s.$scene.isWinter,
+    $isLargeWinter: s => s.size === 'large' && s.$scene.isWinter,
+  },
+  Fence: {
+    $isPicketSquareSummer: s => s.style === 'picket' && s.$scene.gardenShape === 'square' && !s.$scene.isWinter,
+    $isPicketSquareWinter: s => s.style === 'picket' && s.$scene.gardenShape === 'square' && s.$scene.isWinter,
+    $isPicketCircularSummer: s => s.style === 'picket' && s.$scene.gardenShape === 'circular' && !s.$scene.isWinter,
+    $isPicketCircularWinter: s => s.style === 'picket' && s.$scene.gardenShape === 'circular' && s.$scene.isWinter,
+    $isPicketHexagonalSummer: s => s.style === 'picket' && s.$scene.gardenShape === 'hexagonal' && !s.$scene.isWinter,
+    $isPicketHexagonalWinter: s => s.style === 'picket' && s.$scene.gardenShape === 'hexagonal' && s.$scene.isWinter,
+    $isModernSquareSummer: s => s.style === 'modern' && s.$scene.gardenShape === 'square' && !s.$scene.isWinter,
+    $isModernSquareWinter: s => s.style === 'modern' && s.$scene.gardenShape === 'square' && s.$scene.isWinter,
+    $isModernCircularSummer: s => s.style === 'modern' && s.$scene.gardenShape === 'circular' && !s.$scene.isWinter,
+    $isModernCircularWinter: s => s.style === 'modern' && s.$scene.gardenShape === 'circular' && s.$scene.isWinter,
+    $isModernHexagonalSummer: s => s.style === 'modern' && s.$scene.gardenShape === 'hexagonal' && !s.$scene.isWinter,
+    $isModernHexagonalWinter: s => s.style === 'modern' && s.$scene.gardenShape === 'hexagonal' && s.$scene.isWinter,
+    $isStoneSquareSummer: s => s.style === 'stone' && s.$scene.gardenShape === 'square' && !s.$scene.isWinter,
+    $isStoneSquareWinter: s => s.style === 'stone' && s.$scene.gardenShape === 'square' && s.$scene.isWinter,
+    $isStoneCircularSummer: s => s.style === 'stone' && s.$scene.gardenShape === 'circular' && !s.$scene.isWinter,
+    $isStoneCircularWinter: s => s.style === 'stone' && s.$scene.gardenShape === 'circular' && s.$scene.isWinter,
+    $isStoneHexagonalSummer: s => s.style === 'stone' && s.$scene.gardenShape === 'hexagonal' && !s.$scene.isWinter,
+    $isStoneHexagonalWinter: s => s.style === 'stone' && s.$scene.gardenShape === 'hexagonal' && s.$scene.isWinter,
+  },
+  Garden: {
+    $isSquareSummer: s => s.$scene.gardenShape === 'square' && !s.$scene.isWinter,
+    $isSquareWinter: s => s.$scene.gardenShape === 'square' && s.$scene.isWinter,
+    $isCircularSummer: s => s.$scene.gardenShape === 'circular' && !s.$scene.isWinter,
+    $isCircularWinter: s => s.$scene.gardenShape === 'circular' && s.$scene.isWinter,
+    $isHexagonalSummer: s => s.$scene.gardenShape === 'hexagonal' && !s.$scene.isWinter,
+    $isHexagonalWinter: s => s.$scene.gardenShape === 'hexagonal' && s.$scene.isWinter,
+  },
+})
+```
+
+</details>