@noya-app/noya-multiplayer-react 0.1.76 → 0.1.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-multiplayer-react",
-  "version": "0.1.76",
+  "version": "0.1.78",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -11,11 +11,11 @@
     "dev": "npm run build -- --watch"
   },
   "dependencies": {
-    "@noya-app/state-manager": "0.1.61",
+    "@noya-app/state-manager": "0.1.62",
     "@noya-app/emitter": "0.1.0",
     "@noya-app/observable": "0.1.12",
     "@noya-app/task-runner": "0.1.6",
-    "@noya-app/react-utils": "0.1.27",
+    "@noya-app/react-utils": "0.1.29",
     "react-inspector": "6.0.2"
   },
   "peerDependencies": {

package/src/inspector/StateInspector.tsx

@@ -22,6 +22,7 @@ import {
 } from "./inspectorTheme";
 import { ActivityEventsSection } from "./sections/ActivityEventsSection";
 import { EventsSection } from "./sections/EventsSection";
+import { GitSection } from "./sections/GitSection";
 import { HistorySection } from "./sections/HistorySection";
 import { ServerScriptLogsSection } from "./sections/ServerScriptLogsSection";
 import { exportAll, importAll } from "./serialization";
@@ -79,6 +80,7 @@ export const StateInspector = memoGeneric(function StateInspector<
     resourceManager,
     activityEventsManager,
     logManager,
+    gitManager,
   } = noyaManager;
 
   const [didMount, setDidMount] = React.useState(false);
@@ -160,6 +162,10 @@ export const StateInspector = memoGeneric(function StateInspector<
       "noya-multiplayer-react-show-server-simulation-logs",
       false
     );
+  const [showGit, setShowGit] = useLocalStorageState(
+    "noya-multiplayer-react-show-git",
+    false
+  );
   const [showSimulation, setShowSimulation] = useLocalStorageState(
     "noya-multiplayer-react-show-simulation",
     false
@@ -495,26 +501,26 @@ export const StateInspector = memoGeneric(function StateInspector<
             </StateInspectorButton>
             <StateInspectorButton
               theme={theme}
-              onClick={() => {
-                // get file input
-                const input = document.createElement("input");
-                input.type = "file";
-                input.onchange = () => {
-                  const file = input.files?.[0];
-                  if (file) {
-                    const reader = new FileReader();
-                    reader.onload = () => {
-                      const buffer = reader.result as ArrayBuffer;
-                      assetManager.create(new Uint8Array(buffer));
-                    };
-                    reader.readAsArrayBuffer(file);
-                  }
-                };
-                input.click();
+              onClick={async () => {
+                const file = await uploadFile();
+                assetManager.create(file);
               }}
             >
               Upload
             </StateInspectorButton>
+            <StateInspectorButton
+              theme={theme}
+              onClick={async () => {
+                const file = await uploadFile();
+                assetManager.create({
+                  data: new Uint8Array(await file.arrayBuffer()),
+                  contentType: file.type,
+                  mode: "mutable",
+                });
+              }}
+            >
+              Upload Mutable
+            </StateInspectorButton>
           </span>
         }
       >
@@ -526,12 +532,28 @@ export const StateInspector = memoGeneric(function StateInspector<
                 data={truncateAsset(asset)}
                 theme={theme}
               />
-              <StateInspectorButton
-                theme={theme}
-                onClick={() => assetManager.delete(asset.id)}
-              >
-                Delete
-              </StateInspectorButton>
+              <div style={{ display: "flex", gap: "4px" }}>
+                {asset.mode === "mutable" && (
+                  <StateInspectorButton
+                    theme={theme}
+                    onClick={async () => {
+                      const file = await uploadFile();
+                      assetManager.update(asset.id, {
+                        data: new Uint8Array(await file.arrayBuffer()),
+                        contentType: file.type,
+                      });
+                    }}
+                  >
+                    Replace
+                  </StateInspectorButton>
+                )}
+                <StateInspectorButton
+                  theme={theme}
+                  onClick={() => assetManager.delete(asset.id)}
+                >
+                  Delete
+                </StateInspectorButton>
+              </div>
             </StateInspectorRow>
           ))}
         </StateInspectorDisclosureRowInner>
@@ -633,7 +655,7 @@ export const StateInspector = memoGeneric(function StateInspector<
         <StateInspectorDisclosureSection
           title={
             <StateInspectorTitleLabel>
-              Secrets
+              Secrets ({secrets.length})
               <ColoredDot type={secretsInitialized ? "success" : "error"} />
             </StateInspectorTitleLabel>
           }
@@ -641,18 +663,28 @@ export const StateInspector = memoGeneric(function StateInspector<
           open={showSecrets}
           setOpen={setShowSecrets}
           right={
-            <StateInspectorButton
-              theme={theme}
-              onClick={() => {
-                const name = prompt("Enter secret name");
-                if (!name) return;
-                const value = prompt("Enter secret value");
-                if (!value) return;
-                secretManager.createSecret(null, name, value);
-              }}
-            >
-              Create
-            </StateInspectorButton>
+            <span style={{ display: "flex", gap: "10px" }}>
+              <StateInspectorButton
+                theme={theme}
+                onClick={() => {
+                  void secretManager.fetchSecrets();
+                }}
+              >
+                Refresh
+              </StateInspectorButton>
+              <StateInspectorButton
+                theme={theme}
+                onClick={() => {
+                  const name = prompt("Enter secret name");
+                  if (!name) return;
+                  const value = prompt("Enter secret value");
+                  if (!value) return;
+                  secretManager.createSecret(null, name, value);
+                }}
+              >
+                Create
+              </StateInspectorButton>
+            </span>
           }
         >
           <StateInspectorDisclosureRowInner>
@@ -670,13 +702,21 @@ export const StateInspector = memoGeneric(function StateInspector<
           </StateInspectorDisclosureRowInner>
         </StateInspectorDisclosureSection>
       )}
+      {advanced && (
+        <GitSection
+          showGit={showGit}
+          setShowGit={setShowGit}
+          colorScheme={colorScheme}
+          gitManager={gitManager}
+        />
+      )}
       {advanced && (
         <StateInspectorDisclosureSection
           open={showInputs}
           setOpen={setShowInputs}
           title={
             <StateInspectorTitleLabel>
-              Inputs
+              Inputs ({inputs.length})
               <ColoredDot type={inputsInitialized ? "success" : "error"} />
             </StateInspectorTitleLabel>
           }
@@ -710,7 +750,7 @@ export const StateInspector = memoGeneric(function StateInspector<
           setOpen={setShowOutputTransforms}
           title={
             <StateInspectorTitleLabel>
-              Output Transforms
+              Output Transforms ({outputTransforms.length})
               <ColoredDot
                 type={outputTransformsInitialized ? "success" : "error"}
               />