@interncom/diplomatic 0.0.27 → 0.0.29

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { useClientState, useSyncOnResume } from "./useClient";
-import { StateManager, useStateWatcher, opMapApplier } from './state';
+import { useClientState, useSyncOnResume } from "./react/useClient";
+import { StateManager, opMapApplier } from './state';
 import { localStorageStore } from "./localStorageStore";
 import { idbStore } from "./idbStore";
 import type { IDiplomaticClientState } from "./types";
@@ -7,5 +7,8 @@ import DiplomaticClient from "./client";
 import libsodiumCrypto from "./crypto";
 import { btoh, htob } from "./shared/lib";
 import { type IOp, Verb } from "./shared/types";
-export { useClientState, useSyncOnResume, StateManager, useStateWatcher, opMapApplier, localStorageStore, idbStore, DiplomaticClient, libsodiumCrypto, btoh, htob, Verb, };
+import useStateWatcher from "./react/useStateWatcher";
+import InitSeedView from "./react/initSeedView";
+import ClientStatusBar from "./react/statusBar";
+export { useClientState, useSyncOnResume, StateManager, useStateWatcher, opMapApplier, localStorageStore, idbStore, DiplomaticClient, libsodiumCrypto, btoh, htob, Verb, InitSeedView, ClientStatusBar, };
 export type { IOp, IDiplomaticClientState, };

package/dist/index.mjs

@@ -10,7 +10,7 @@ var __export = (target, all) => {
     __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// src/useClient.ts
+// src/react/useClient.ts
 import { useState, useEffect } from "react";
 function useClientState(client) {
   const [state, setState] = useState();
@@ -42,9 +42,6 @@ function useSyncOnResume(client) {
   }, [client]);
 }
 
-// src/state.ts
-import { useEffect as useEffect2, useState as useState2 } from "react";
-
 // src/eventEmitter.ts
 var EventEmitter = class {
   events = {};
@@ -87,20 +84,6 @@ var StateManager = class {
     this.emitter.off(opType, listener);
   };
 };
