@noya-app/noya-multiplayer-react 0.1.62 → 0.1.63

package/src/inspector/StateInspectorArrow.tsx

@@ -0,0 +1,28 @@
+import React, { CSSProperties } from "react";
+
+// Rotates ▶️ or ▼ based on expanded state
+export function StateInspectorArrow({
+  expanded,
+  onClick,
+  style,
+}: {
+  expanded: boolean;
+  onClick?: () => void;
+  style?: CSSProperties;
+}) {
+  return (
+    <span
+      role="button"
+      onClick={onClick}
+      style={{
+        display: "inline-block",
+        textAlign: "center",
+        transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
+        fontFamily: "Menlo, monospace",
+        ...style,
+      }}
+    >
+      {"▼"}
+    </span>
+  );
+}

package/src/inspector/StateInspectorButton.tsx

@@ -0,0 +1,45 @@
+import React, { CSSProperties } from "react";
+import { lightInspectorTheme } from "./inspectorTheme";
+
+export function StateInspectorButton({
+  children,
+  onClick,
+  style,
+  theme,
+  disabled,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+  style?: CSSProperties;
+  theme: typeof lightInspectorTheme;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick();
+      }}
+      style={{
+        flex: "0",
+        appearance: "none",
+        background: "none",
+        color: theme.BASE_COLOR,
+        opacity: disabled ? 0.25 : 1,
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0",
+        cursor: "pointer",
+        ...style,
+      }}
+    >
+      {children}
+    </button>
+  );
+}

package/src/inspector/StateInspectorDisclosureSection.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import React, {
+  CSSProperties,
+  DetailedHTMLProps,
+  ForwardedRef,
+  forwardRef,
+  HTMLAttributes,
+} from "react";
+import { darkInspectorTheme, lightInspectorTheme } from "./inspectorTheme";
+import { StateInspectorArrow } from "./StateInspectorArrow";
+
+export function StateInspectorDisclosureSection({
+  open,
+  setOpen,
+  title,
+  right,
+  children,
+  colorScheme,
+  isFirst,
+  style,
+}: {
+  open: boolean;
+  setOpen?: (value: boolean) => void;
+  title: React.ReactNode;
+  right?: React.ReactNode;
+  children: React.ReactNode;
+  colorScheme: "light" | "dark";
+  isFirst?: boolean;
+  style?: CSSProperties;
+}) {
+  const theme =
+    colorScheme === "light" ? lightInspectorTheme : darkInspectorTheme;
+
+  const borderColor =
+    colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
+
+  return (
+    <div
+      style={{
+        flex: open ? "1 1 0" : "0",
+        display: "flex",
+        flexDirection: "column",
+        ...style,
+      }}
+    >
+      <div
+        onClick={() => setOpen?.(!open)}
+        style={{
+          cursor: "default",
+          fontSize: "12px",
+          padding: "4px 10px",
+          display: "flex",
+          alignItems: "center",
+          ...(!isFirst && { borderTop: `1px solid ${borderColor}` }),
+          ...(open && { borderBottom: `1px solid ${borderColor}` }),
+        }}
+      >
+        {setOpen && (
+          <StateInspectorArrow
+            expanded={open}
+            style={{
+              fontSize: theme.ARROW_FONT_SIZE,
+              marginRight: theme.ARROW_MARGIN_RIGHT + 1,
+              color: theme.ARROW_COLOR,
+            }}
+          />
+        )}
+        <span style={{ flex: "1 1 0", userSelect: "none" }}>{title}</span>
+        {right}
+      </div>
+      {open && children}
+    </div>
+  );
+}
+
+export const StateInspectorDisclosureRowInner = forwardRef(
+  function StateInspectorDisclosureRowInner(
+    props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    forwardedRef: ForwardedRef<HTMLDivElement>
+  ) {
+    return (
+      <div
+        style={{
+          flex: "1 1 0",
+          overflowY: "auto",
+          overflowX: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          ...props.style,
+        }}
+        {...props}
+        ref={forwardedRef}
+      />
+    );
+  }
+);

