@cryptiklemur/lattice 4.0.2 → 5.0.0

package/src/client/hooks/useEditorConfig.ts

@@ -1,28 +0,0 @@
-import { useEffect, useState } from "react";
-import { useWebSocket } from "./useWebSocket";
-import type { ServerMessage, SettingsDataMessage } from "#shared";
-
-export function useEditorConfig() {
-  var ws = useWebSocket();
-  var [editorType, setEditorType] = useState("vscode");
-  var [wslDistro, setWslDistro] = useState<string | undefined>(undefined);
-
-  useEffect(function () {
-    function handleSettings(msg: ServerMessage) {
-      if (msg.type !== "settings:data") return;
-      var data = msg as SettingsDataMessage;
-      var cfg = data.config as any;
-      if (cfg.editor?.type) {
-        setEditorType(cfg.editor.type);
-      }
-      if (data.wslDistro) {
-        setWslDistro(data.wslDistro);
-      }
-    }
-    ws.subscribe("settings:data", handleSettings);
-    ws.send({ type: "settings:get" });
-    return function () { ws.unsubscribe("settings:data", handleSettings); };
-  }, []);
-
-  return { editorType: editorType, wslDistro: wslDistro };
-}

package/src/client/hooks/useFocusTrap.ts

@@ -1,74 +0,0 @@
-import { useEffect, useRef } from "react";
-
-var FOCUSABLE_SELECTOR = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  "[tabindex]:not([tabindex='-1'])",
-].join(", ");
-
-export function useFocusTrap(
-  containerRef: React.RefObject<HTMLElement | null>,
-  onClose: () => void,
-  active: boolean = true,
-): void {
-  var previouslyFocusedRef = useRef<HTMLElement | null>(null);
-  var onCloseRef = useRef(onClose);
-  onCloseRef.current = onClose;
-
-  useEffect(function () {
-    if (!active) return;
-
-    var container = containerRef.current;
-    if (!container) return;
-
-    previouslyFocusedRef.current = document.activeElement as HTMLElement | null;
-
-    var focusable = container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
-    if (focusable.length > 0) {
-      focusable[0].focus();
-    }
-
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") {
-        onCloseRef.current();
-        return;
-      }
-
-      if (e.key !== "Tab") return;
-
-      var currentContainer = containerRef.current;
-      if (!currentContainer) return;
-
-      var elements = currentContainer.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
-      if (elements.length === 0) return;
-
-      var first = elements[0];
-      var last = elements[elements.length - 1];
-
-      if (e.shiftKey) {
-        if (document.activeElement === first) {
-          e.preventDefault();
-          last.focus();
-        }
-      } else {
-        if (document.activeElement === last) {
-          e.preventDefault();
-          first.focus();
-        }
-      }
-    }
-
-    var el = container;
-    el.addEventListener("keydown", handleKeyDown);
-
-    return function () {
-      el.removeEventListener("keydown", handleKeyDown);
-      if (previouslyFocusedRef.current && typeof previouslyFocusedRef.current.focus === "function") {
-        previouslyFocusedRef.current.focus();
-      }
-    };
-  }, [containerRef, active]);
-}

package/src/client/hooks/useIdleDetection.ts

