Add settings to grid block for controlling CRUD

packages/client/manifest.json

@@ -5243,6 +5243,24 @@
         "label": "Table",
         "key": "table",
         "required": true
+      },
+      {
+        "type": "boolean",
+        "label": "Add rows",
+        "key": "allowAddRows",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Edit rows",
+        "key": "allowEditRows",
+        "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Delete rows",
+        "key": "allowDeleteRows",
+        "defaultValue": true
       }
     ]
   }

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

@@ -10,10 +10,13 @@
   export let allowDeleteRows
 
   const component = getContext("component")
-  const { styleable, API } = getContext("sdk")
+  const { styleable, API, builderStore } = getContext("sdk")
 </script>
 
-<div use:styleable={$component.styles}>
+<div
+  use:styleable={$component.styles}
+  class:in-builder={$builderStore.inBuilder}
+>
   <Grid
     tableId={table?.tableId}
     {API}
@@ -33,4 +36,7 @@
     align-items: stretch;
     border: 1px solid var(--spectrum-global-color-gray-300);
   }
+  div.in-builder :global(*) {
+    pointer-events: none;
+  }
 </style>

packages/frontend-core/src/components/grid/layout/Grid.svelte

@@ -232,7 +232,7 @@
     border-bottom: 2px solid var(--spectrum-global-color-gray-200);
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
-    background: var(--background);
+    background: var(--spectrum-global-color-gray-100);
     z-index: 2;
   }
   .controls-left,

packages/frontend-core/src/components/grid/layout/NewRow.svelte

@@ -141,6 +141,17 @@
   })
 </script>
 
+<!-- New row FAB -->
+{#if !visible}
+  <div
+    class="new-row-fab"
+    on:click={() => dispatch("add-row-inline")}
+    transition:fade|local={{ duration: 130 }}
+  >
+    <Icon name="Add" size="S" />
+  </div>
+{/if}
+
 <!-- Only show new row functionality if we have any columns -->
 {#if visible}
   <div
@@ -227,6 +238,23 @@
 {/if}
 
 <style>
+  /* New row FAB */
+  .new-row-fab {
+    position: absolute;
+    top: var(--default-row-height);
+    left: calc(var(--gutter-width) / 2);
+    transform: translateX(8px) translateY(-50%);
+    background: var(--cell-background);
+    padding: 4px;
+    border-radius: 50%;
+    border: var(--cell-border);
+    z-index: 10;
+  }
+  .new-row-fab:hover {
+    background: var(--cell-background-hover);
+    cursor: pointer;
+  }
+
   .container {
     position: absolute;
     top: var(--default-row-height);