package/src/inspector/StateInspectorRow.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import React, { CSSProperties } from "react";
+
+export function StateInspectorRow({
+  children,
+  colorScheme,
+  selected,
+  style,
+  variant,
+}: {
+  children: React.ReactNode;
+  colorScheme: "light" | "dark";
+  selected?: boolean;
+  style?: CSSProperties;
+  variant?: "up" | "down";
+}) {
+  const solidBorderColor =
+    colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+
+  return (
+    <div
+      style={{
+        borderBottom: `1px solid ${solidBorderColor}`,
+        fontSize: "12px",
+        fontFamily: "Menlo, monospace",
+        padding: "2px 12px 1px",
+        display: "flex",
+        alignItems: "center",
+        background:
+          variant === "up"
+            ? "rgba(0,255,0,0.1)"
+            : variant === "down"
+              ? "transparent"
+              : selected
+                ? "rgb(59 130 246 / 15%)"
+                : undefined,
+        // background:
+        //   colorScheme === "light"
+        //     ? "rgba(0,0,0,0.05)"
+        //     : "rgba(255,255,255,0.05)",
+        ...style,
+      }}
+    >
+      <span
+        style={{
+          fontFamily: "Menlo, monospace",
+          fontSize: "11px",
+          borderRadius: 4,
+          display: "inline-block",
+        }}
+      >
+        {children}
+      </span>
+    </div>
+  );
+}

package/src/inspector/StateInspectorToggleButton.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { StateInspectorAnchor } from "./StateInspector";
+import { lightInspectorTheme } from "./inspectorTheme";
+
+export function StateInspectorToggleButton({
+  showInspector,
+  setShowInspector,
+  theme,
+  anchor,
+}: {
+  showInspector: boolean;
+  setShowInspector: (value: boolean) => void;
+  theme: typeof lightInspectorTheme;
+  anchor: StateInspectorAnchor;
+}) {
+  const isRightAnchor = anchor === "right";
+
+  const rightIcon = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
+      />
+    </svg>
+  );
+
+  const leftIcon = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"
+      />
+    </svg>
+  );
+
+  return (
+    <span
+      role="button"
+      style={{
+        flex: "0",
+        appearance: "none",
+        color: theme.BASE_COLOR,
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2px 0",
+      }}
+      onClick={(event) => {
+        event.stopPropagation();
+
+        setShowInspector(!showInspector);
+      }}
+    >
+      {showInspector ? (
+        "Hide Inspector"
+      ) : (
+        <span style={{ width: "12px", height: "12px" }}>
+          {isRightAnchor ? rightIcon : leftIcon}
+        </span>
+      )}
+    </span>
+  );
+}

package/src/inspector/inspectorTheme.ts

@@ -0,0 +1,21 @@
+import { chromeDark, chromeLight } from "react-inspector";
+
+export const lightInspectorTheme = {
+  ...chromeLight,
+  BASE_BACKGROUND_COLOR: "transparent",
+  OBJECT_NAME_COLOR: "rgba(0,0,0,0.7)",
+} as any;
+
+export const darkInspectorTheme = {
+  ...chromeDark,
+  BASE_BACKGROUND_COLOR: "transparent",
+  OBJECT_NAME_COLOR: "rgba(255,255,255,0.7)",
+} as any;
+
+export const getStateInspectorTheme = (colorScheme: "light" | "dark") => {
+  return colorScheme === "light" ? lightInspectorTheme : darkInspectorTheme;
+};
+
+export const getStateInspectorBorderColor = (colorScheme: "light" | "dark") => {
+  return colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+};

package/src/inspector/sections/EventsSection.tsx

