From 50541c40de5ba77e571a48e4fe785635096d9633 Mon Sep 17 00:00:00 2001
From: PARTHIV PRATIM SAIKIA <parthivsaikia985@gmail.com>
Date: Mon, 24 Nov 2025 11:57:40 +0530
Subject: [PATCH 1/2] feat: enable ESC and Double Click to close shape

Signed-off-by: PARTHIV PRATIM SAIKIA <parthivsaikia985@gmail.com>
---
 site/src/components/ShapeBuilder/index.js |  85 +++++++++++++-----
 site/src/pages/index.js                   | 101 +++++++++++++++++-----
 2 files changed, 143 insertions(+), 43 deletions(-)

diff --git a/site/src/components/ShapeBuilder/index.js b/site/src/components/ShapeBuilder/index.js
index 87cd10e..0abb884 100644
--- a/site/src/components/ShapeBuilder/index.js
+++ b/site/src/components/ShapeBuilder/index.js
@@ -1,6 +1,12 @@
 // /* global window */
 import React, { useEffect, useRef, useState } from "react";
-import { Wrapper, CanvasContainer, OutputBox, StyledSVG, CopyButton } from "./shapeBuilder.styles";
+import {
+  Wrapper,
+  CanvasContainer,
+  OutputBox,
+  StyledSVG,
+  CopyButton,
+} from "./shapeBuilder.styles";
 import { Button, Typography, Box, CopyIcon } from "@sistent/sistent";
 import { SVG, extend as SVGextend } from "@svgdotjs/svg.js";
 import draw from "@svgdotjs/svg.draw.js";
@@ -60,13 +66,16 @@ const ShapeBuilder = () => {
 
     const points = getPlottedPoints(poly);
     if (!points) return;
-    const xs = points.map(p => p[0]);
-    const ys = points.map(p => p[1]);
+    const xs = points.map((p) => p[0]);
+    const ys = points.map((p) => p[1]);
 
     const width = Math.abs(Math.max(...xs) - Math.min(...xs));
     const height = Math.abs(Math.max(...ys) - Math.min(...ys));
 
-    poly.size(width > height ? 520 : undefined, height >= width ? 520 : undefined);
+    poly.size(
+      width > height ? 520 : undefined,
+      height >= width ? 520 : undefined,
+    );
     poly.move(0, 0);
     showCytoArray();
   };
@@ -79,7 +88,7 @@ const ShapeBuilder = () => {
       poly.draw("param", "snapToGrid", 0.001);
     }
 
