refactor(web): improve state management

1 files changed, 44 insertions, 29 deletions

diff --git a/web/src/components/grid/index.css b/web/src/components/grid/index.css
index 93d6f6f..64153ed 100644
--- a/web/src/components/grid/index.css
+++ b/web/src/components/grid/index.css
@@ -1,34 +1,49 @@
-ntv-grid {
-  display: block;
-  position: relative;
+@layer components {
+  ntv-grid {
+    display: block;
+    position: relative;
 
-  --grid-bg-fill: var(--color-neutral-900);
-  --grid-border-stroke: var(--color-neutral-700);
-  --grid-cell-stroke: var(--color-neutral-800);
-  --grid-active-cell-stroke: var(--color-green-400);
-  --grid-selection-range-fill: color-mix(
-    in oklab,
-    var(--color-green-400) 10%,
-    transparent
-  );
-  --grid-selection-range-stroke: var(--color-green-400);
-  font-size: 14px;
-}
+    --grid-bg-fill: var(--color-neutral-900);
+    --grid-border-stroke: var(--color-neutral-700);
+    --grid-cell-stroke: var(--color-neutral-800);
+    --grid-active-cell-stroke: var(--color-green-400);
+    --grid-selection-range-fill: color-mix(
+      in oklab,
+      var(--color-green-400) 10%,
+      transparent
+    );
+    --grid-selection-range-stroke: var(--color-green-400);
+    font-size: 14px;
+  }
 
-ntv-grid > canvas {
-  display: block;
-}
+  ntv-grid > canvas {
+    display: block;
+  }
 
-ntv-grid input[data-edit-cell] {
-  position: absolute;
-  vertical-align: baseline;
-  background: var(--color-neutral-800);
-  padding-right: 1px;
-  padding-bottom: 1px;
-  color: white;
-  text-align: center;
-}
+  ntv-grid > canvas[data-selection] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+
+  :has(ntv-grid:state(selecting))
+    > ntv-grid:not(:state(selecting))
+    > canvas[data-selection] {
+    display: none;
+  }
+
+  ntv-grid input[data-edit-cell] {
+    position: absolute;
+    vertical-align: baseline;
+    background: var(--color-neutral-800);
+    padding-right: 1px;
+    padding-bottom: 1px;
+    color: white;
+    text-align: center;
+  }
 
-ntv-grid input[data-edit-cell]:focus-visible {
-  outline: none;
+  ntv-grid input[data-edit-cell]:focus-visible {
+    outline: none;
+  }
 }