-function useStateWatcher(mgr, opType, callback) {
-  const [val, setVal] = useState2(callback());
-  useEffect2(() => {
-    function update() {
-      const newVal = callback();
-      setVal(newVal);
-    }
-    mgr.on(opType, update);
-    return () => {
-      mgr.off(opType, update);
-    };
-  }, [mgr, opType, callback]);
-  return val;
-}
 function opMapApplier(appliers) {
   return async (op) => {
     const applier = appliers[op.type];
@@ -8953,7 +8936,7 @@ var DiplomaticClient = class {
     }
     const { hostURL, hostKeyPair, encKey } = this;
     const paths = await this.store.listDownloads();
-    paths.sort((p1, p2) => p2.localeCompare(p1));
+    paths.sort((p1, p2) => p1.localeCompare(p2));
     for (const path of paths) {
       const cipher = await api_default.getDelta(hostURL, path, hostKeyPair);
       const packed = await crypto_default.decryptXSalsa20Poly1305Combined(cipher, encKey);
@@ -9018,8 +9001,98 @@ var DiplomaticClient = class {
     return this.apply(op);
   }
 };
+
+// src/react/useStateWatcher.ts
+import { useState as useState2, useEffect as useEffect2 } from "react";
+function useStateWatcher(mgr, opType, callback) {
+  const [val, setVal] = useState2(callback());
+  useEffect2(() => {
+    function update() {
+      const newVal = callback();
+      setVal(newVal);
+    }
+    mgr.on(opType, update);
+    return () => {
+      mgr.off(opType, update);
+    };
+  }, [mgr, opType, callback]);
+  return val;
+}
+
+// src/react/initSeedView.tsx
+import { useState as useState3, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function InitSeedView({ client, path }) {
+  const [seedString, setSeedString] = useState3("");
+  const [username, setUsername] = useState3("");
+  const genSeed = useCallback(async () => {
+    const seed = await crypto_default.gen256BitSecureRandomSeed();
+    const seedStr = btoh(seed);
+    setSeedString(seedStr);
+  }, []);
+  const handleInitFormSubmit = useCallback(async (e) => {
+    e.preventDefault();
+    const seed = htob(seedString);
+    await client.setSeed(seed);
+    window.location.replace(path);
+  }, [seedString, client, path]);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("h1", { children: "Initialize" }),
+    /* @__PURE__ */ jsxs("form", { id: "seed", action: "/", method: "get", onSubmit: handleInitFormSubmit, style: { display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: genSeed, children: "Generate" }),
+      /* @__PURE__ */ jsx("input", { name: "password", type: "password", autoComplete: "new-password", placeholder: "Push generate to pick a seed", value: seedString, onChange: (e) => setSeedString(e.target.value) }),
+      /* @__PURE__ */ jsx("input", { name: "username", type: "text", autoComplete: "username", placeholder: "Choose an account name (not shared)", onChange: (e) => setUsername(e.target.value), required: true }),
+      /* @__PURE__ */ jsx("button", { type: "submit", disabled: !seedString || !username, children: "INIT" })
+    ] })
+  ] });
+}
+
+// src/react/statusBar.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function GlowingDot({ on }) {
+  const color = on ? "#01FF70" : "#AAAAAA";
+  const size = 6;
+  return /* @__PURE__ */ jsx2("div", { style: { width: size, height: size, borderRadius: "50%", boxShadow: `0 0 4px ${color}`, backgroundColor: color } });
+}
+function DotLabel({ on, label }) {
+  return /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "row", marginRight: 16, alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ jsx2(GlowingDot, { on }),
+    label
+  ] });
+}
+function ClientStatusBar({ state }) {
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      style: {
+        marginTop: 16,
+        borderRadius: 8,
+        padding: "8px 16px",
+        border: "1px solid grey",
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "space-around"
+      },
+      children: [
+        /* @__PURE__ */ jsx2(DotLabel, { on: state.hasSeed, label: "SEED" }),
+        /* @__PURE__ */ jsx2(DotLabel, { on: state.hasHost, label: "HOST" }),
+        /* @__PURE__ */ jsx2(DotLabel, { on: state.connected, label: "LINK" }),
+        /* @__PURE__ */ jsxs2("div", { style: { marginRight: 16 }, children: [
+          "\u21D1 ",
+          state.numUploads
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { children: [
+          "\u21D3 ",
+          state.numDownloads
+        ] })
+      ]
+    }
+  );
+}
 export {
+  ClientStatusBar,
   DiplomaticClient,
+  InitSeedView,
   StateManager,
   Verb,
   btoh,

package/dist/react/initSeedView.d.ts

@@ -0,0 +1,7 @@
+import type DiplomaticClient from "../client";
+interface IProps {
+    client: DiplomaticClient;
+    path: string;
+}
+export default function InitSeedView({ client, path }: IProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/statusBar.d.ts

@@ -0,0 +1,6 @@
+import type { IDiplomaticClientState } from "../types";
+interface IProps {
+    state: IDiplomaticClientState;
+}
+export default function ClientStatusBar({ state }: IProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/react/useClient.d.ts

@@ -0,0 +1,4 @@
+import type { IDiplomaticClientState } from "../types";
+import type DiplomaticClient from "../client";
+export declare function useClientState(client: DiplomaticClient): IDiplomaticClientState | undefined;
+export declare function useSyncOnResume(client: DiplomaticClient): void;

package/dist/react/useStateWatcher.d.ts

@@ -0,0 +1,2 @@
+import type { StateManager } from "../state";
+export default function useStateWatcher<T>(mgr: StateManager, opType: string, callback: () => T): T;

package/dist/state.d.ts

@@ -10,7 +10,6 @@ export declare class StateManager {
     on: (opType: string, listener: () => void) => void;
     off: (opType: string, listener: () => void) => void;
 }
-export declare function useStateWatcher<T>(mgr: StateManager, opType: string, callback: () => T): T;
 interface IApplier<T extends IOp> {
     check: (op: IOp) => op is T;
     apply: (op: T) => Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@interncom/diplomatic",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "type": "module",
   "description": "Secure sync layer",
   "main": "dist/index.mjs",