@cryptiklemur/lattice 0.0.0

package/client/src/components/ui/ErrorBoundary.tsx

@@ -0,0 +1,56 @@
+import { Component } from "react";
+import type { ReactNode, ErrorInfo } from "react";
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error("[lattice] Render error:", error, info.componentStack);
+  }
+
+  handleReload() {
+    window.location.reload();
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+      return (
+        <div className="min-h-screen bg-base-100 flex items-center justify-center">
+          <div className="text-center max-w-[400px] p-8">
+            <h2 className="text-[20px] font-semibold text-error mb-3">Something went wrong</h2>
+            <p className="text-[14px] text-base-content/60 mb-5">
+              {this.state.error?.message || "An unexpected error occurred."}
+            </p>
+            <button
+              onClick={this.handleReload}
+              className="btn btn-primary btn-sm"
+            >
+              Reload
+            </button>
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

package/client/src/components/ui/IconPicker.tsx

@@ -0,0 +1,209 @@
+import { useState, useMemo } from "react";
+import { icons } from "lucide-react";
+import type { ProjectIcon } from "@lattice/shared";
+
+type Tab = "lucide" | "emoji" | "text" | "upload";
+
+interface IconPickerProps {
+  value?: ProjectIcon;
+  onChange: (icon: ProjectIcon) => void;
+}
+
+function renderPreview(value?: ProjectIcon) {
+  if (!value) {
+    return (
+      <div className="w-8 h-8 rounded-lg bg-base-300 border border-base-content/15 flex items-center justify-center text-base-content/30 text-[11px]">
+        ?
+      </div>
+    );
+  }
+
+  if (value.type === "lucide") {
+    var LucideIcon = icons[value.name as keyof typeof icons];
+    if (!LucideIcon) return null;
+    return (
+      <div className="w-8 h-8 rounded-lg bg-base-300 border border-base-content/15 flex items-center justify-center text-base-content">
+        <LucideIcon size={18} />
+      </div>
+    );
+  }
+
+  if (value.type === "emoji") {
+    return (
+      <div className="w-8 h-8 rounded-lg bg-base-300 border border-base-content/15 flex items-center justify-center text-[18px]">
+        {value.value}
+      </div>
+    );
+  }
+
+  if (value.type === "text") {
+    return (
+      <div
+        className="w-8 h-8 rounded-lg bg-base-300 border border-base-content/15 flex items-center justify-center text-[14px] font-bold"
+        style={value.color ? { color: value.color } : undefined}
+      >
+        {value.value}
+      </div>
+    );
+  }
+
+  if (value.type === "image") {
+    return (
+      <img src={value.path} alt="icon" className="w-8 h-8 rounded-lg object-cover border border-base-content/15" />
+    );
+  }
+
+  return null;
+}
+
+export function IconPicker({ value, onChange }: IconPickerProps) {
+  var [tab, setTab] = useState<Tab>(value?.type === "emoji" ? "emoji" : value?.type === "text" ? "text" : value?.type === "image" ? "upload" : "lucide");
+  var [search, setSearch] = useState("");
+  var [emojiValue, setEmojiValue] = useState(value?.type === "emoji" ? value.value : "");
+  var [textValue, setTextValue] = useState(value?.type === "text" ? value.value : "");
+  var [textColor, setTextColor] = useState(value?.type === "text" ? (value.color || "#ffffff") : "#ffffff");
+
+  var iconNames = useMemo(function () {
+    var allNames = Object.keys(icons);
+    if (!search.trim()) return allNames.slice(0, 60);
+    var term = search.toLowerCase();
+    return allNames.filter(function (name) {
+      return name.toLowerCase().includes(term);
+    }).slice(0, 60);
+  }, [search]);
+
+  var tabs: { id: Tab; label: string }[] = [
+    { id: "lucide", label: "Lucide" },
+    { id: "emoji", label: "Emoji" },
+    { id: "text", label: "Text" },
+    { id: "upload", label: "Upload" },
+  ];
+
+  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    var file = e.target.files?.[0];
+    if (!file) return;
+    var reader = new FileReader();
+    reader.onload = function (ev) {
+      var dataUrl = ev.target?.result as string;
+      onChange({ type: "image", path: dataUrl });
+    };
+    reader.readAsDataURL(file);
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-3">
+        {renderPreview(value)}
+        <span className="text-[11px] text-base-content/40">Current icon</span>
+      </div>
+
+      <div className="flex gap-1">
+        {tabs.map(function (t) {
+          return (
+            <button
+              key={t.id}
+              type="button"
+              onClick={function () { setTab(t.id); }}
+              className={"btn btn-xs " + (tab === t.id ? "btn-primary" : "btn-ghost")}
+            >
+              {t.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {tab === "lucide" && (
+        <div className="space-y-2">
+          <input
+            type="text"
+            value={search}
+            onChange={function (e) { setSearch(e.target.value); }}
+            placeholder="Search icons..."
+            className="w-full h-8 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[12px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+          />
+          <div className="grid grid-cols-10 gap-1 max-h-48 overflow-y-auto">
+            {iconNames.map(function (name) {
+              var Icon = icons[name as keyof typeof icons];
+              var selected = value?.type === "lucide" && value.name === name;
+              return (
+                <button
+                  key={name}
+                  type="button"
+                  title={name}
+                  onClick={function () { onChange({ type: "lucide", name: name }); }}
+                  className={
+                    "w-8 h-8 flex items-center justify-center rounded-lg text-base-content transition-colors duration-75 " +
+                    (selected ? "border border-primary bg-base-300" : "hover:bg-base-300")
+                  }
+                >
+                  <Icon size={16} />
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {tab === "emoji" && (
+        <div>
+          <input
+            type="text"
+            value={emojiValue}
+            maxLength={2}
+            onChange={function (e) {
+              setEmojiValue(e.target.value);
+              if (e.target.value) {
+                onChange({ type: "emoji", value: e.target.value });
+              }
+            }}
+            placeholder="Enter emoji"
+            className="w-full h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+          />
+        </div>
+      )}
+
+      {tab === "text" && (
+        <div className="flex gap-2">
+          <input
+            type="text"
+            value={textValue}
+            maxLength={2}
+            onChange={function (e) {
+              setTextValue(e.target.value);
+              if (e.target.value) {
+                onChange({ type: "text", value: e.target.value, color: textColor });
+              }
+            }}
+            placeholder="1-2 chars"
+            className="flex-1 h-9 px-3 bg-base-300 border border-base-content/15 rounded-xl text-base-content text-[13px] focus:border-primary focus-visible:outline-none transition-colors duration-[120ms]"
+          />
+          <input
+            type="color"
+            value={textColor}
+            onChange={function (e) {
+              setTextColor(e.target.value);
+              if (textValue) {
+                onChange({ type: "text", value: textValue, color: e.target.value });
+              }
+            }}
+            className="w-9 h-9 rounded-xl border border-base-content/15 bg-base-300 cursor-pointer"
+          />
+        </div>
+      )}
+
+      {tab === "upload" && (
+        <div className="space-y-2">
+          <input
+            type="file"
+            accept="image/*"
+            onChange={handleFileChange}
+            className="w-full text-[12px] text-base-content/60 file:mr-3 file:py-1.5 file:px-3 file:rounded-lg file:border-0 file:text-[12px] file:bg-base-300 file:text-base-content/60 file:cursor-pointer"
+          />
+          {value?.type === "image" && (
+            <img src={value.path} alt="preview" className="w-16 h-16 rounded-xl object-cover border border-base-content/15" />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/client/src/components/ui/LatticeLogomark.tsx

@@ -0,0 +1,19 @@
+interface LatticeLogomarkProps {
+  size: number;
+}
+
+export function LatticeLogomark(props: LatticeLogomarkProps) {
+  var s = props.size;
+  return (
+    <svg width={s} height={s} viewBox="0 0 48 48" fill="none" aria-hidden="true">
+      <rect x="4" y="4" width="18" height="18" rx="3" fill="currentColor" />
+      <rect x="26" y="4" width="18" height="18" rx="3" fill="currentColor" opacity="0.55" />
+      <rect x="4" y="26" width="18" height="18" rx="3" fill="currentColor" opacity="0.55" />
+      <rect x="26" y="26" width="18" height="18" rx="3" fill="currentColor" opacity="0.25" />
+      <line x1="13" y1="22" x2="13" y2="26" stroke="currentColor" strokeWidth="1.5" opacity="0.8" />
+      <line x1="35" y1="22" x2="35" y2="26" stroke="currentColor" strokeWidth="1.5" opacity="0.5" />
+      <line x1="22" y1="13" x2="26" y2="13" stroke="currentColor" strokeWidth="1.5" opacity="0.8" />
+      <line x1="22" y1="35" x2="26" y2="35" stroke="currentColor" strokeWidth="1.5" opacity="0.5" />
+    </svg>
+  );
+}

package/client/src/components/ui/PopupMenu.tsx

@@ -0,0 +1,98 @@
+import { useEffect, useRef } from "react";
+
+export interface PopupMenuItem {
+  id: string;
+  label: string;
+  icon?: React.ReactNode;
+  danger?: boolean;
+  separator?: boolean;
+}
+
+interface PopupMenuProps {
+  items: PopupMenuItem[];
+  onSelect: (id: string) => void;
+  onClose: () => void;
+  anchorRef: React.RefObject<HTMLElement | null>;
+  position?: "above" | "below" | "right";
+}
+
+export function PopupMenu(props: PopupMenuProps) {
+  var menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(function () {
+    function handleClickOutside(e: MouseEvent) {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(e.target as Node) &&
+        props.anchorRef.current &&
+        !props.anchorRef.current.contains(e.target as Node)
+      ) {
+        props.onClose();
+      }
+    }
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === "Escape") {
+        props.onClose();
+      }
+    }
+    function handleScroll() {
+      props.onClose();
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    window.addEventListener("scroll", handleScroll, true);
+    return function () {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+      window.removeEventListener("scroll", handleScroll, true);
+    };
+  }, [props.onClose, props.anchorRef]);
+
+  var style: React.CSSProperties = {};
+  if (props.anchorRef.current) {
+    var rect = props.anchorRef.current.getBoundingClientRect();
+    var pos = props.position ?? "above";
+    if (pos === "above") {
+      style.bottom = window.innerHeight - rect.top + 4 + "px";
+      style.left = rect.left + "px";
+    } else if (pos === "below") {
+      style.top = rect.bottom + 4 + "px";
+      style.left = rect.left + "px";
+    } else if (pos === "right") {
+      style.top = rect.top + "px";
+      style.left = rect.right + 4 + "px";
+    }
+  }
+
+  return (
+    <div
+      ref={menuRef}
+      role="menu"
+      aria-label="Actions"
+      className="fixed z-[9999] bg-base-300 border border-base-content/10 rounded-lg shadow-xl p-1 min-w-[180px] max-h-[80vh] overflow-y-auto"
+      style={style}
+    >
+      {props.items.map(function (item) {
+        if (item.separator) {
+          return <div key={item.id} className="h-px bg-base-content/8 my-1 mx-2" />;
+        }
+        return (
+          <button
+            key={item.id}
+            role="menuitem"
+            onClick={function () { props.onSelect(item.id); }}
+            className={
+              "w-full flex items-center gap-2 px-2.5 py-[6px] rounded text-[11px] text-left cursor-pointer transition-colors duration-[120ms] outline-none focus-visible:ring-2 focus-visible:ring-primary/40 focus-visible:ring-inset " +
+              (item.danger
+                ? "text-error hover:bg-error/10"
+                : "text-base-content/70 hover:bg-base-content/5 hover:text-base-content")
+            }
+          >
+            {item.icon && <span className="opacity-60 flex-shrink-0">{item.icon}</span>}
+            {item.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/client/src/components/ui/SaveFooter.tsx

@@ -0,0 +1,38 @@
+import type { SaveState } from "../../hooks/useSaveState";
+
+interface SaveFooterProps {
+  dirty: boolean;
+  saving: boolean;
+  saveState: SaveState;
+  onSave: () => void;
+  extraStatus?: string;
+}
+
+export function SaveFooter({ dirty, saving, saveState, onSave, extraStatus }: SaveFooterProps) {
+  var disabled = saving || (!dirty && saveState !== "error");
+
+  return (
+    <div className="flex items-center justify-end gap-3">
+      {extraStatus && (
+        <div className="text-[11px] text-warning/70">{extraStatus}</div>
+      )}
+      {!extraStatus && dirty && saveState === "idle" && !saving && (
+        <div className="text-[11px] text-warning/70">Unsaved changes</div>
+      )}
+      {saveState === "error" && (
+        <div className="text-[11px] text-error">Save failed — try again</div>
+      )}
+      <button
+        onClick={onSave}
+        disabled={disabled}
+        className={
+          "btn btn-sm " +
+          (saveState === "saved" ? "btn-success" : saveState === "error" ? "btn-error" : "btn-primary") +
+          (disabled ? " opacity-50 cursor-not-allowed" : "")
+        }
+      >
+        {saving ? "Saving..." : saveState === "saved" ? "Saved" : saveState === "error" ? "Retry" : "Save Changes"}
+      </button>
+    </div>
+  );
+}

package/client/src/components/ui/Toast.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useState, useCallback } from "react";
+import { X, Info, AlertTriangle, AlertCircle } from "lucide-react";
+
+export interface ToastItem {
+  id: string;
+  message: string;
+  type: "info" | "error" | "warning";
+}
+
+interface ToastProps {
+  items: ToastItem[];
+  onDismiss: (id: string) => void;
+}
+
+var ICON_MAP = {
+  info: Info,
+  warning: AlertTriangle,
+  error: AlertCircle,
+};
+
+var ACCENT_MAP = {
+  info: "bg-primary",
+  warning: "bg-warning",
+  error: "bg-error",
+};
+
+var ICON_COLOR_MAP = {
+  info: "text-primary",
+  warning: "text-warning",
+  error: "text-error",
+};
+
+export function Toast(props: ToastProps) {
+  if (props.items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="fixed top-3 right-3 z-[9999] flex flex-col gap-2 max-w-[340px]">
+      {props.items.map(function (item) {
+        var Icon = ICON_MAP[item.type];
+        return (
+          <div
+            key={item.id}
+            className="flex items-start gap-2.5 bg-base-300 border border-base-content/10 rounded-lg shadow-xl px-3 py-2.5 animate-[toast-in_0.18s_ease]"
+          >
+            <div className={"w-0.5 self-stretch rounded-full flex-shrink-0 " + ACCENT_MAP[item.type]} />
+            <Icon size={14} className={"flex-shrink-0 mt-0.5 " + ICON_COLOR_MAP[item.type]} />
+            <span className="flex-1 text-[13px] text-base-content/80 leading-snug">{item.message}</span>
+            <button
+              onClick={function () { props.onDismiss(item.id); }}
+              aria-label="Dismiss"
+              className="flex-shrink-0 text-base-content/30 hover:text-base-content/60 transition-colors mt-0.5"
+            >
+              <X size={13} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+var toastListeners: Array<(item: ToastItem) => void> = [];
+
+export function showToast(message: string, type: ToastItem["type"] = "info"): void {
+  var item: ToastItem = {
+    id: Math.random().toString(36).slice(2),
+    message,
+    type,
+  };
+  toastListeners.forEach(function (listener) {
+    listener(item);
+  });
+}
+
+export function useToastState(): { items: ToastItem[]; dismiss: (id: string) => void } {
+  var [items, setItems] = useState<ToastItem[]>([]);
+
+  var dismiss = useCallback(function (id: string) {
+    setItems(function (prev) {
+      return prev.filter(function (item) {
+        return item.id !== id;
+      });
+    });
+  }, []);
+
+  useEffect(function () {
+    function listener(item: ToastItem) {
+      setItems(function (prev) {
+        return [...prev, item];
+      });
+      setTimeout(function () {
+        setItems(function (prev) {
+          return prev.filter(function (i) {
+            return i.id !== item.id;
+          });
+        });
+      }, 5000);
+    }
+
+    toastListeners.push(listener);
+
+    return function () {
+      toastListeners = toastListeners.filter(function (l) {
+        return l !== listener;
+      });
+    };
+  }, []);
+
+  return { items, dismiss };
+}

package/client/src/hooks/useMesh.ts

@@ -0,0 +1,89 @@
+import { useEffect, useRef } from "react";
+import { useStore } from "@tanstack/react-store";
+import type { ServerMessage, NodeInfo } from "@lattice/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/client/src/hooks/useProjectSettings.ts

@@ -0,0 +1,56 @@
+import { useState, useEffect } from "react";
+import { useWebSocket } from "./useWebSocket";
+import type { ServerMessage, ProjectSettings, ProjectSettingsDataMessage, ProjectSettingsErrorMessage } from "@lattice/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 };
+}