@cryptiklemur/lattice 0.0.0 → 1.2.0

package/client/src/components/settings/Appearance.tsx

@@ -1,151 +1,151 @@
-import { memo, useMemo, useCallback } from "react";
-import { useTheme } from "../../hooks/useTheme";
-import { Sun, Moon, Check } from "lucide-react";
-import type { ThemeEntry } from "../../themes/index";
-
-var SWATCH_KEYS = [
-  "base00", "base01", "base02", "base03",
-  "base04", "base05", "base06", "base07",
-  "base08", "base09", "base0A", "base0B",
-  "base0C", "base0D", "base0E", "base0F",
-] as const;
-
-var ThemeCard = memo(function ThemeCard({
-  entry,
-  active,
-  onSelect,
-}: {
-  entry: ThemeEntry;
-  active: boolean;
-  onSelect: (id: string) => void;
-}) {
-  var t = entry.theme;
-
-  function handleClick() {
-    onSelect(entry.id);
-  }
-
-  return (
-    <button
-      onClick={handleClick}
-      className={
-        "flex flex-col gap-2 p-3 sm:p-2.5 px-3 rounded-lg border cursor-pointer text-left transition-colors duration-[120ms] relative focus-visible:ring-2 focus-visible:ring-primary " +
-        (active
-          ? "border-primary bg-base-300 shadow-sm"
-          : "border-base-content/15 bg-base-300 hover:border-base-content/30")
-      }
-    >
-      {active && (
-        <div className="absolute top-1.5 right-1.5 w-3.5 h-3.5 rounded-full bg-primary flex items-center justify-center">
-          <Check size={8} className="text-primary-content" strokeWidth={1.8} />
-        </div>
-      )}
-
-      <div className="flex gap-[3px] flex-wrap w-[80px]">
-        {SWATCH_KEYS.map(function (key) {
-          return (
-            <div
-              key={key}
-              className="w-[10px] h-[10px] rounded-sm flex-shrink-0 ring-1 ring-base-content/10"
-              style={{ background: "#" + t[key] }}
-            />
-          );
-        })}
-      </div>
-
-      <div className="text-[12px] font-medium text-base-content">
-        {t.name}
-      </div>
-    </button>
-  );
-});
-
-function ThemeGroup({
-  label,
-  entries,
-  currentThemeId,
-  onSelect,
-}: {
-  label: string;
-  entries: ThemeEntry[];
-  currentThemeId: string;
-  onSelect: (id: string) => void;
-}) {
-  if (entries.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="mb-6">
-      <div className="text-[11px] font-mono font-bold tracking-[0.1em] uppercase text-base-content/40 mb-3">
-        {label}
-      </div>
-      <div className="grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-2">
-        {entries.map(function (entry) {
-          return (
-            <ThemeCard
-              key={entry.id}
-              entry={entry}
-              active={entry.id === currentThemeId}
-              onSelect={onSelect}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export function Appearance() {
-  var { mode, currentThemeId, toggleMode, setTheme, themes } = useTheme();
-
-  var darkThemes = useMemo(function () {
-    return themes.filter(function (e) { return e.theme.variant === "dark"; });
-  }, [themes]);
-
-  var lightThemes = useMemo(function () {
-    return themes.filter(function (e) { return e.theme.variant === "light"; });
-  }, [themes]);
-
-  var handleThemeSelect = useCallback(function (id: string) {
-    setTheme(id);
-  }, [setTheme]);
-
-  return (
-    <div className="py-2">
-      <div className="flex items-center justify-between mb-6">
-        <div className="text-[12px] font-semibold text-base-content/40">Color Mode</div>
-        <button
-          onClick={toggleMode}
-          className="btn btn-ghost btn-sm border border-base-content/20"
-        >
-          {mode === "dark" ? (
-            <>
-              <Sun size={12} />
-              Switch to Light
-            </>
-          ) : (
-            <>
-              <Moon size={12} />
-              Switch to Dark
-            </>
-          )}
-        </button>
-      </div>
-
-      <ThemeGroup
-        label="Dark Themes"
-        entries={darkThemes}
-        currentThemeId={currentThemeId}
-        onSelect={handleThemeSelect}
-      />
-
-      <ThemeGroup
-        label="Light Themes"
-        entries={lightThemes}
-        currentThemeId={currentThemeId}
-        onSelect={handleThemeSelect}
-      />
-    </div>
-  );
-}
+import { memo, useMemo, useCallback } from "react";
+import { useTheme } from "../../hooks/useTheme";
+import { Sun, Moon, Check } from "lucide-react";
+import type { ThemeEntry } from "../../themes/index";
+
+var SWATCH_KEYS = [
+  "base00", "base01", "base02", "base03",
+  "base04", "base05", "base06", "base07",
+  "base08", "base09", "base0A", "base0B",
+  "base0C", "base0D", "base0E", "base0F",
+] as const;
+
+var ThemeCard = memo(function ThemeCard({
+  entry,
+  active,
+  onSelect,
+}: {
+  entry: ThemeEntry;
+  active: boolean;
+  onSelect: (id: string) => void;
+}) {
+  var t = entry.theme;
+
+  function handleClick() {
+    onSelect(entry.id);
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className={
+        "flex flex-col gap-2 p-3 sm:p-2.5 px-3 rounded-lg border cursor-pointer text-left transition-colors duration-[120ms] relative focus-visible:ring-2 focus-visible:ring-primary " +
+        (active
+          ? "border-primary bg-base-300 shadow-sm"
+          : "border-base-content/15 bg-base-300 hover:border-base-content/30")
+      }
+    >
+      {active && (
+        <div className="absolute top-1.5 right-1.5 w-3.5 h-3.5 rounded-full bg-primary flex items-center justify-center">
+          <Check size={8} className="text-primary-content" strokeWidth={1.8} />
+        </div>
+      )}
+
+      <div className="flex gap-[3px] flex-wrap w-[80px]">
+        {SWATCH_KEYS.map(function (key) {
+          return (
+            <div
+              key={key}
+              className="w-[10px] h-[10px] rounded-sm flex-shrink-0 ring-1 ring-base-content/10"
+              style={{ background: "#" + t[key] }}
+            />
+          );
+        })}
+      </div>
+
+      <div className="text-[12px] font-medium text-base-content">
+        {t.name}
+      </div>
+    </button>
+  );
+});
+
+function ThemeGroup({
+  label,
+  entries,
+  currentThemeId,
+  onSelect,
+}: {
+  label: string;
+  entries: ThemeEntry[];
+  currentThemeId: string;
+  onSelect: (id: string) => void;
+}) {
+  if (entries.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="mb-6">
+      <div className="text-[11px] font-mono font-bold tracking-[0.1em] uppercase text-base-content/40 mb-3">
+        {label}
+      </div>
+      <div className="grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-2">
+        {entries.map(function (entry) {
+          return (
+            <ThemeCard
+              key={entry.id}
+              entry={entry}
+              active={entry.id === currentThemeId}
+              onSelect={onSelect}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function Appearance() {
+  var { mode, currentThemeId, toggleMode, setTheme, themes } = useTheme();
+
+  var darkThemes = useMemo(function () {
+    return themes.filter(function (e) { return e.theme.variant === "dark"; });
+  }, [themes]);
+
+  var lightThemes = useMemo(function () {
+    return themes.filter(function (e) { return e.theme.variant === "light"; });
+  }, [themes]);
+
+  var handleThemeSelect = useCallback(function (id: string) {
+    setTheme(id);
+  }, [setTheme]);
+
+  return (
+    <div className="py-2">
+      <div className="flex items-center justify-between mb-6">
+        <div className="text-[12px] font-semibold text-base-content/40">Color Mode</div>
+        <button
+          onClick={toggleMode}
+          className="btn btn-ghost btn-sm border border-base-content/20"
+        >
+          {mode === "dark" ? (
+            <>
+              <Sun size={12} />
+              Switch to Light
+            </>
+          ) : (
+            <>
+              <Moon size={12} />
+              Switch to Dark
+            </>
+          )}
+        </button>
+      </div>
+
+      <ThemeGroup
+        label="Dark Themes"
+        entries={darkThemes}
+        currentThemeId={currentThemeId}
+        onSelect={handleThemeSelect}
+      />
+
+      <ThemeGroup
+        label="Light Themes"
+        entries={lightThemes}
+        currentThemeId={currentThemeId}
+        onSelect={handleThemeSelect}
+      />
+    </div>
+  );
+}

package/client/src/components/settings/MeshStatus.tsx

@@ -1,145 +1,145 @@
-import { useState } from "react";
-import { Plus, CircleDot, Circle } from "lucide-react";
-import { useWebSocket } from "../../hooks/useWebSocket";
-import { useMesh } from "../../hooks/useMesh";
-import { PairingDialog } from "../mesh/PairingDialog";
-import type { NodeInfo } from "@lattice/shared";
-
-interface NodeRowProps {
-  node: NodeInfo;
-  onUnpair: (nodeId: string) => void;
-}
-
-function NodeRow(props: NodeRowProps) {
-  var [confirming, setConfirming] = useState(false);
-
-  function handleUnpair() {
-    if (!confirming) {
-      setConfirming(true);
-      return;
-    }
-    props.onUnpair(props.node.id);
-    setConfirming(false);
-  }
-
-  return (
-    <div className="flex items-center gap-3 p-3 sm:p-2.5 px-3.5 rounded-lg border border-base-content/15 bg-base-300 mb-2">
-      {props.node.online ? (
-        <CircleDot size={10} className="text-success flex-shrink-0" aria-label="Online" />
-      ) : (
-        <Circle size={10} className="text-base-content/30 flex-shrink-0" aria-label="Offline" />
-      )}
-
-      <div className="flex-1 min-w-0">
-        <div className="text-[13px] font-medium text-base-content truncate">
-          {props.node.name}
-          {props.node.isLocal && (
-            <span className="ml-1.5 text-[10px] font-semibold text-primary uppercase tracking-[0.06em]">
-              local
-            </span>
-          )}
-        </div>
-        <div className="text-[11px] text-base-content/40 truncate">
-          {props.node.address}:{props.node.port}
-          {!props.node.online && (
-            <span className="ml-2 text-base-content/30 italic">offline</span>
-          )}
-        </div>
-      </div>
-
-      {!props.node.isLocal && (
-        <div className="flex gap-1.5 flex-shrink-0">
-          {confirming ? (
-            <>
-              <button
-                onClick={handleUnpair}
-                className="btn btn-error btn-xs"
-              >
-                Confirm
-              </button>
-              <button
-                onClick={function () { setConfirming(false); }}
-                className="btn btn-ghost btn-xs"
-              >
-                Cancel
-              </button>
-            </>
-          ) : (
-            <button
-              onClick={handleUnpair}
-              className="btn btn-ghost btn-xs border border-base-content/20 hover:btn-error hover:border-error"
-            >
-              Unpair
-            </button>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function MeshStatus() {
-  var ws = useWebSocket();
-  var { nodes } = useMesh();
-  var [pairingOpen, setPairingOpen] = useState(false);
-
-  function handleUnpair(nodeId: string) {
-    ws.send({ type: "mesh:unpair", nodeId });
-  }
-
-  var localNode = nodes.find(function (n) { return n.isLocal; });
-  var remoteNodes = nodes.filter(function (n) { return !n.isLocal; });
-
-  return (
-    <div className="py-2">
-      <div className="mb-5">
-        <div className="text-[12px] font-semibold text-base-content/40 mb-2 tracking-[0.06em]">
-          This Node
-        </div>
-        {localNode ? (
-          <NodeRow node={localNode} onUnpair={handleUnpair} />
-        ) : (
-          <div className="text-[12px] text-base-content/40 italic">
-            Waiting for node info...
-          </div>
-        )}
-      </div>
-
-      <div className="mb-5">
-        <div className="flex items-center justify-between mb-2">
-          <div className="text-[12px] font-semibold text-base-content/40 tracking-[0.06em]">
-            Paired Nodes
-          </div>
-          <button
-            onClick={function () { setPairingOpen(true); }}
-            className="btn btn-primary btn-sm sm:btn-xs gap-1"
-          >
-            <Plus size={10} />
-            Pair New Node
-          </button>
-        </div>
-
-        {remoteNodes.length === 0 ? (
-          <div className="p-4 rounded-lg border border-dashed border-base-content/15 text-center text-[12px] text-base-content/40 italic">
-            No paired nodes yet.
-          </div>
-        ) : (
-          remoteNodes.map(function (node) {
-            return (
-              <NodeRow
-                key={node.id}
-                node={node}
-                onUnpair={handleUnpair}
-              />
-            );
-          })
-        )}
-      </div>
-
-      <PairingDialog
-        isOpen={pairingOpen}
-        onClose={function () { setPairingOpen(false); }}
-      />
-    </div>
-  );
-}
+import { useState } from "react";
+import { Plus, CircleDot, Circle } from "lucide-react";
+import { useWebSocket } from "../../hooks/useWebSocket";
+import { useMesh } from "../../hooks/useMesh";
+import { PairingDialog } from "../mesh/PairingDialog";
+import type { NodeInfo } from "@lattice/shared";
+
+interface NodeRowProps {
+  node: NodeInfo;
+  onUnpair: (nodeId: string) => void;
+}
+
+function NodeRow(props: NodeRowProps) {
+  var [confirming, setConfirming] = useState(false);
+
+  function handleUnpair() {
+    if (!confirming) {
+      setConfirming(true);
+      return;
+    }
+    props.onUnpair(props.node.id);
+    setConfirming(false);
+  }
+
+  return (
+    <div className="flex items-center gap-3 p-3 sm:p-2.5 px-3.5 rounded-lg border border-base-content/15 bg-base-300 mb-2">
+      {props.node.online ? (
+        <CircleDot size={10} className="text-success flex-shrink-0" aria-label="Online" />
+      ) : (
+        <Circle size={10} className="text-base-content/30 flex-shrink-0" aria-label="Offline" />
+      )}
+
+      <div className="flex-1 min-w-0">
+        <div className="text-[13px] font-medium text-base-content truncate">
+          {props.node.name}
+          {props.node.isLocal && (
+            <span className="ml-1.5 text-[10px] font-semibold text-primary uppercase tracking-[0.06em]">
+              local
+            </span>
+          )}
+        </div>
+        <div className="text-[11px] text-base-content/40 truncate">
+          {props.node.address}:{props.node.port}
+          {!props.node.online && (
+            <span className="ml-2 text-base-content/30 italic">offline</span>
+          )}
+        </div>
+      </div>
+
+      {!props.node.isLocal && (
+        <div className="flex gap-1.5 flex-shrink-0">
+          {confirming ? (
+            <>
+              <button
+                onClick={handleUnpair}
+                className="btn btn-error btn-xs"
+              >
+                Confirm
+              </button>
+              <button
+                onClick={function () { setConfirming(false); }}
+                className="btn btn-ghost btn-xs"
+              >
+                Cancel
+              </button>
+            </>
+          ) : (
+            <button
+              onClick={handleUnpair}
+              className="btn btn-ghost btn-xs border border-base-content/20 hover:btn-error hover:border-error"
+            >
+              Unpair
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function MeshStatus() {
+  var ws = useWebSocket();
+  var { nodes } = useMesh();
+  var [pairingOpen, setPairingOpen] = useState(false);
+
+  function handleUnpair(nodeId: string) {
+    ws.send({ type: "mesh:unpair", nodeId });
+  }
+
+  var localNode = nodes.find(function (n) { return n.isLocal; });
+  var remoteNodes = nodes.filter(function (n) { return !n.isLocal; });
+
+  return (
+    <div className="py-2">
+      <div className="mb-5">
+        <div className="text-[12px] font-semibold text-base-content/40 mb-2 tracking-[0.06em]">
+          This Node
+        </div>
+        {localNode ? (
+          <NodeRow node={localNode} onUnpair={handleUnpair} />
+        ) : (
+          <div className="text-[12px] text-base-content/40 italic">
+            Waiting for node info...
+          </div>
+        )}
+      </div>
+
+      <div className="mb-5">
+        <div className="flex items-center justify-between mb-2">
+          <div className="text-[12px] font-semibold text-base-content/40 tracking-[0.06em]">
+            Paired Nodes
+          </div>
+          <button
+            onClick={function () { setPairingOpen(true); }}
+            className="btn btn-primary btn-sm sm:btn-xs gap-1"
+          >
+            <Plus size={10} />
+            Pair New Node
+          </button>
+        </div>
+
+        {remoteNodes.length === 0 ? (
+          <div className="p-4 rounded-lg border border-dashed border-base-content/15 text-center text-[12px] text-base-content/40 italic">
+            No paired nodes yet.
+          </div>
+        ) : (
+          remoteNodes.map(function (node) {
+            return (
+              <NodeRow
+                key={node.id}
+                node={node}
+                onUnpair={handleUnpair}
+              />
+            );
+          })
+        )}
+      </div>
+
+      <PairingDialog
+        isOpen={pairingOpen}
+        onClose={function () { setPairingOpen(false); }}
+      />
+    </div>
+  );
+}