@@ -1,50 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-var IDLE_TIMEOUT = 60 * 1000;
-
-export function useIdleDetection(): boolean {
-  var [isIdle, setIsIdle] = useState(false);
-  var timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(function () {
-    var lastReset = 0;
-
-    function resetTimer() {
-      var now = Date.now();
-      if (now - lastReset < 500) return;
-      lastReset = now;
-
-      if (timerRef.current) clearTimeout(timerRef.current);
-      setIsIdle(false);
-      timerRef.current = setTimeout(function () {
-        setIsIdle(true);
-      }, IDLE_TIMEOUT);
-    }
-
-    function handleVisibilityChange() {
-      if (document.hidden) {
-        setIsIdle(true);
-      } else {
-        resetTimer();
-      }
-    }
-
-    var events = ["mousemove", "keydown", "mousedown", "touchstart", "scroll"];
-    events.forEach(function (event) {
-      document.addEventListener(event, resetTimer, { passive: true });
-    });
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-
-    resetTimer();
-
-    return function () {
-      if (timerRef.current) clearTimeout(timerRef.current);
-      events.forEach(function (event) {
-        document.removeEventListener(event, resetTimer);
-      });
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
-  }, []);
-
-  return isIdle;
-}

package/src/client/hooks/useInstallPrompt.ts

@@ -1,53 +0,0 @@
-import { useEffect, useState } from "react";
-
-interface BeforeInstallPromptEvent extends Event {
-  prompt(): Promise<void>;
-  userChoice: Promise<{ outcome: "accepted" | "dismissed" }>;
-}
-
-export function useInstallPrompt() {
-  var [promptEvent, setPromptEvent] = useState<BeforeInstallPromptEvent | null>(null);
-  var [isInstalled, setIsInstalled] = useState(false);
-  var [dismissed, setDismissed] = useState(function () {
-    return localStorage.getItem("lattice-install-dismissed") === "1";
-  });
-
-  useEffect(function () {
-    if (window.matchMedia("(display-mode: standalone)").matches) {
-      setIsInstalled(true);
-      return;
-    }
-
-    function handleBeforeInstall(e: Event) {
-      e.preventDefault();
-      setPromptEvent(e as BeforeInstallPromptEvent);
-    }
-
-    window.addEventListener("beforeinstallprompt", handleBeforeInstall);
-    return function () {
-      window.removeEventListener("beforeinstallprompt", handleBeforeInstall);
-    };
-  }, []);
-
-  function install() {
-    if (!promptEvent) return;
-    promptEvent.prompt();
-    promptEvent.userChoice.then(function (choice) {
-      if (choice.outcome === "dismissed") {
-        setDismissed(true);
-        localStorage.setItem("lattice-install-dismissed", "1");
-      }
-      setPromptEvent(null);
-    });
-  }
-
-  function dismiss() {
-    setDismissed(true);
-    localStorage.setItem("lattice-install-dismissed", "1");
-    setPromptEvent(null);
-  }
-
-  var canInstall = !!promptEvent && !isInstalled && !dismissed;
-
-  return { canInstall: canInstall, install: install, dismiss: dismiss };
-}

package/src/client/hooks/useMesh.ts

@@ -1,89 +0,0 @@
-import { useEffect, useRef } from "react";
-import { useStore } from "@tanstack/react-store";
-import type { ServerMessage, NodeInfo } from "#shared";
-import { useWebSocket } from "./useWebSocket";
-import {
-  getMeshStore,
-  setNodes,
-  setNodeOnline,
-  setNodeOffline,
-  addOrUpdateNode,
-  setSelectedNodeId,
-  setInvite,
-} from "../stores/mesh";
-
-export interface UseMeshResult {
-  nodes: NodeInfo[];
-  activeNodeId: string | null;
-  setActiveNodeId: (id: string | null) => void;
-  generateInvite: () => void;
-  inviteCode: string | null;
-  inviteQr: string | null;
-}
-
-export function useMesh(): UseMeshResult {
-  var ws = useWebSocket();
-  var store = getMeshStore();
-
-  var nodes = useStore(store, function (s) { return s.nodes; });
-  var activeNodeId = useStore(store, function (s) { return s.selectedNodeId; });
-  var inviteCode = useStore(store, function (s) { return s.inviteCode; });
-  var inviteQr = useStore(store, function (s) { return s.inviteQr; });
-
-  var handleRef = useRef<(msg: ServerMessage) => void>(function () {});
-
-  useEffect(function () {
-    handleRef.current = function (msg: ServerMessage) {
-      if (msg.type === "mesh:nodes") {
-        setNodes(msg.nodes);
-      } else if (msg.type === "mesh:node_online") {
-        setNodeOnline(msg.nodeId);
-      } else if (msg.type === "mesh:node_offline") {
-        setNodeOffline(msg.nodeId);
-      } else if (msg.type === "mesh:paired") {
-        addOrUpdateNode(msg.node);
-      } else if (msg.type === "mesh:invite_code") {
-        setInvite(msg.code, msg.qrDataUrl);
-      }
-    };
-  });
-
-  useEffect(function () {
-    function handler(msg: ServerMessage) {
-      handleRef.current(msg);
-    }
-
-    ws.subscribe("mesh:nodes", handler);
-    ws.subscribe("mesh:node_online", handler);
-    ws.subscribe("mesh:node_offline", handler);
-    ws.subscribe("mesh:paired", handler);
-    ws.subscribe("mesh:invite_code", handler);
-
-    return function () {
-      ws.unsubscribe("mesh:nodes", handler);
-      ws.unsubscribe("mesh:node_online", handler);
-      ws.unsubscribe("mesh:node_offline", handler);
-      ws.unsubscribe("mesh:paired", handler);
-      ws.unsubscribe("mesh:invite_code", handler);
-    };
-  }, [ws]);
-
-  useEffect(function () {
-    if (ws.status === "connected") {
-      ws.send({ type: "settings:get" });
-    }
-  }, [ws.status, ws]);
-
-  function generateInvite() {
-    ws.send({ type: "mesh:generate_invite" });
-  }
-
-  return {
-    nodes,
-    activeNodeId,
-    setActiveNodeId: setSelectedNodeId,
-    generateInvite,
-    inviteCode,
-    inviteQr,
-  };
-}

package/src/client/hooks/useNotifications.ts

@@ -1,54 +0,0 @@
-import { useState } from "react";
-
-export function useNotificationPreference() {
-  var [enabled, setEnabled] = useState(function () {
-    return localStorage.getItem("lattice-notifications-enabled") === "1";
-  });
-
-  var permission = typeof Notification !== "undefined" ? Notification.permission : "denied";
-
-  function toggle() {
-    if (!enabled) {
-      if (permission === "default") {
-        Notification.requestPermission().then(function (result) {
-          if (result === "granted") {
-            setEnabled(true);
-            localStorage.setItem("lattice-notifications-enabled", "1");
-          }
-        });
-      } else if (permission === "granted") {
-        setEnabled(true);
-        localStorage.setItem("lattice-notifications-enabled", "1");
-      }
-    } else {
-      setEnabled(false);
-      localStorage.setItem("lattice-notifications-enabled", "0");
-    }
-  }
-
-  return { enabled: enabled, permission: permission, toggle: toggle };
-}
-
-export function sendNotification(title: string, body: string, tag?: string, onClick?: () => void): void {
-  var allowed = localStorage.getItem("lattice-notifications-enabled") === "1";
-  if (!allowed) return;
-  if (typeof Notification === "undefined" || Notification.permission !== "granted") return;
-
-  var notification = new Notification(title, {
-    body: body,
-    icon: "/icons/icon-192.svg",
-    tag: tag || "lattice",
-    silent: false,
-  });
-
-  var timer = setTimeout(function () {
-    notification.close();
-  }, 10000);
-
-  notification.onclick = function () {
-    clearTimeout(timer);
-    window.focus();
-    notification.close();
-    if (onClick) onClick();
-  };
-}

package/src/client/hooks/useOnline.ts

@@ -1,6 +0,0 @@
-import { useWebSocket } from "./useWebSocket";
-
-export function useOnline(): boolean {
-  var ws = useWebSocket();
-  return ws.status === "connected";
-}

package/src/client/hooks/useProjectSettings.ts

@@ -1,56 +0,0 @@
-import { useState, useEffect } from "react";
-import { useWebSocket } from "./useWebSocket";
-import type { ServerMessage, ProjectSettings, ProjectSettingsDataMessage, ProjectSettingsErrorMessage } from "#shared";
-
-export function useProjectSettings(projectSlug: string | null) {
-  var { status, send, subscribe, unsubscribe } = useWebSocket();
-  var [settings, setSettings] = useState<ProjectSettings | null>(null);
-  var [loading, setLoading] = useState(true);
-  var [error, setError] = useState<string | null>(null);
-
-  useEffect(function () {
-    if (!projectSlug) return;
-
-    function handleData(msg: ServerMessage) {
-      if (msg.type !== "project-settings:data") return;
-      var data = msg as ProjectSettingsDataMessage;
-      if (data.projectSlug !== projectSlug) return;
-      setSettings(data.settings);
-      setLoading(false);
-      setError(null);
-    }
-
-    function handleError(msg: ServerMessage) {
-      if (msg.type !== "project-settings:error") return;
-      var data = msg as ProjectSettingsErrorMessage;
-      if (data.projectSlug !== projectSlug) return;
-      setError(data.message);
-      setLoading(false);
-    }
-
-    subscribe("project-settings:data", handleData);
-    subscribe("project-settings:error", handleError);
-
-    if (status === "connected") {
-      setLoading(true);
-      send({ type: "project-settings:get", projectSlug: projectSlug });
-    }
-
-    return function () {
-      unsubscribe("project-settings:data", handleData);
-      unsubscribe("project-settings:error", handleError);
-    };
-  }, [projectSlug, status]);
-
-  function updateSection(section: string, data: Record<string, unknown>) {
-    if (!projectSlug) return;
-    send({
-      type: "project-settings:update",
-      projectSlug: projectSlug,
-      section: section,
-      settings: data,
-    });
-  }
-
-  return { settings, loading, error, updateSection };
-}

package/src/client/hooks/useProjects.ts

@@ -1,98 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import { useStore } from "@tanstack/react-store";
-import type { ProjectInfo } from "#shared";
-import type { ProjectsListMessage } from "#shared";
-import type { ServerMessage } from "#shared";
-import { useWebSocket } from "./useWebSocket";
-import { setActiveProjectSlug, getSidebarStore } from "../stores/sidebar";
-
-export interface UseProjectsResult {
-  projects: ProjectInfo[];
-  activeProject: ProjectInfo | null;
-  setActiveProject: (project: ProjectInfo | null) => void;
-}
-
-function loadCachedProjects(): ProjectInfo[] {
-  try {
-    var raw = localStorage.getItem("lattice:projects");
-    if (raw) return JSON.parse(raw);
-  } catch {}
-  return [];
-}
-
-function cacheProjects(projects: ProjectInfo[]): void {
-  try {
-    localStorage.setItem("lattice:projects", JSON.stringify(projects));
-  } catch {}
-}
-
-export function useProjects(): UseProjectsResult {
-  var ws = useWebSocket();
-  var [projects, setProjects] = useState<ProjectInfo[]>(loadCachedProjects);
-  var activeProjectSlug = useStore(getSidebarStore(), function (state) { return state.activeProjectSlug; });
-
-  var handleRef = useRef<(msg: ServerMessage) => void>(function () {});
-
-  useEffect(function () {
-    handleRef.current = function (msg: ServerMessage) {
-      if (msg.type === "projects:list") {
-        var incoming = (msg as ProjectsListMessage).projects;
-        setProjects(function (prev) {
-          var incomingKeys = new Set(incoming.map(function (p) { return p.slug + "@" + p.nodeId; }));
-          var kept = prev.filter(function (p) {
-            if (!p.isRemote) return false;
-            return !incomingKeys.has(p.slug + "@" + p.nodeId);
-          });
-          for (var i = 0; i < kept.length; i++) {
-            (kept[i] as any).online = false;
-          }
-          var merged = incoming.concat(kept);
-          cacheProjects(merged);
-          return merged;
-        });
-        var storeState = getSidebarStore().state;
-        var currentSlug = storeState.activeProjectSlug;
-        if (currentSlug !== null) {
-          var found = incoming.find(function (p: typeof incoming[number]) { return p.slug === currentSlug; });
-          if (!found) {
-            setProjects(function (current) {
-              var stillExists = current.find(function (p) { return p.slug === currentSlug; });
-              if (!stillExists && current.length > 0) {
-                setActiveProjectSlug(current[0].slug);
-              }
-              return current;
-            });
-          }
-        }
-      }
-    };
-  });
-
-  useEffect(function () {
-    function handler(msg: ServerMessage) {
-      handleRef.current(msg);
-    }
-
-    ws.subscribe("projects:list", handler);
-
-    return function () {
-      ws.unsubscribe("projects:list", handler);
-    };
-  }, [ws]);
-
-  useEffect(function () {
-    if (ws.status === "connected") {
-      ws.send({ type: "settings:get" });
-    }
-  }, [ws.status, ws]);
-
-  var activeProject = activeProjectSlug !== null
-    ? (projects.find(function (p) { return p.slug === activeProjectSlug; }) ?? null)
-    : null;
-
-  function setActiveProject(project: ProjectInfo | null): void {
-    setActiveProjectSlug(project ? project.slug : null);
-  }
-
-  return { projects, activeProject, setActiveProject };
-}

package/src/client/hooks/usePushNotifications.ts

@@ -1,92 +0,0 @@
-import { useEffect, useState } from "react";
-
-function urlBase64ToUint8Array(base64String: string): Uint8Array {
-  var padding = "=".repeat((4 - (base64String.length % 4)) % 4);
-  var base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");
-  var rawData = window.atob(base64);
-  var outputArray = new Uint8Array(rawData.length);
-  for (var i = 0; i < rawData.length; ++i) {
-    outputArray[i] = rawData.charCodeAt(i);
-  }
-  return outputArray;
-}
-
-export type PushStatus = "unsupported" | "denied" | "prompt" | "subscribed" | "unsubscribed";
-
-export function usePushNotifications() {
-  var [status, setStatus] = useState<PushStatus>("unsupported");
-
-  useEffect(function () {
-    if (!("serviceWorker" in navigator) || !("PushManager" in window)) {
-      setStatus("unsupported");
-      return;
-    }
-
-    if (Notification.permission === "denied") {
-      setStatus("denied");
-      return;
-    }
-
-    navigator.serviceWorker.getRegistration("/sw-push.js").then(function (reg) {
-      if (!reg) {
-        setStatus("unsubscribed");
-        return;
-      }
-      reg.pushManager.getSubscription().then(function (sub) {
-        setStatus(sub ? "subscribed" : "unsubscribed");
-      });
-    });
-  }, []);
-
-  async function subscribe(): Promise<boolean> {
-    if (!("serviceWorker" in navigator) || !("PushManager" in window)) return false;
-
-    try {
-      var permission = await Notification.requestPermission();
-      if (permission !== "granted") {
-        setStatus("denied");
-        return false;
-      }
-
-      var reg = await navigator.serviceWorker.register("/sw-push.js", { scope: "/" });
-      await navigator.serviceWorker.ready;
-
-      var response = await fetch("/api/vapid-public-key");
-      var data = await response.json() as { publicKey: string };
-
-      var subscription = await reg.pushManager.subscribe({
-        userVisibleOnly: true,
-        applicationServerKey: urlBase64ToUint8Array(data.publicKey) as BufferSource,
-      });
-
-      await fetch("/api/push-subscribe", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify(subscription.toJSON()),
-      });
-
-      setStatus("subscribed");
-      return true;
-    } catch (err) {
-      console.error("Push subscription failed:", err);
-      return false;
-    }
-  }
-
-  async function unsubscribe(): Promise<void> {
-    try {
-      var reg = await navigator.serviceWorker.getRegistration("/sw-push.js");
-      if (reg) {
-        var sub = await reg.pushManager.getSubscription();
-        if (sub) {
-          await sub.unsubscribe();
-        }
-      }
-      setStatus("unsubscribed");
-    } catch (err) {
-      console.error("Push unsubscribe failed:", err);
-    }
-  }
-
-  return { status, subscribe, unsubscribe };
-}

