Update grid layout to support placeholders, as well as grid screens

packages/client/src/components/Component.svelte

@@ -240,6 +240,7 @@
     },
     empty: emptyState,
     selected,
+    isRoot,
     inSelectedPath,
     name,
     editing,

packages/client/src/components/app/EmptyPlaceholder.svelte

@@ -18,9 +18,11 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
+    align-items: flex-start;
     color: var(--spectrum-global-color-gray-600);
     font-size: var(--font-size-s);
     gap: var(--spacing-s);
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
   }
 </style>

packages/client/src/components/app/ScreenPlaceholder.svelte

@@ -23,6 +23,8 @@
     align-items: center;
     gap: var(--spacing-s);
     flex: 1 1 auto;
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
   }
   .placeholder :global(.spectrum-Button) {
     margin-top: var(--spacing-m);

packages/client/src/components/app/container/GridContainer.svelte

@@ -27,7 +27,6 @@
   $: availableRows = Math.floor(height / GridRowHeight)
   $: rows = Math.max(requiredRows, availableRows)
   $: mobile = $context.device.mobile
-  $: empty = $component.empty
   $: colSize = width / GridColumns
   $: styles.set({
     ...$component.styles,
@@ -40,7 +39,6 @@
       "--col-size": colSize,
       "--row-size": GridRowHeight,
     },
-    empty: false,
   })
 
   // Calculates the minimum number of rows required to render all child
@@ -145,11 +143,7 @@
       {/each}
     </div>
   {/if}
-
+  <slot />
-  <!-- Only render the slot if not empty, as we don't want the placeholder -->
-  {#if !empty && mounted}
-    <slot />
-  {/if}
 </div>
 
 <style>