-    if (e.key === "Enter") {
+    if (e.key === "Enter" || e.key === "Escape") {
       poly.draw("done");
       poly.fill("#00B39F");
       showCytoArray();
@@ -172,34 +181,66 @@ const ShapeBuilder = () => {
   return (
     <Wrapper>
       <CanvasContainer>
-        <StyledSVG ref={boardRef} width="100%" height="100%">
+        <StyledSVG
+          ref={boardRef}
+          width="100%"
+          height="100%"
+          onDoubleClick={closeShape}
+        >
           <defs>
-            <pattern id="grid" width="16" height="16" patternUnits="userSpaceOnUse">
-              <path d="M 16 0 L 0 0 0 16" fill="none" stroke="#797d7a" strokeWidth="1" />
+            <pattern
+              id="grid"
+              width="16"
+              height="16"
+              patternUnits="userSpaceOnUse"
+            >
+              <path
+                d="M 16 0 L 0 0 0 16"
+                fill="none"
+                stroke="#797d7a"
+                strokeWidth="1"
+              />
             </pattern>
           </defs>
           <rect className="grid" width="100%" height="100%" fill="url(#grid)" />
         </StyledSVG>
         {error && (
-          <div style={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            color: "red",
-            backgroundColor: "white",
-            padding: "10px",
-            borderRadius: "5px"
-          }}>
+          <div
+            style={{
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              color: "red",
+              backgroundColor: "white",
+              padding: "10px",
+              borderRadius: "5px",
+            }}
+          >
             {error}
           </div>
         )}
       </CanvasContainer>
 
-      <Box sx={{ display: "flex", justifyContent: "center", gap: 2, mt: 3, mb: 3, flexWrap: "wrap" }}>
-        <Button variant="contained" onClick={clearShape}>Clear</Button>
-        <Button variant="contained" onClick={closeShape}>Close Shape</Button>
-        <Button variant="contained" onClick={handleMaximize}>Maximize</Button>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          gap: 2,
+          mt: 3,
+          mb: 3,
+          flexWrap: "wrap",
+        }}
+      >
+        <Button variant="contained" onClick={clearShape}>
+          Clear
+        </Button>
+        <Button variant="contained" onClick={closeShape}>
+          Close Shape
+        </Button>
+        <Button variant="contained" onClick={handleMaximize}>
+          Maximize
+        </Button>
       </Box>
 
       <OutputBox>
diff --git a/site/src/pages/index.js b/site/src/pages/index.js
index 157514d..9d417ff 100644
--- a/site/src/pages/index.js
+++ b/site/src/pages/index.js
@@ -1,41 +1,100 @@
-import React, { useState } from "react";
-import { ThemeProvider } from "styled-components";
+import React from "react";
+import styled, { ThemeProvider } from "styled-components";
 import { GlobalStyle, Main, lightTheme, darkTheme } from "../styles/styles";
 import { useDarkMode } from "../components/useDarkMode";
 import Navigation from "../components/Navigation";
 import Footer from "../components/Footer";
 import ShapeBuilder from "../components/ShapeBuilder";
-import { Button, SistentThemeProviderWithoutBaseLine, Box } from "@sistent/sistent";
-import InstructionsModal from "../components/utils/instructionsModal";
+import { SistentThemeProviderWithoutBaseLine, Box } from "@sistent/sistent";
+
+const Kbd = styled.kbd`
+  background-color: ${({ theme }) =>
+    theme.mode === "light" ? "#f4f4f4" : "#2b2b2b"};
+  border: 1px solid
+    ${({ theme }) => (theme.mode === "light" ? "#d1d5da" : "#444")};
+  border-bottom-color: ${({ theme }) =>
+    theme.mode === "light" ? "#c6cbd1" : "#444"};
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0
+    ${({ theme }) => (theme.mode === "light" ? "#c6cbd1" : "#444")};
+  color: ${({ theme }) => (theme.mode === "light" ? "#444" : "#e6e6e6")};
+  display: inline-block;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 1;
+  padding: 3px 6px;
+  margin-right: 6px;
+  vertical-align: middle;
+`;
+
+const InstructionsContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-top: 16px;
+  font-size: 0.9rem;
+  color: ${({ theme }) => (theme.mode === "light" ? "#666" : "#aaa")};
+
+  span {
+    display: flex;
+    align-items: center;
+  }
+`;
 
 const IndexPage = () => {
-  // const themesistent = useTheme();
   const [theme, toggleTheme] = useDarkMode();
   const themeMode = theme === "light" ? lightTheme : darkTheme;
-  const [open, setOpen] = useState(false);
+  const activeTheme = { ...themeMode, mode: theme };
 
   return (
     <SistentThemeProviderWithoutBaseLine>
-      <ThemeProvider theme={themeMode}>
+      <ThemeProvider theme={activeTheme}>
         <GlobalStyle />
         <Navigation theme={theme} toggleTheme={toggleTheme} />
         <Main>
           <section className="hero">
-            <h1>Shape Builder</h1>
-            <p className="desc-text">
-              Click on the grid to start creating a polygon. Each click adds a point.
-            </p>
-          </section>
-          <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
-            <Button
-              variant="contained"
-              sx={{ minWidth: "fit-content" }}
-              onClick={() => setOpen(true)}
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 2,
+                mb: 4,
+              }}
             >
-              Show Instructions
-            </Button>
-          </Box>
-          <InstructionsModal open={open} onClose={() => setOpen(false)} />
+              <h1>Shape Builder</h1>
+
+              <p className="desc-text" style={{ margin: 0 }}>
+                Click on the grid to start creating a polygon. Each click adds a
+                point.
+              </p>
+
+              <InstructionsContainer theme={activeTheme}>
+                <span>
+                  <Kbd theme={activeTheme}>ENTER</Kbd> /{" "}
+                  <Kbd theme={activeTheme}>ESC</Kbd> Close shape
+                </span>
+
+                <span>
+                  <Kbd theme={activeTheme}>CTRL</Kbd> Snap to grid
+                </span>
+
+                <span>
+                  <Kbd theme={activeTheme}>CTRL</Kbd> +{" "}
+                  <Kbd theme={activeTheme}>Z</Kbd> Undo
+                </span>
+
+                <span>
+                  <Kbd theme={activeTheme}>Maximize</Kbd> Visibility
+                </span>
+              </InstructionsContainer>
+            </Box>
+          </section>
+
           <ShapeBuilder />
         </Main>
         <Footer />

From a5318a81de44179219188ad1112e1ad9eb58e7ea Mon Sep 17 00:00:00 2001
From: PARTHIV PRATIM SAIKIA <parthivsaikia985@gmail.com>
Date: Mon, 24 Nov 2025 16:59:14 +0530
Subject: [PATCH 2/2] revert auto-formatting

Signed-off-by: PARTHIV PRATIM SAIKIA <parthivsaikia985@gmail.com>
---
 site/src/components/ShapeBuilder/index.js | 76 ++++++-----------------
 site/src/pages/index.js                   |  2 +-
 2 files changed, 21 insertions(+), 57 deletions(-)

diff --git a/site/src/components/ShapeBuilder/index.js b/site/src/components/ShapeBuilder/index.js
index 0abb884..82b022f 100644
--- a/site/src/components/ShapeBuilder/index.js
+++ b/site/src/components/ShapeBuilder/index.js
@@ -1,12 +1,6 @@
 // /* global window */
 import React, { useEffect, useRef, useState } from "react";
-import {
-  Wrapper,
-  CanvasContainer,
-  OutputBox,
-  StyledSVG,
-  CopyButton,
-} from "./shapeBuilder.styles";
+import { Wrapper, CanvasContainer, OutputBox, StyledSVG, CopyButton } from "./shapeBuilder.styles";
 import { Button, Typography, Box, CopyIcon } from "@sistent/sistent";
 import { SVG, extend as SVGextend } from "@svgdotjs/svg.js";
 import draw from "@svgdotjs/svg.draw.js";
@@ -66,16 +60,13 @@ const ShapeBuilder = () => {
 
     const points = getPlottedPoints(poly);
     if (!points) return;
-    const xs = points.map((p) => p[0]);
-    const ys = points.map((p) => p[1]);
+    const xs = points.map(p => p[0]);
+    const ys = points.map(p => p[1]);
 
     const width = Math.abs(Math.max(...xs) - Math.min(...xs));
     const height = Math.abs(Math.max(...ys) - Math.min(...ys));
 
-    poly.size(
-      width > height ? 520 : undefined,
-      height >= width ? 520 : undefined,
-    );
+    poly.size(width > height ? 520 : undefined, height >= width ? 520 : undefined);
     poly.move(0, 0);
     showCytoArray();
   };
@@ -188,59 +179,32 @@ const ShapeBuilder = () => {
           onDoubleClick={closeShape}
         >
           <defs>
-            <pattern
-              id="grid"
-              width="16"
-              height="16"
-              patternUnits="userSpaceOnUse"
-            >
-              <path
-                d="M 16 0 L 0 0 0 16"
-                fill="none"
-                stroke="#797d7a"
-                strokeWidth="1"
-              />
+            <pattern id="grid" width="16" height="16" patternUnits="userSpaceOnUse">
+              <path d="M 16 0 L 0 0 0 16" fill="none" stroke="#797d7a" strokeWidth="1" />
             </pattern>
           </defs>
           <rect className="grid" width="100%" height="100%" fill="url(#grid)" />
         </StyledSVG>
         {error && (
-          <div
-            style={{
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              color: "red",
-              backgroundColor: "white",
-              padding: "10px",
-              borderRadius: "5px",
-            }}
-          >
+          <div style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            color: "red",
+            backgroundColor: "white",
+            padding: "10px",
+            borderRadius: "5px"
+          }}>
             {error}
           </div>
         )}
       </CanvasContainer>
 
-      <Box
-        sx={{
-          display: "flex",
-          justifyContent: "center",
-          gap: 2,
-          mt: 3,
-          mb: 3,
-          flexWrap: "wrap",
-        }}
-      >
-        <Button variant="contained" onClick={clearShape}>
-          Clear
-        </Button>
-        <Button variant="contained" onClick={closeShape}>
-          Close Shape
-        </Button>
-        <Button variant="contained" onClick={handleMaximize}>
-          Maximize
-        </Button>
+      <Box sx={{ display: "flex", justifyContent: "center", gap: 2, mt: 3, mb: 3, flexWrap: "wrap" }}>
+        <Button variant="contained" onClick={clearShape}>Clear</Button>
+        <Button variant="contained" onClick={closeShape}>Close Shape</Button>
+        <Button variant="contained" onClick={handleMaximize}>Maximize</Button>
       </Box>
 
       <OutputBox>
diff --git a/site/src/pages/index.js b/site/src/pages/index.js
index 9d417ff..8b3c697 100644
--- a/site/src/pages/index.js
+++ b/site/src/pages/index.js
@@ -9,7 +9,7 @@ import { SistentThemeProviderWithoutBaseLine, Box } from "@sistent/sistent";
 
 const Kbd = styled.kbd`
   background-color: ${({ theme }) =>
-    theme.mode === "light" ? "#f4f4f4" : "#2b2b2b"};
+  theme.mode === "light" ? "#f4f4f4" : "#2b2b2b"};
   border: 1px solid
     ${({ theme }) => (theme.mode === "light" ? "#d1d5da" : "#444")};
   border-bottom-color: ${({ theme }) =>