package/src/client/hooks/useSaveState.ts

@@ -1,65 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-
-export type SaveState = "idle" | "saved" | "error";
-
-export interface UseSaveStateReturn {
-  dirty: boolean;
-  saving: boolean;
-  savingRef: React.RefObject<boolean>;
-  saveState: SaveState;
-  markDirty: () => void;
-  startSave: () => void;
-  confirmSave: () => void;
-  resetFromServer: () => void;
-}
-
-export function useSaveState(): UseSaveStateReturn {
-  var [dirty, setDirty] = useState(false);
-  var [saving, setSaving] = useState(false);
-  var [saveState, setSaveState] = useState<SaveState>("idle");
-  var saveTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
-  var savingRef = useRef(false);
-
-  useEffect(function () {
-    return function () {
-      if (saveTimeout.current) clearTimeout(saveTimeout.current);
-    };
-  }, []);
-
-  function markDirty() {
-    setDirty(true);
-    setSaveState("idle");
-  }
-
-  function startSave() {
-    setSaving(true);
-    savingRef.current = true;
-    setSaveState("idle");
-
-    if (saveTimeout.current) clearTimeout(saveTimeout.current);
-    saveTimeout.current = setTimeout(function () {
-      setSaving(false);
-      savingRef.current = false;
-      setSaveState("error");
-      setTimeout(function () { setSaveState("idle"); }, 3000);
-    }, 5000);
-  }
-
-  function confirmSave() {
-    setSaving(false);
-    savingRef.current = false;
-    setSaveState("saved");
-    setDirty(false);
-    if (saveTimeout.current) clearTimeout(saveTimeout.current);
-    saveTimeout.current = setTimeout(function () { setSaveState("idle"); }, 1800);
-  }
-
-  function resetFromServer() {
-    setDirty(false);
-    setSaveState("idle");
-    setSaving(false);
-    savingRef.current = false;
-  }
-
-  return { dirty, saving, savingRef, saveState, markDirty, startSave, confirmSave, resetFromServer };
-}