@@ -0,0 +1,89 @@
+import { ConnectionEvent } from "@noya-app/state-manager";
+import React from "react";
+import { ObjectInspector, ObjectLabel } from "react-inspector";
+import { getStateInspectorTheme } from "../inspectorTheme";
+import { ObjectRootLabel } from "../ObjectRootLabel";
+import {
+  StateInspectorDisclosureRowInner,
+  StateInspectorDisclosureSection,
+} from "../StateInspectorDisclosureSection";
+import { StateInspectorRow } from "../StateInspectorRow";
+
+export function EventsSection<S>({
+  showEvents,
+  setShowEvents,
+  colorScheme,
+  eventsContainerRef,
+  connectionEvents,
+}: {
+  showEvents: boolean;
+  setShowEvents: (value: boolean) => void;
+  colorScheme: "light" | "dark";
+  eventsContainerRef: React.RefObject<HTMLDivElement | null>;
+  connectionEvents: ConnectionEvent<S>[];
+}) {
+  const theme = getStateInspectorTheme(colorScheme);
+
+  return (
+    <StateInspectorDisclosureSection
+      open={showEvents}
+      setOpen={setShowEvents}
+      title="Events"
+      colorScheme={colorScheme}
+    >
+      <StateInspectorDisclosureRowInner ref={eventsContainerRef}>
+        {connectionEvents?.map((event, index) =>
+          event.type === "stateChange" ? (
+            <StateInspectorRow key={index} colorScheme={colorScheme}>
+              connection:{" "}
+              <span style={{ fontStyle: "italic" }}>
+                {event.state.toLowerCase()}
+              </span>
+            </StateInspectorRow>
+          ) : (
+            <StateInspectorRow
+              key={index}
+              colorScheme={colorScheme}
+              variant={event.type === "send" ? "up" : "down"}
+              style={{
+                padding: "0px 12px 1px",
+              }}
+            >
+              <ObjectInspector
+                data={event.type === "error" ? event.error : event.message}
+                theme={theme}
+                nodeRenderer={({ depth, name, data, isNonenumerable }: any) => {
+                  const direction = event.type === "send" ? "up" : "down";
+
+                  return depth === 0 ? (
+                    <ObjectRootLabel direction={direction} data={data} />
+                  ) : (
+                    <ObjectLabel
+                      direction={direction}
+                      name={name}
+                      data={data}
+                      isNonenumerable={isNonenumerable}
+                    />
+                  );
+                }}
+              />
+            </StateInspectorRow>
+          )
+        )}
+        {!connectionEvents && (
+          <div
+            style={{
+              padding: "12px",
+              fontSize: "12px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+            }}
+          >
+            <span>No recorded events</span>
+          </div>
+        )}
+      </StateInspectorDisclosureRowInner>
+    </StateInspectorDisclosureSection>
+  );
+}

package/src/inspector/sections/HistorySection.tsx

@@ -0,0 +1,236 @@
+"use client";
+
+import {
+  HistorySnapshot,
+  MultiplayerPatchMetadata,
+  MultiplayerStateManager,
+} from "@noya-app/state-manager";
+import React, { useEffect, useRef } from "react";
+import { ObjectInspector } from "react-inspector";
+import { StateInspectorButton } from "../StateInspectorButton";
+import {
+  StateInspectorDisclosureRowInner,
+  StateInspectorDisclosureSection,
+} from "../StateInspectorDisclosureSection";
+import {
+  getStateInspectorBorderColor,
+  getStateInspectorTheme,
+} from "../inspectorTheme";
+import { pathToString } from "../utils";
+
+const HISTORY_ELEMENT_PREFIX = "noya-multiplayer-history-";
+
+export function HistorySection<S, M extends object>({
+  showHistory,
+  setShowHistory,
+  colorScheme,
+  historySnapshot,
+  multiplayerStateManager,
+}: {
+  showHistory: boolean;
+  setShowHistory: (value: boolean) => void;
+  colorScheme: "light" | "dark";
+  historySnapshot: HistorySnapshot<S, Partial<M> & MultiplayerPatchMetadata>;
+  multiplayerStateManager: MultiplayerStateManager<S, M>;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+  const theme = getStateInspectorTheme(colorScheme);
+  const solidBorderColor = getStateInspectorBorderColor(colorScheme);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.scrollTop = ref.current.scrollHeight;
+    }
+  }, [historySnapshot]);
+
+  // If history index changes, scroll to the new history entry into view
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const historyEntry = ref.current.querySelector(
+      `#${HISTORY_ELEMENT_PREFIX}${historySnapshot.historyIndex}`
+    );
+
+    if (historyEntry) {
+      historyEntry.scrollIntoView({
+        block: "nearest",
+        inline: "nearest",
+      });
+    }
+  }, [historySnapshot.historyIndex]);
+
+  return (
+    <StateInspectorDisclosureSection
+      open={showHistory}
+      setOpen={setShowHistory}
+      title="History"
+      colorScheme={colorScheme}
+      right={
+        <span
+          style={{
+            display: "flex",
+            gap: "4px",
+          }}
+        >
+          <StateInspectorButton
+            disabled={!historySnapshot.canUndo}
+            theme={theme}
+            onClick={() => {
+              multiplayerStateManager.undo();
+            }}
+          >
+            <span style={{ width: "12px", height: "12px" }}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fill="currentColor"
+                  d="M12 5H7V2L1 6l6 4V7h5c2.2 0 4 1.8 4 4s-1.8 4-4 4H7v2h5c3.3 0 6-2.7 6-6s-2.7-6-6-6"
+                />
+              </svg>
+            </span>
+          </StateInspectorButton>
+          <StateInspectorButton
+            disabled={!historySnapshot.canRedo}
+            theme={theme}
+            onClick={() => {
+              multiplayerStateManager.redo();
+            }}
+          >
+            <span style={{ width: "12px", height: "12px" }}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="1em"
+                height="1em"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fill="currentColor"
+                  d="M8 5h5V2l6 4l-6 4V7H8c-2.2 0-4 1.8-4 4s1.8 4 4 4h5v2H8c-3.3 0-6-2.7-6-6s2.7-6 6-6"
+                />
+              </svg>
+            </span>
+          </StateInspectorButton>
+        </span>
+      }
+    >
+      <StateInspectorDisclosureRowInner ref={ref}>
+        <div
+          id={`${HISTORY_ELEMENT_PREFIX}0`}
+          style={{
+            borderBottom: `1px solid ${solidBorderColor}`,
+            fontSize: "12px",
+            fontFamily: "Menlo, monospace",
+            padding: "2px 12px 1px",
+            display: "flex",
+            alignItems: "center",
+            background:
+              historySnapshot.historyIndex === 0
+                ? "rgb(59 130 246 / 15%)"
+                : undefined,
+          }}
+        >
+          <span
+            style={{
+              fontFamily: "Menlo, monospace",
+              fontSize: "11px",
+              borderRadius: 4,
+              display: "inline-block",
+            }}
+          >
+            Initial state
+          </span>
+        </div>
+        {historySnapshot.history.map((entry, index) => {
+          const metadata = entry.metadata;
+          const { id, name, timestamp, ...rest } = metadata;
+
+          return (
+            <div
+              id={`${HISTORY_ELEMENT_PREFIX}${index + 1}`}
+              key={index}
+              style={{
+                padding: "0px 12px 1px",
+                borderBottom: `1px solid ${solidBorderColor}`,
+                background:
+                  index + 1 === historySnapshot.historyIndex
+                    ? "rgb(59 130 246 / 15%)"
+                    : undefined,
+              }}
+            >
+              {typeof name === "string" && (
+                <pre
+                  style={{
+                    fontSize: "11px",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    margin: 0,
+                  }}
+                >
+                  {entry.metadata.name}
+                  {Object.keys(rest).length > 0 && (
+                    <ObjectInspector data={rest} theme={theme} />
+                  )}
+                </pre>
+              )}
+              {entry.redoPatches?.map((patch, j) => (
+                <pre
+                  key={j}
+                  style={{
+                    fontSize: "11px",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    margin: 0,
+                  }}
+                >
+                  {patch.op === "add" && (
+                    <>
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.path)}
+                      </span>
+                      {" = "}
+                      <ObjectInspector data={patch.value} theme={theme} />
+                    </>
+                  )}
+                  {patch.op === "replace" && (
+                    <>
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.path)}
+                      </span>
+                      {" = "}
+                      <ObjectInspector data={patch.value} theme={theme} />
+                    </>
+                  )}
+                  {patch.op === "remove" && (
+                    <>
+                      <span style={{ color: theme.OBJECT_VALUE_STRING_COLOR }}>
+                        delete{" "}
+                      </span>
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.path)}
+                      </span>
+                    </>
+                  )}
+                  {patch.op === "move" && (
+                    <>
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.from!)}
+                      </span>
+                      {" -> "}
+                      <span style={{ fontStyle: "italic" }}>
+                        {pathToString(patch.path)}
+                      </span>
+                    </>
+                  )}
+                </pre>
+              ))}
+            </div>
+          );
+        })}
+      </StateInspectorDisclosureRowInner>
+    </StateInspectorDisclosureSection>
+  );
+}