@buoy-gg/network 7.0.14 → 7.0.16

package/lib/module/network/components/NetworkNumberPrompt.web.js

@@ -0,0 +1,230 @@
+"use strict";
+
+/**
+ * NetworkNumberPrompt.web — DOM twin of NetworkNumberPrompt.tsx.
+ *
+ * Entering one number, pinned to the TOP of the tool so the (mobile) keyboard
+ * can't cover it — the panel keeps the same placement so the two surfaces
+ * read identically. Same clamp-on-submit semantics: a field that takes 999
+ * and stores 599 is a field that lies, so min/max clamp BEFORE `onSubmit`.
+ *
+ * shared-ui RN chrome is replicated as DOM with provenance (web consumers
+ * resolve `@buoy-gg/shared-ui` to a minimal shim):
+ *  - `macOSColors` — inlined verbatim subset from
+ *    shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts.
+ *  - `absoluteFill` — inset: 0.
+ *
+ * Intentional deviations (all logged):
+ *  - `selectTextOnFocus` → an explicit `select()` in the autoFocus ref
+ *    callback (DOM inputs don't select-all on focus by default).
+ *  - `keyboardType="number-pad"` → `inputMode="numeric"`; Enter submits
+ *    (native `onSubmitEditing`/`returnKeyType="done"`), Escape cancels (the
+ *    keyboard affordance the backdrop tap covers on touch).
+ *
+ * @platform React DOM Web
+ */
+
+import { useState } from "react";
+
+/** macOSColors subset — shared/src/ui/gameUI/constants/macOSDesignSystemColors.ts, verbatim. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const macOSColors = {
+  background: {
+    base: "#0A0A0C",
+    card: "#1A1A1C",
+    input: "#26262A"
+  },
+  border: {
+    default: "#2D2D2F",
+    input: "#3D3D42",
+    hover: "#4D4D4F"
+  },
+  text: {
+    primary: "#F5F5F7",
+    secondary: "#A1A1A6",
+    muted: "#8E8E93"
+  },
+  semantic: {
+    info: "#00B8E6"
+  }
+};
+export function NetworkNumberPrompt({
+  title,
+  hint,
+  value,
+  placeholder = "Number",
+  min,
+  max,
+  onSubmit,
+  onCancel
+}) {
+  const [text, setText] = useState(value != null ? String(value) : "");
+  const submit = () => {
+    const trimmed = text.trim();
+    if (!trimmed) {
+      onSubmit(null);
+      return;
+    }
+    const parsed = Number(trimmed);
+    if (!Number.isFinite(parsed)) {
+      onSubmit(null);
+      return;
+    }
+    // Clamped here rather than accepted-then-silently-changed: a field that
+    // takes 999 and stores 599 is a field that lies. (Native comment.)
+    let next = parsed;
+    if (min != null) next = Math.max(min, next);
+    if (max != null) next = Math.min(max, next);
+    onSubmit(next);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    style: styles.overlay,
+    children: [/*#__PURE__*/_jsx("button", {
+      type: "button",
+      "aria-label": "Dismiss",
+      onClick: onCancel,
+      style: styles.backdrop
+    }), /*#__PURE__*/_jsxs("div", {
+      style: styles.panel,
+      children: [/*#__PURE__*/_jsx("div", {
+        style: styles.title,
+        children: title
+      }), /*#__PURE__*/_jsx("input", {
+        style: styles.input,
+        value: text,
+        onChange: e => setText(e.target.value),
+        placeholder: placeholder,
+        inputMode: "numeric"
+        // DEVIATION (logged in the file header): autoFocus + select() stands
+        // in for native `selectTextOnFocus`.
+        ,
+        ref: node => {
+          if (node) {
+            node.focus();
+            node.select();
+          }
+        },
+        onKeyDown: e => {
+          if (e.key === "Enter") submit();
+          if (e.key === "Escape") onCancel();
+        },
+        "aria-label": title
+      }), hint ? /*#__PURE__*/_jsx("div", {
+        style: styles.hint,
+        children: hint
+      }) : null, /*#__PURE__*/_jsxs("div", {
+        style: styles.actions,
+        children: [/*#__PURE__*/_jsx("button", {
+          type: "button",
+          onClick: onCancel,
+          style: {
+            ...styles.button,
+            ...styles.cancelButton
+          },
+          children: /*#__PURE__*/_jsx("span", {
+            style: styles.cancelText,
+            children: "Cancel"
+          })
+        }), /*#__PURE__*/_jsx("button", {
+          type: "button",
+          onClick: submit,
+          style: {
+            ...styles.button,
+            ...styles.saveButton
+          },
+          children: /*#__PURE__*/_jsx("span", {
+            style: styles.saveText,
+            children: "Set"
+          })
+        })]
+      })]
+    })]
+  });
+}
+
+// Values mirror the native StyleSheet block 1:1.
+const styles = {
+  overlay: {
+    position: "absolute",
+    inset: 0,
+    zIndex: 40
+  },
+  backdrop: {
+    position: "absolute",
+    inset: 0,
+    backgroundColor: "rgba(0,0,0,0.6)",
+    border: "none",
+    padding: 0,
+    margin: 0,
+    cursor: "default",
+    width: "100%",
+    height: "100%"
+  },
+  panel: {
+    position: "relative",
+    margin: "12px 12px 0",
+    padding: 14,
+    borderRadius: 10,
+    border: `1px solid ${macOSColors.border.hover}`,
+    backgroundColor: macOSColors.background.card,
+    display: "flex",
+    flexDirection: "column",
+    gap: 10
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: 700,
+    color: macOSColors.text.primary
+  },
+  input: {
+    backgroundColor: macOSColors.background.input,
+    border: `1px solid ${macOSColors.border.input}`,
+    borderRadius: 6,
+    padding: "10px 12px",
+    fontSize: 16,
+    fontWeight: 700,
+    color: macOSColors.text.primary,
+    outline: "none",
+    fontFamily: "inherit",
+    boxSizing: "border-box",
+    width: "100%"
+  },
+  hint: {
+    fontSize: 10,
+    color: macOSColors.text.muted
+  },
+  actions: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 8
+  },
+  button: {
+    flex: 1,
+    padding: "10px 0",
+    borderRadius: 6,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    margin: 0,
+    boxSizing: "border-box"
+  },
+  cancelButton: {
+    border: `1px solid ${macOSColors.border.default}`,
+    backgroundColor: macOSColors.background.base
+  },
+  cancelText: {
+    fontSize: 12,
+    fontWeight: 600,
+    color: macOSColors.text.secondary
+  },
+  saveButton: {
+    border: `1px solid ${macOSColors.semantic.info}`,
+    backgroundColor: `${macOSColors.semantic.info}22`
+  },
+  saveText: {
+    fontSize: 12,
+    fontWeight: 700,
+    color: macOSColors.semantic.info
+  }
+};