ltcai 2.2.2 → 3.0.1

package/static/v3/js/core/api.js

@@ -0,0 +1,327 @@
+/* ============================================================================
+ * Lattice AI v3 — Integration adapter
+ *
+ * Every adapter call hits the real endpoint first (including /api/index/status,
+ * /api/graph, /api/search/hybrid, and /chat). If that
+ * endpoint is missing/unavailable, it degrades to a clearly-labeled SAMPLE
+ * payload from fixtures.js and reports `source: "placeholder"` so the UI can
+ * badge it. No backend logic is implemented here — only transport + graceful
+ * fallback, which keeps the v3 frontend resilient during local setup.
+ *
+ * Return shape (never throws): { ok, status, data, source, error }
+ *   source: "live"        → returned by a real backend endpoint
+ *           "placeholder" → fixture fallback (backend not yet available)
+ * ========================================================================== */
+
+import { store } from "./store.js";
+import * as fx from "./fixtures.js";
+
+const TIMEOUT_MS = 8000;
+
+async function raw(path, { method = "GET", body, headers } = {}) {
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), TIMEOUT_MS);
+  try {
+    const ws = store.get().workspaceId;
+    const res = await fetch(path, {
+      method,
+      credentials: "same-origin",
+      signal: ctrl.signal,
+      headers: {
+        "Accept": "application/json",
+        ...(body ? { "Content-Type": "application/json" } : {}),
+        ...(ws ? { "X-Workspace-Id": ws } : {}),
+        ...headers,
+      },
+      body: body ? JSON.stringify(body) : undefined,
+    });
+    let data = null;
+    const text = await res.text();
+    if (text) { try { data = JSON.parse(text); } catch { data = { raw: text }; } }
+    return { ok: res.ok, status: res.status, data };
+  } catch (err) {
+    return { ok: false, status: 0, data: null, error: err && err.name === "AbortError" ? "timeout" : String(err) };
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+/** Try the live endpoint; on any non-2xx/transport failure, use the fixture. */
+async function withFallback(path, opts, fixture) {
+  const res = await raw(path, opts);
+  if (res.ok && res.data && !res.data.raw) {
+    return { ...res, source: "live" };
+  }
+  return { ok: true, status: res.status, data: typeof fixture === "function" ? fixture() : fixture, source: "placeholder", error: res.error };
+}
+
+export const api = {
+  raw,
+
+  /** Generic GET with fixture fallback. */
+  async get(path, fixture = null) {
+    return withFallback(path, {}, fixture);
+  },
+
+  /* ── Documented future surfaces ─────────────────────────────────────── */
+
+  /** GET /api/index/status — KG + Vector + Hybrid pipeline state. */
+  indexStatus() {
+    return withFallback("/api/index/status", {}, fx.INDEX_STATUS);
+  },
+
+  /** POST /api/index/rebuild — rebuild the derived vector index (real run). */
+  rebuildIndex(opts = {}) {
+    return raw("/api/index/rebuild", { method: "POST", body: { full: false, include_nodes: true, include_chunks: true, ...opts } });
+  },
+
+  /** GET /api/graph — knowledge graph (nodes + edges). Falls back through the
+   *  current /knowledge-graph/graph route before the fixture. */
+  async graph(params = {}) {
+    const qs = new URLSearchParams(params).toString();
+    const primary = await raw(`/api/graph${qs ? "?" + qs : ""}`);
+    if (primary.ok && primary.data && Array.isArray(primary.data.nodes)) {
+      return { ...primary, source: "live" };
+    }
+    const legacy = await raw("/knowledge-graph/graph");
+    if (legacy.ok && legacy.data && Array.isArray(legacy.data.nodes)) {
+      return { ...legacy, source: "live" };
+    }
+    return { ok: true, status: 200, data: fx.GRAPH, source: "placeholder" };
+  },
+
+  graphStats() {
+    return withFallback("/knowledge-graph/stats", {}, fx.GRAPH_STATS);
+  },
+
+  /** POST /api/search/hybrid — fused KG + vector retrieval.
+   *  The backend returns `{ matches: [...] }` where each match carries
+   *  `source_scores: { keyword, vector, graph }`. Normalize that into the flat
+   *  result shape the view renders (title/path/snippet/score + per-signal). A
+   *  legacy `results` array is also accepted defensively. */
+  async hybridSearch(query, opts = {}) {
+    const res = await raw("/api/search/hybrid", { method: "POST", body: { query, ...opts } });
+    const live = res.ok && res.data
+      ? (Array.isArray(res.data.matches) ? res.data.matches
+        : Array.isArray(res.data.results) ? res.data.results
+        : null)
+      : null;
+    if (live) {
+      const items = live.map((m) => {
+        const ss = m.source_scores || {};
+        const meta = m.metadata || {};
+        return {
+          id: m.id || m.node_id,
+          title: m.title || m.id || "Untitled",
+          path: meta.path || meta.source || m.path || m.type || "",
+          snippet: m.snippet || m.summary || "",
+          score: typeof m.score === "number" ? m.score : 0,
+          vector: Number(ss.vector ?? m.vector) || 0,
+          lexical: Number(ss.keyword ?? m.lexical) || 0,
+          graph: Number(ss.graph ?? m.graph) || 0,
+        };
+      });
+      return { ok: true, status: res.status, data: items, source: "live", weights: res.data.weights || null };
+    }
+    return { ok: true, status: res.status, data: fx.hybridResults(query), source: "placeholder", error: res.error };
+  },
+
+  /* ── Existing surfaces (used where helpful, all fallback-safe) ──────── */
+  workspaceOs() { return withFallback("/workspace/os", {}, fx.WORKSPACE_OS); },
+  async models() {
+    const res = await raw("/models");
+    if (res.ok && res.data && !res.data.raw) {
+      const data = res.data;
+      const loadedIds = Array.isArray(data.loaded) ? data.loaded : [];
+      const recommended = Array.isArray(data.recommended) ? data.recommended.map((m) => ({
+        ...m,
+        name: m.name || m.display_name || m.id,
+        family: m.family || m.modality || "local",
+        state: loadedIds.includes(m.id) || data.current === m.id ? "loaded" : "available",
+      })) : [];
+      const loadedOnly = loadedIds
+        .filter((id) => !recommended.some((m) => m.id === id))
+        .map((id) => ({ id, name: id, family: "local", state: data.current === id ? "loaded" : "available" }));
+      return {
+        ok: true,
+        status: res.status,
+        source: "live",
+        data: { ...data, catalog: Array.isArray(data.catalog) ? data.catalog : [...recommended, ...loadedOnly] },
+      };
+    }
+    return { ok: true, status: res.status, data: fx.MODELS, source: "placeholder", error: res.error };
+  },
+  sysinfo() { return withFallback("/local/sysinfo", {}, fx.SYSINFO); },
+
+  adminSummary() { return withFallback("/admin/summary", {}, fx.ADMIN.summary); },
+  adminUsers() { return withFallback("/admin/users", {}, fx.ADMIN.users); },
+  adminAudit() { return withFallback("/admin/audit", {}, { recent_events: fx.ADMIN.audit }); },
+  adminSecurity() { return withFallback("/admin/security/overview", {}, fx.ADMIN.security); },
+  adminRoles() { return withFallback("/admin/roles", {}, { roles: fx.ADMIN.roles }); },
+  adminPolicies() { return withFallback("/admin/policies", {}, { policies: fx.ADMIN.policies }); },
+  vpcStatus() { return withFallback("/vpc/status", {}, fx.ADMIN.vpc); },
+
+  /* ── Embeddings (real backend: /api/embeddings/*) ───────────────────── */
+  /** GET /api/embeddings/status — active provider, grade, dimensions, last index. */
+  async embeddingsStatus() {
+    const res = await raw("/api/embeddings/status");
+    if (res.ok && res.data && res.data.provider) {
+      return { ok: true, status: res.status, data: res.data, source: "live" };
+    }
+    // No backend → report unavailable honestly (never fabricate a provider).
+    return {
+      ok: true, status: res.status, source: "placeholder",
+      data: { provider: "hash", active_provider: "hash", model: "lattice-local-hash-v1",
+        model_id: "lattice-local-hash-v1:384", dimensions: 384, grade: "fallback",
+        state: "fallback", fell_back: false, health: { status: "unknown", detail: "backend unavailable" },
+        last_indexed_at: null },
+    };
+  },
+  embeddingsProviders() { return withFallback("/api/embeddings/providers", {}, { active: "hash", providers: [] }); },
+
+  /* ── Agents (real backend: AgentRuntime /agents/api/runtime/*) ───────── */
+  /** GET /agents/api/runtime/status — roles, roster, runs, health from the runtime. */
+  async agentRuntime() {
+    const res = await raw("/agents/api/runtime/status");
+    if (res.ok && res.data && res.data.runtime && Array.isArray(res.data.agents)) {
+      return { ok: true, status: res.status, data: res.data, source: "live" };
+    }
+    // Fallback: clearly-badged sample roster, no fabricated run ledger.
+    return {
+      ok: true, status: res.status, source: "placeholder",
+      data: { runtime: { ready: false, total_runs: 0, active_runs: 0 },
+        health: { status: "unknown", checks: {} }, roles: [],
+        agents: fx.AGENTS.map((a) => ({ ...a, last_status: null, last_at: null })), runs: [] },
+    };
+  },
+  /** POST /agents/api/run — execute the multi-agent pipeline for a goal. */
+  runAgent(goal, roles) { return raw("/agents/api/run", { method: "POST", body: { goal, roles: roles || [] } }); },
+
+  /* ── Local computer memory (real backend: /workspace/computer-memory) ── */
+  computerMemory() { return raw("/workspace/computer-memory"); },
+  setComputerMemory(enabled) {
+    return raw("/workspace/computer-memory", { method: "POST", body: { enabled, consent: { approved: !!enabled } } });
+  },
+
+  /* ── Organization workspaces (real backend: /workspace/orgs) ────────── */
+  createOrg(name) { return raw("/workspace/orgs", { method: "POST", body: { name } }); },
+
+  /* ── Chat (real backend: SSE /chat + /history/*) ────────────────────── */
+
+  /** GET /history/conversations — conversation list. */
+  async chatHistory() {
+    const res = await raw("/history/conversations");
+    const list = res.ok && Array.isArray(res.data) ? res.data
+      : res.ok && res.data && Array.isArray(res.data.conversations) ? res.data.conversations
+      : null;
+    if (list) return { ok: true, status: res.status, data: list, source: "live" };
+    return { ok: true, status: res.status, data: fx.CHAT.conversations, source: "placeholder" };
+  },
+
+  /** GET /history/conversations/{id} — messages for one conversation. */
+  async conversation(id) {
+    const res = await raw(`/history/conversations/${encodeURIComponent(id)}`);
+    if (res.ok && res.data && Array.isArray(res.data.messages)) {
+      return { ok: true, status: res.status, data: res.data.messages, source: "live" };
+    }
+    const sample = (fx.CHAT.conversations.find((c) => c.id === id) || {}).messages || [];
+    return { ok: true, status: res.status, data: sample, source: "placeholder" };
+  },
+
+  deleteConversation(id) {
+    return raw(`/history/conversations/${encodeURIComponent(id)}`, { method: "DELETE" });
+  },
+
+  /**
+   * POST /chat — streams the assistant reply over SSE.
+   * Parses `data: {chunk, model, trace}` events (terminator `[DONE]`), calling
+   * onChunk(delta, fullText) and onTrace(trace). If the endpoint is missing or
+   * not an event-stream, degrades to a clearly-labeled SAMPLE stream (no real
+   * generation is invented). Resolves { source, text, trace, model, aborted }.
+   */
+  async streamChat(body, { onChunk, onTrace, signal } = {}) {
+    const ws = store.get().workspaceId;
+    let res;
+    try {
+      res = await fetch("/chat", {
+        method: "POST",
+        credentials: "same-origin",
+        signal,
+        headers: {
+          "Content-Type": "application/json",
+          "Accept": "text/event-stream",
+          ...(ws ? { "X-Workspace-Id": ws } : {}),
+        },
+        body: JSON.stringify({ stream: true, max_tokens: 2048, temperature: 0.2, ...body }),
+      });
+    } catch (err) {
+      if (err && err.name === "AbortError") return { source: "live", text: "", aborted: true };
+      return simulateChat(body, { onChunk, onTrace, signal });
+    }
+    const ctype = res.headers.get("content-type") || "";
+    if (!res.ok) {
+      let data = null;
+      try { data = await res.clone().json(); } catch {}
+      const detail = data && (data.detail || data.message || data.error);
+      const noModel = data && (data.error === "no_model_loaded" || /no .*model .*loaded/i.test(String(detail || "")));
+      if (noModel) {
+        return { source: "live", text: "", error: "no_model_loaded", errorMessage: String(detail || "No local model is loaded.") };
+      }
+      return simulateChat(body, { onChunk, onTrace, signal });
+    }
+    if (!res.body || !ctype.includes("text/event-stream")) {
+      return simulateChat(body, { onChunk, onTrace, signal });
+    }
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buf = "", text = "", trace = null, model = null;
+    try {
+      for (;;) {
+        const { value, done } = await reader.read();
+        if (done) break;
+        buf += decoder.decode(value, { stream: true });
+        const parts = buf.split("\n\n");
+        buf = parts.pop();
+        for (const part of parts) {
+          const line = part.split("\n").find((l) => l.startsWith("data:"));
+          if (!line) continue;
+          const rawData = line.slice(5).trim();
+          if (rawData === "[DONE]") return { source: "live", text, trace, model };
+          let data; try { data = JSON.parse(rawData); } catch { continue; }
+          if (data.chunk) { text += data.chunk; onChunk && onChunk(data.chunk, text); }
+          if (data.model) model = data.model;
+          if (data.trace) { trace = data.trace; onTrace && onTrace(trace); }
+        }
+      }
+    } catch (err) {
+      if (err && err.name === "AbortError") return { source: "live", text, trace, model, aborted: true };
+      if (!text) return simulateChat(body, { onChunk, onTrace, signal });
+    }
+    return { source: "live", text, trace, model };
+  },
+};
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+/** Transparent SAMPLE stream — used only when no chat backend is available. */
+async function simulateChat(body, { onChunk, onTrace, signal } = {}) {
+  const q = (body && body.message) || "your question";
+  const reply =
+    `This is a sample response. Connect a local model and the v3 retrieval backend ` +
+    `(/api/search/hybrid, /api/graph) to ground answers to “${q}” in your workspace. ` +
+    `The context panel shows the knowledge-graph entities, vector matches, and indexed ` +
+    `files that would be used to answer — this preview does not run a model.`;
+  let text = "";
+  for (const word of reply.split(" ")) {
+    if (signal && signal.aborted) return { source: "placeholder", text, aborted: true };
+    const delta = (text ? " " : "") + word;
+    text += delta;
+    onChunk && onChunk(delta, text);
+    await sleep(16);
+  }
+  const trace = fx.sampleTrace(q);
+  onTrace && onTrace(trace);
+  return { source: "placeholder", text, trace };
+}
+
+export { fx };

package/static/v3/js/core/components.js

@@ -0,0 +1,215 @@
+/* ============================================================================
+ * Lattice AI v3 — Component factories
+ * Build the shared vocabulary (cards, panels, stats, tables, states, the
+ * retrieval-lattice pillars …) on top of dom.js + the component CSS. Views
+ * compose these to stay visually consistent.
+ * ========================================================================== */
+
+import { h, icon, fmtNum } from "./dom.js";
+
+/* ── View + section headers ─────────────────────────────────────────────── */
+export function viewHeader({ eyebrow, title, sub, actions } = {}) {
+  return h("header.lt3-vhead",
+    h("div",
+      eyebrow && h("div.lt3-eyebrow", eyebrow),
+      h("h1.lt3-vhead__title", title),
+      sub && h("p.lt3-vhead__sub", sub),
+    ),
+    actions && actions.length && h("div.lt3-vhead__actions", actions),
+  );
+}
+
+export function sectionHead(title, ...actions) {
+  return h("div.lt3-section__head",
+    h("h2.lt3-section__title", title),
+    actions.length && h("div.lt3-row-2", actions),
+  );
+}
+
+/* ── Panel / card ───────────────────────────────────────────────────────── */
+export function panel({ title, sub, actions, head, children, eyebrow, className } = {}) {
+  return h(`section.lt3-panel${className ? "." + className : ""}`,
+    (title || head || actions) && h("div.lt3-panel__head",
+      head || h("div",
+        eyebrow && h("div.lt3-eyebrow", eyebrow),
+        title && h("h3.lt3-panel__title", title),
+        sub && h("p.lt3-panel__sub", sub),
+      ),
+      actions && h("div.lt3-row-2", actions),
+    ),
+    children,
+  );
+}
+
+export function card(children, opts = {}) {
+  const cls = ["lt3-card"];
+  if (opts.interactive) cls.push("lt3-card--interactive");
+  if (opts.flat) cls.push("lt3-card--flat");
+  if (opts.ghost) cls.push("lt3-card--ghost");
+  return h(`div.${cls.join(".")}`, opts.attrs || {}, children);
+}
+
+/* ── Stat tile ──────────────────────────────────────────────────────────── */
+export function stat({ label, value, icon: ic, delta, deltaDir }) {
+  return h("div.lt3-stat",
+    h("div.lt3-stat__label", ic && icon(ic), label),
+    h("div.lt3-stat__value", value == null ? "—" : value),
+    delta && h(`div.lt3-stat__delta${deltaDir ? ".lt3-stat__delta--" + deltaDir : ""}`, delta),
+  );
+}
+
+/* ── Pills / badges ─────────────────────────────────────────────────────── */
+export function pill(text, variant = "", { dot } = {}) {
+  const cls = ["lt3-pill"];
+  if (variant) cls.push("lt3-pill--" + variant);
+  if (dot) cls.push("lt3-pill--dot");
+  return h(`span.${cls.join(".")}`, text);
+}
+
+const STATE_VARIANT = {
+  ready: "ok", active: "ok", indexed: "ok", loaded: "ok", ok: "ok", available: "info",
+  idle: "", standby: "", pending: "warn", indexing: "warn", building: "warn",
+  failed: "err", error: "err", disabled: "err", not_configured: "",
+};
+export function statePill(state) {
+  return pill(String(state || "unknown"), STATE_VARIANT[String(state).toLowerCase()] ?? "", { dot: true });
+}
+
+/** Provenance badge — makes placeholder vs live data explicit. */
+export function sourceBadge(source) {
+  if (source === "live") return h("span.lt3-source.lt3-source--live", icon("circle-filled"), "Live");
+  if (source === "placeholder") return h("span.lt3-source.lt3-source--placeholder", icon("flask"), "Sample data");
+  return h("span.lt3-source.lt3-source--pending", "—");
+}
+
+/* ── States ─────────────────────────────────────────────────────────────── */
+export function emptyState({ icon: ic = "inbox", title, body, action } = {}) {
+  return h("div.lt3-empty",
+    h("div.lt3-empty__icon", icon(ic)),
+    title && h("div.lt3-empty__title", title),
+    body && h("div.lt3-empty__body", body),
+    action,
+  );
+}
+
+export function loading({ lines = 3, block = false } = {}) {
+  const kids = [];
+  if (block) kids.push(h("div.lt3-skel.lt3-skel--block"));
+  for (let i = 0; i < lines; i++) {
+    kids.push(h("div.lt3-skel.lt3-skel--line", { style: { width: 100 - i * 14 + "%" } }));
+  }
+  return h("div", { "aria-busy": "true", "aria-label": "Loading" }, kids);
+}
+
+export function errorState(message, onRetry) {
+  return h("div.lt3-banner.lt3-banner--err",
+    icon("alert-triangle"),
+    h("div", h("div", { style: { fontWeight: 600 } }, "Couldn't load"), h("div.lt3-faint", message || "Request failed")),
+    onRetry && h("button.lt3-btn.lt3-btn--subtle.lt3-btn--sm", { style: { "margin-left": "auto" }, on: { click: onRetry } }, icon("refresh"), "Retry"),
+  );
+}
+
+export function banner(text, variant = "info", ic = "info-circle") {
+  return h(`div.lt3-banner.lt3-banner--${variant}`, icon(ic), h("div", text));
+}
+
+/* ── Table ──────────────────────────────────────────────────────────────── */
+export function table(columns, rows, { empty } = {}) {
+  if (!rows || !rows.length) {
+    return empty || emptyState({ title: "Nothing here yet", body: "Data will appear once connected." });
+  }
+  return h("div.lt3-table--clip", { style: { overflow: "auto" } },
+    h("table.lt3-table",
+      h("thead", h("tr", columns.map((c) => h("th", { style: c.width ? { width: c.width } : {} }, c.label)))),
+      h("tbody", rows.map((row) => h("tr", columns.map((c) => h("td", c.render ? c.render(row) : row[c.key]))))),
+    ),
+  );
+}
+
+/* ── Tabs / segmented ───────────────────────────────────────────────────── */
+export function tabs(items, active, onChange) {
+  return h("div.lt3-tabs", { role: "tablist" },
+    items.map((it) => h("button.lt3-tab", {
+      role: "tab", type: "button",
+      dataset: { active: String(it.key === active) },
+      "aria-selected": String(it.key === active),
+      on: { click: () => onChange(it.key) },
+    }, it.label)),
+  );
+}
+
+export function segmented(items, active, onChange) {
+  return h("div.lt3-seg", { role: "tablist" },
+    items.map((it) => h("button", {
+      type: "button", role: "tab",
+      dataset: { active: String(it.key === active) },
+      "aria-selected": String(it.key === active),
+      on: { click: () => onChange(it.key) },
+    }, it.label)),
+  );
+}
+
+/* ── Meter ──────────────────────────────────────────────────────────────── */
+export function meter(value, variant = "") {
+  const pct = Math.max(0, Math.min(1, Number(value) || 0)) * 100;
+  return h("div.lt3-meter",
+    h(`div.lt3-meter__fill${variant ? ".lt3-meter__fill--" + variant : ""}`, { style: { width: pct + "%" } }),
+  );
+}
+
+/* ── Retrieval lattice (signature) ──────────────────────────────────────── */
+const PILLAR_DEFS = [
+  { key: "knowledge_graph", kind: "graph", name: "Knowledge Graph", desc: "Entities & relations", icon: "chart-dots-3", unit: "entities", read: (p) => p?.entities },
+  { key: "vector_index", kind: "vector", name: "Vector Index", desc: "Local embedding vectors", icon: "grid-dots", unit: "vectors", read: (p) => p?.vectors },
+  { key: "hybrid", kind: "hybrid", name: "Hybrid Search", desc: "Fused graph + vector", icon: "arrows-join", unit: "fusion", read: (p) => p?.strategy },
+];
+
+export function pillars(indexStatus) {
+  const pipes = indexStatus?.pipelines || {};
+  return h("div.lt3-pillars",
+    PILLAR_DEFS.map((def) => {
+      const p = pipes[def.key] || {};
+      const raw = def.read(p);
+      const num = typeof raw === "number" ? fmtNum(raw) : (raw || "ready");
+      return h(`article.lt3-pillar.lt3-pillar--${def.kind}`,
+        h("div.lt3-pillar__icon", icon(def.icon)),
+        h("div.lt3-row", { style: { "justify-content": "space-between" } },
+          h("div",
+            h("div.lt3-pillar__name", def.name),
+            h("div.lt3-pillar__desc", def.desc),
+          ),
+          statePill(p.state || "ready"),
+        ),
+        h("div.lt3-pillar__stat",
+          h("span.lt3-pillar__num", num),
+          h("span.lt3-pillar__unit", def.unit),
+        ),
+      );
+    }),
+  );
+}
+
+/** Compact 3-dot index chip for the topbar. */
+export function indexChip(indexStatus) {
+  const pipes = indexStatus?.pipelines || {};
+  const dot = (kind, key) => h("span.lt3-idxchip__dot", {
+    dataset: { kind, on: String((pipes[key]?.state || "ready") === "ready") },
+    title: `${kind}: ${pipes[key]?.state || "—"}`,
+  });
+  return h("div.lt3-idxchip", { title: "Retrieval index status" },
+    h("span.lt3-idxchip__dots", dot("graph", "knowledge_graph"), dot("vector", "vector_index"), dot("hybrid", "hybrid")),
+    h("span", "Index"),
+  );
+}
+
+/* ── Toast ──────────────────────────────────────────────────────────────── */
+export function toast(message, variant = "info") {
+  let host = document.querySelector(".lt3-toasts");
+  if (!host) { host = h("div.lt3-toasts"); document.body.append(host); }
+  const ic = variant === "ok" ? "circle-check" : variant === "err" ? "alert-circle" : "info-circle";
+  const node = h(`div.lt3-toast.lt3-toast--${variant}`, icon(ic), h("div", message));
+  host.append(node);
+  setTimeout(() => { node.style.opacity = "0"; node.style.transition = "opacity .3s"; setTimeout(() => node.remove(), 300); }, 3200);
+}
+
+export { icon, fmtNum };