feat(example-app): (React) new GlassModal and Editor page upgrades (saving, histories, fullscreen, bug fixes)

core/include/internal/gpu.h

@@ -188,8 +188,9 @@ class GPU {
         deviceDesc.SetDeviceLostCallback(
             wgpu::CallbackMode::AllowProcessEvents,
             [](const wgpu::Device&, wgpu::DeviceLostReason reason, wgpu::StringView msg) {
-                std::string err_msg = (msg.data && msg.length > 0) ? std::string(msg.data, msg.length)
-                                                                   : "Unknown device lost reason";
+                std::string err_msg = (msg.data && msg.length > 0)
+                                          ? std::string(msg.data, msg.length)
+                                          : "Unknown device lost reason";
                 std::cerr << "[DEVICE LOST] Reason: " << static_cast<int>(reason)
                           << " Msg: " << err_msg << std::endl;
             });

core/src/internal/graph.cpp

@@ -140,7 +140,7 @@ void Graph::process_overlapping_edges() {
 
     for (const Node_ptr &n : get_nodes()) {
         if (n->area() == 0) continue;
-        
+
         for (auto &[_, p] : n->get_pixels()) {
             label_map[p.y * m_width + p.x] = n->id();
         }
@@ -170,7 +170,6 @@ void Graph::process_overlapping_edges() {
 
                 // Is it a neighbor? AND have we not processed this pairing yet?
                 if (n_val != 0 && n_val != val && val < n_val) {
-
                     bool is_too_thin = false;
 
                     // Check around the neighbor pixel for a 3rd region (pinching)
@@ -181,16 +180,18 @@ void Graph::process_overlapping_edges() {
                         if (mx < 0 || mx >= m_width || my < 0 || my >= m_height) continue;
 
                         int32_t m_val = label_map[my * m_width + mx];
-                        
+
                         if (m_val != 0 && m_val != val && m_val != n_val) {
                             is_too_thin = true;
-                            break; // CRITICAL: Stop checking immediately once proven thin!
+                            break;  // CRITICAL: Stop checking immediately once proven thin!
                         }
                     }
 
                     if (is_too_thin) {
                         // Give our pixel to the neighbor
-                        Node_ptr neighbor_node = m_nodes->at(m_node_ids[n_val]); // get_node_by_id(n_val); // Assuming you have this lookup
+                        Node_ptr neighbor_node =
+                            m_nodes->at(m_node_ids[n_val]);  // get_node_by_id(n_val); // Assuming
+                                                             // you have this lookup
                         if (neighbor_node) {
                             neighbor_node->add_edge_pixel(XY{x, y});
                         }
@@ -213,7 +214,7 @@ void Graph::compute_contours() {
         if (n->area() == 0) continue;
         n->compute_contour();
     }
-    
+
     // smoothing
     std::vector<std::vector<Point>> all_contours;
     for (const Node_ptr &n : get_nodes()) {
@@ -256,7 +257,7 @@ void Graph::merge_small_area_nodes(const int32_t min_area) {
                 std::copy(n->edges().begin(), n->edges().end(), std::back_inserter(neighbors));
 
                 ImageLib::RGBPixel<uint8_t> col = n->color();
-                
+
                 Node_ptr best_neighbor = nullptr;
                 float best_score = std::numeric_limits<float>::max();
                 for (const Node_ptr &ne : n->edges()) {
@@ -271,8 +272,10 @@ void Graph::merge_small_area_nodes(const int32_t min_area) {
                 }
 
                 // no valid neighbor found, skip this node
-                if (!best_neighbor) { continue; }
-
+                if (!best_neighbor) {
+                    continue;
+                }
+
                 if (best_neighbor->area() >= n->area()) {
                     merge_nodes(best_neighbor, n);
                 } else {

core/src/internal/labels_to_svg.cpp

@@ -195,18 +195,18 @@ char *labels_to_svg(uint8_t *data, int32_t *labels, const int width, const int h
     // 1. enumerate regions and convert to Nodes
     std::vector<Node_ptr> nodes;
     region_labeling(data, labels_vector, region_labels, width, height, nodes);
-    
+
     // 2. initialize Graph from all Nodes
     std::unique_ptr<std::vector<Node_ptr>> node_ptr =
         std::make_unique<std::vector<Node_ptr>>(std::move(nodes));
     Graph G(node_ptr, width, height);
 
     // 3. Discover node adjacencies - add edges to Graph
     G.discover_edges(region_labels, width, height);
-    
+
     // 4. Merge small area nodes until all nodes are minArea or larger
     G.merge_small_area_nodes(min_area);
-    
+
     // 5. recolor image on new regions
     ImageLib::Image<ImageLib::RGBAPixel<uint8_t>> results{width, height};
     for (auto &n : G.get_nodes()) {
@@ -221,7 +221,7 @@ char *labels_to_svg(uint8_t *data, int32_t *labels, const int width, const int h
     // 6. Contours
     // graph will manage computing contours
     G.compute_contours();
-    
+
     // accumulate all contours for svg export
     ColoredContours all_contours;
     for (auto &n : G.get_nodes()) {

example-apps/react-js/package.json

@@ -107,17 +107,18 @@
     "lint:style": "editorconfig-checker"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.95.0",
     "@testing-library/dom": "^10.4.1",
     "html-react-parser": "^5.2.15",
     "img2num": "workspace:*",
+    "jspdf": "^4.2.1",
     "lucide-react": "^0.577.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.4",
     "react-dom": "^18.2.4",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^7.13.1",
-    "react-tooltip": "^5.30.0",
-    "@tanstack/react-query": "^5.95.0"
+    "react-tooltip": "^5.30.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

example-apps/react-js/src/components/GlassCard.jsx

@@ -1,12 +1,13 @@
+import { forwardRef } from "react";
 import PropTypes from "prop-types";
 import styles from "./GlassCard.module.css";
 
 // eslint-disable-next-line no-unused-vars
-const GlassCard = ({ as: Tag = "div", children, ...rest }) => (
-  <Tag {...rest} className={`text-center glass ${styles.card} ${rest.className || ""}`}>
+const GlassCard = forwardRef(({ as: Tag = "div", children, ...rest }, ref) => (
+  <Tag {...rest} className={`text-center glass ${styles.card} ${rest.className || ""}`} ref={ref}>
     {children}
   </Tag>
-);
+));
 
 GlassCard.propTypes = {
   as: PropTypes.oneOf([

example-apps/react-js/src/components/GlassModal.jsx

@@ -0,0 +1,66 @@
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import PropTypes from "prop-types";
+import GlassCard from "@components/GlassCard";
+import styles from "./GlassModal.module.css";
+import { X } from "lucide-react";
+
+export default function GlassModal({
+  isOpen,
+  onClose,
+  children,
+  size = "lg", // sm | md | lg | any CSS width
+  showCloseButton = true,
+  closeOnBackdropClick = true,
+  className = "",
+  style = {},
+}) {
+  useEffect(() => {
+    const handleKey = (e) => {
+      if (e.key === "Escape") onClose?.();
+    };
+    if (isOpen) window.addEventListener("keydown", handleKey);
+    return () => window.removeEventListener("keydown", handleKey);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget && closeOnBackdropClick) {
+      onClose?.();
+    }
+  };
+
+  const width = size === "sm" ? "300px" : size === "md" ? "500px" : size === "lg" ? "800px" : size;
+
+  const modal = (
+    <div className={styles.backdrop} onClick={handleBackdropClick} role="dialog">
+      <GlassCard
+        as="div"
+        className={`${styles.modal} ${className}`}
+        style={{
+          flex: "0 0 auto",
+          width: width,
+          ...style,
+        }}
+      >
+        {showCloseButton && (
+          <a
+            href="#"
+            onClick={(e) => {
+              e.preventDefault();
+              onClose();
+            }}
+            className={`${styles.closeButton}`}
+            aria-label="Close modal"
+          >
+            <X size={20} />
+          </a>
+        )}
+        {children}
+      </GlassCard>
+    </div>
+  );
+
+  return createPortal(modal, document.body);
+}

example-apps/react-js/src/components/GlassModal.module.css

@@ -0,0 +1,54 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: fadeIn 0.2s ease forwards;
+}
+
+.modal {
+  position: relative;
+  border-radius: 1rem;
+  background: var(--color-bg);
+  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
+  animation: scaleIn 0.2s ease forwards;
+  max-height: 90vh;
+  max-width: 95vw;
+  overflow-y: auto;
+  z-index: 1001;
+}
+
+.closeButton {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  border: none;
+  cursor: pointer;
+  padding: var(--spacing-xs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    transform: scale(0.95);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}

example-apps/react-js/src/components/GlassSwitch.module.css

@@ -8,7 +8,6 @@
   border-radius: 9999px;
   position: relative;
   cursor: pointer;
-  margin-right: 15px;
 }
 
 /* WCAG 2.4.7 Compliant Focus Indicator */

example-apps/react-js/src/global-styles/base.css

@@ -4,7 +4,8 @@
   box-sizing: border-box;
 }
 
-body {
+body,
+:not(:root):fullscreen::backdrop {
   margin: 0;
   padding: var(--spacing-lg);
   color: var(--color-text);
@@ -60,6 +61,11 @@ img {
 }
 
 /* General link style */
+button.anchor-style {
+  padding: auto;
+  background: none;
+  border: none;
+}
 a,
 .anchor-style {
   color: var(--color-primary);
@@ -69,6 +75,7 @@ a,
     text-decoration 0.3s;
   cursor: pointer;
   text-decoration: underline;
+  cursor: pointer;
 }
 
 /* Hover/focus states */

example-apps/react-js/src/global-styles/utilities/layout.css

@@ -26,6 +26,10 @@
   display: flex;
   justify-content: space-between;
 }
+.flex-wrap-wrap {
+  display: flex;
+  flex-wrap: wrap;
+}
 
 .grid {
   display: grid;