ltcai 2.2.7 → 3.0.1

package/static/scripts/workspace.js

@@ -15,6 +15,8 @@ const state = {
 
 // Skills that match common workspace needs are surfaced under "Recommended".
 const RECOMMENDED_SKILL_HINTS = ["code", "review", "doc", "test", "security", "research", "changelog", "refactor", "debug"];
+const MODE_KEY = "ltcai_workspace_mode";
+const LANG_KEY = "ltcai_lang";
 
 function $(id) {
   return document.getElementById(id);
@@ -51,6 +53,61 @@ function toast(message) {
   node._timer = setTimeout(() => node.classList.remove("show"), 2200);
 }
 
+function adminAvailableForWorkspace(workspace) {
+  const storedAdmin = (() => {
+    try { return localStorage.getItem("ltcai_is_admin") === "true"; } catch { return false; }
+  })();
+  const role = String(workspace?.your_role || "").toLowerCase();
+  return storedAdmin || role === "owner" || role === "admin";
+}
+
+function currentWorkspaceMode() {
+  try {
+    const mode = localStorage.getItem(MODE_KEY);
+    return ["basic", "advanced", "admin"].includes(mode) ? mode : "basic";
+  } catch {
+    return "basic";
+  }
+}
+
+function applyWorkspaceMode(mode, { adminAvailable = false } = {}) {
+  if (mode === "admin" && !adminAvailable) mode = "basic";
+  const shell = document.querySelector(".workspace-shell");
+  if (shell) shell.dataset.workspaceMode = mode;
+  document.querySelectorAll("[data-workspace-mode]").forEach((button) => {
+    if (button.matches("button")) {
+      const active = button.dataset.workspaceMode === mode;
+      button.classList.toggle("active", active);
+      button.setAttribute("aria-selected", active ? "true" : "false");
+      button.disabled = button.dataset.workspaceMode === "admin" && !adminAvailable;
+    }
+  });
+  try { localStorage.setItem(MODE_KEY, mode); } catch {}
+}
+
+function updateWorkspaceChrome(activeWorkspace) {
+  const shell = document.querySelector(".workspace-shell");
+  const adminAvailable = adminAvailableForWorkspace(activeWorkspace);
+  if (shell) shell.dataset.adminAvailable = adminAvailable ? "true" : "false";
+  applyWorkspaceMode(currentWorkspaceMode(), { adminAvailable });
+  const lang = (() => {
+    try { return localStorage.getItem(LANG_KEY) || "en"; } catch { return "en"; }
+  })();
+  document.documentElement.lang = lang;
+  const langSelect = $("workspace-language");
+  if (langSelect) langSelect.value = lang;
+}
+
+async function logoutWorkspace() {
+  try { await api("/logout", { method: "POST" }); } catch (_) {}
+  try {
+    localStorage.removeItem("ltcai_user_email");
+    localStorage.removeItem("ltcai_user_nickname");
+    localStorage.removeItem("ltcai_is_admin");
+  } catch (_) {}
+  window.location.href = "/account";
+}
+
 function renderMetrics(os) {
   const counts = os?.counts || {};
   const graph = os?.graph || {};
@@ -363,6 +420,7 @@ function renderWorkspaceRegistry(registry, edition) {
     `).join("");
   }
   const active = workspaces.find((ws) => ws.workspace_id === state.activeWorkspace);
+  updateWorkspaceChrome(active);
   const rolePill = $("workspace-role");
   if (rolePill) rolePill.textContent = active ? (active.your_role || "—") : "";
   if (edition) {
@@ -837,6 +895,26 @@ document.addEventListener("change", async (event) => {
 });
 
 document.addEventListener("DOMContentLoaded", () => {
+  document.querySelectorAll("[data-workspace-mode]").forEach((button) => {
+    if (!button.matches("button")) return;
+    button.addEventListener("click", () => {
+      const shell = document.querySelector(".workspace-shell");
+      const adminAvailable = shell?.dataset.adminAvailable === "true";
+      applyWorkspaceMode(button.dataset.workspaceMode, { adminAvailable });
+    });
+  });
+  const language = $("workspace-language");
+  if (language) {
+    language.value = (() => {
+      try { return localStorage.getItem(LANG_KEY) || "en"; } catch { return "en"; }
+    })();
+    language.addEventListener("change", () => {
+      try { localStorage.setItem(LANG_KEY, language.value); } catch (_) {}
+      document.documentElement.lang = language.value;
+    });
+  }
+  const logoutButton = $("workspace-logout");
+  if (logoutButton) logoutButton.addEventListener("click", () => logoutWorkspace());
   $("refresh-btn").addEventListener("click", () => refreshAll().catch((err) => toast(err.message)));
   $("snapshot-now").addEventListener("click", () => createSnapshot().catch((err) => toast(err.message)));
   $("create-snapshot").addEventListener("click", () => createSnapshot().catch((err) => toast(err.message)));

package/static/v3/css/lattice.base.css

@@ -0,0 +1,128 @@
+/* ============================================================================
+ * Lattice AI v3 — Base layer (reset + element defaults + lattice backdrop)
+ * Token-native: no themed hex values, everything via var(--*).
+ * ========================================================================== */
+
+*, *::before, *::after { box-sizing: border-box; }
+
+html, body { height: 100%; }
+
+body {
+  margin: 0;
+  font-family: var(--lt3-font-sans);
+  font-size: var(--lt3-text-md);
+  line-height: var(--lt3-leading-normal);
+  color: var(--text);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overflow: hidden;            /* shell owns scroll regions */
+}
+
+/* The signature lattice backdrop — a faint structural mesh of nodes+edges.
+   Sits behind the whole app; reinforces the "lattice" identity without noise. */
+.lt3-app::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at center, var(--lt3-mesh-node) 0.9px, transparent 1.1px),
+    linear-gradient(var(--lt3-mesh-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--lt3-mesh-line) 1px, transparent 1px),
+    var(--app-bg);
+  background-size:
+    var(--lt3-mesh-size) var(--lt3-mesh-size),
+    var(--lt3-mesh-size) var(--lt3-mesh-size),
+    var(--lt3-mesh-size) var(--lt3-mesh-size),
+    cover;
+  background-position: center;
+  mask-image: radial-gradient(ellipse 120% 90% at 50% -10%, #000 55%, transparent 100%);
+  opacity: 0.9;
+}
+
+h1, h2, h3, h4, p, figure { margin: 0; }
+
+a { color: inherit; text-decoration: none; }
+
+button {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  border: none;
+  background: none;
+}
+
+input, select, textarea { font: inherit; color: inherit; }
+
+textarea { resize: vertical; }
+
+img, svg { display: block; max-width: 100%; }
+
+code, pre, kbd, samp { font-family: var(--lt3-font-mono); }
+
+:root[data-lt-icons="fallback"] .ti {
+  display: inline-grid;
+  place-items: center;
+  min-width: 1em;
+  min-height: 1em;
+  font-family: var(--lt3-font-mono);
+  font-size: 0.72em;
+  font-style: normal;
+  font-weight: 800;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
+:root[data-lt-icons="fallback"] .ti::before {
+  content: attr(data-fallback);
+}
+
+:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  border-radius: var(--lt3-radius-xs);
+}
+
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--border-strong) 60%, transparent);
+  border-radius: 99px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }
+
+/* Accessible visually-hidden utility */
+.lt3-sr {
+  position: absolute !important;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0,0,0,0);
+  white-space: nowrap; border: 0;
+}
+
+.lt3-skip {
+  position: fixed;
+  top: var(--lt3-space-3);
+  left: var(--lt3-space-3);
+  z-index: var(--lt3-z-toast);
+  padding: var(--lt3-space-2) var(--lt3-space-4);
+  background: var(--accent);
+  color: #fff;
+  border-radius: var(--lt3-radius-sm);
+  transform: translateY(-200%);
+  transition: transform var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-skip:focus { transform: translateY(0); }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/static/v3/css/lattice.components.css

@@ -0,0 +1,447 @@
+/* ============================================================================
+ * Lattice AI v3 — Component primitives
+ * The shared vocabulary every view composes from. Token-native, theme-aware.
+ * ========================================================================== */
+
+/* ── Layout primitives ──────────────────────────────────────────────────── */
+.lt3-stack   { display: flex; flex-direction: column; gap: var(--lt3-space-4); }
+.lt3-stack-2 { display: flex; flex-direction: column; gap: var(--lt3-space-2); }
+.lt3-stack-3 { display: flex; flex-direction: column; gap: var(--lt3-space-3); }
+.lt3-stack-6 { display: flex; flex-direction: column; gap: var(--lt3-space-6); }
+.lt3-row     { display: flex; align-items: center; gap: var(--lt3-space-3); }
+.lt3-row-2   { display: flex; align-items: center; gap: var(--lt3-space-2); }
+.lt3-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lt3-space-2); }
+.lt3-spacer  { flex: 1 1 auto; }
+.lt3-grid    { display: grid; gap: var(--lt3-space-4); }
+.lt3-grid-auto {
+  display: grid;
+  gap: var(--lt3-space-4);
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+}
+.lt3-grid-2 { display: grid; gap: var(--lt3-space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.lt3-grid-3 { display: grid; gap: var(--lt3-space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
+
+/* ── Eyebrow / labels ───────────────────────────────────────────────────── */
+.lt3-eyebrow {
+  font-size: var(--lt3-text-2xs);
+  font-weight: var(--lt3-weight-semi);
+  letter-spacing: var(--lt3-tracking-caps);
+  text-transform: uppercase;
+  color: var(--faint);
+}
+.lt3-muted { color: var(--muted); }
+.lt3-faint { color: var(--faint); }
+.lt3-mono  { font-family: var(--lt3-font-mono); font-size: 0.92em; }
+
+/* ── Card / Panel ───────────────────────────────────────────────────────── */
+.lt3-card,
+.lt3-panel {
+  position: relative;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--lt3-radius-lg);
+  box-shadow: var(--lt3-elev-1);
+}
+.lt3-panel { padding: var(--lt3-space-5); }
+.lt3-card  { padding: var(--lt3-space-4); }
+.lt3-card--flat { box-shadow: none; background: var(--surface-2); }
+.lt3-card--ghost { background: transparent; border-style: dashed; box-shadow: none; }
+.lt3-card--interactive { transition: transform var(--lt3-dur-2) var(--lt3-ease), border-color var(--lt3-dur-2) var(--lt3-ease), box-shadow var(--lt3-dur-2) var(--lt3-ease); }
+.lt3-card--interactive:hover {
+  transform: translateY(-2px);
+  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
+  box-shadow: var(--lt3-elev-2);
+}
+
+.lt3-panel__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--lt3-space-3);
+  margin-bottom: var(--lt3-space-4);
+}
+.lt3-panel__title {
+  font-size: var(--lt3-text-lg);
+  font-weight: var(--lt3-weight-semi);
+  letter-spacing: var(--lt3-tracking-tight);
+}
+.lt3-panel__sub { font-size: var(--lt3-text-sm); color: var(--muted); }
+
+/* ── Buttons ────────────────────────────────────────────────────────────── */
+.lt3-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--lt3-space-2);
+  height: 38px;
+  padding: 0 var(--lt3-space-4);
+  border-radius: var(--lt3-radius-sm);
+  border: 1px solid transparent;
+  font-size: var(--lt3-text-sm);
+  font-weight: var(--lt3-weight-semi);
+  white-space: nowrap;
+  transition: background var(--lt3-dur-2) var(--lt3-ease), border-color var(--lt3-dur-2) var(--lt3-ease), transform var(--lt3-dur-1) var(--lt3-ease), color var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-btn:active { transform: translateY(1px); }
+.lt3-btn[disabled] { opacity: 0.5; pointer-events: none; }
+.lt3-btn .ti { font-size: 1.05rem; }
+
+.lt3-btn--primary { background: var(--accent); color: #fff; box-shadow: var(--lt3-elev-1); }
+.lt3-btn--primary:hover { background: var(--accent-deep); }
+.lt3-btn--ghost { background: var(--surface-2); border-color: var(--border); color: var(--text); }
+.lt3-btn--ghost:hover { border-color: var(--border-strong); background: var(--surface-3); }
+.lt3-btn--subtle { background: transparent; color: var(--muted); }
+.lt3-btn--subtle:hover { background: var(--surface-2); color: var(--text); }
+.lt3-btn--danger { background: var(--lt3-err-soft); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
+.lt3-btn--danger:hover { background: color-mix(in srgb, var(--danger) 24%, transparent); }
+.lt3-btn--sm { height: 30px; padding: 0 var(--lt3-space-3); font-size: var(--lt3-text-xs); }
+.lt3-btn--lg { height: 46px; padding: 0 var(--lt3-space-5); font-size: var(--lt3-text-md); }
+.lt3-btn--block { width: 100%; }
+
+.lt3-iconbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  border-radius: var(--lt3-radius-sm);
+  color: var(--muted);
+  transition: background var(--lt3-dur-2) var(--lt3-ease), color var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-iconbtn:hover { background: var(--surface-2); color: var(--text); }
+.lt3-iconbtn .ti { font-size: 1.2rem; }
+.lt3-iconbtn--sm { width: 30px; height: 30px; }
+
+/* ── Inputs ─────────────────────────────────────────────────────────────── */
+.lt3-input, .lt3-select, .lt3-textarea {
+  width: 100%;
+  height: 40px;
+  padding: 0 var(--lt3-space-4);
+  background: var(--input);
+  border: 1px solid var(--border);
+  border-radius: var(--lt3-radius-sm);
+  color: var(--text);
+  font-size: var(--lt3-text-sm);
+  transition: border-color var(--lt3-dur-2) var(--lt3-ease), box-shadow var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-textarea { height: auto; min-height: 96px; padding: var(--lt3-space-3) var(--lt3-space-4); line-height: var(--lt3-leading-snug); }
+.lt3-input::placeholder, .lt3-textarea::placeholder { color: var(--faint); }
+.lt3-input:focus, .lt3-select:focus, .lt3-textarea:focus {
+  outline: none;
+  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+.lt3-field { display: flex; flex-direction: column; gap: var(--lt3-space-2); }
+.lt3-label { font-size: var(--lt3-text-xs); font-weight: var(--lt3-weight-medium); color: var(--muted); }
+
+.lt3-search {
+  display: flex;
+  align-items: center;
+  gap: var(--lt3-space-2);
+  height: 44px;
+  padding: 0 var(--lt3-space-4);
+  background: var(--input);
+  border: 1px solid var(--border);
+  border-radius: var(--lt3-radius-pill);
+}
+.lt3-search .ti { color: var(--faint); font-size: 1.15rem; }
+.lt3-search input { flex: 1; height: 100%; background: none; border: none; outline: none; font-size: var(--lt3-text-md); }
+
+/* ── Pills / badges / chips ─────────────────────────────────────────────── */
+.lt3-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lt3-space-1);
+  height: 24px;
+  padding: 0 var(--lt3-space-3);
+  border-radius: var(--lt3-radius-pill);
+  font-size: var(--lt3-text-2xs);
+  font-weight: var(--lt3-weight-semi);
+  letter-spacing: var(--lt3-tracking-wide);
+  background: var(--surface-2);
+  color: var(--muted);
+  border: 1px solid var(--border);
+}
+.lt3-pill--ok   { background: var(--lt3-ok-soft);   color: var(--success); border-color: transparent; }
+.lt3-pill--warn { background: var(--lt3-warn-soft); color: var(--warning); border-color: transparent; }
+.lt3-pill--err  { background: var(--lt3-err-soft);  color: var(--danger);  border-color: transparent; }
+.lt3-pill--info { background: var(--accent-soft);   color: var(--accent);  border-color: transparent; }
+.lt3-pill--dot::before {
+  content: ""; width: 6px; height: 6px; border-radius: 99px;
+  background: currentColor; display: inline-block;
+}
+
+.lt3-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lt3-space-2);
+  height: 30px;
+  padding: 0 var(--lt3-space-3);
+  border-radius: var(--lt3-radius-pill);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  font-size: var(--lt3-text-xs);
+  font-weight: var(--lt3-weight-medium);
+  color: var(--text);
+  transition: border-color var(--lt3-dur-2) var(--lt3-ease), background var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-chip[data-active="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); color: var(--accent); }
+.lt3-chip:hover { border-color: var(--border-strong); }
+
+.lt3-kbd {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 5px;
+  background: var(--surface-3);
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  font-family: var(--lt3-font-mono);
+  font-size: var(--lt3-text-2xs);
+  color: var(--muted);
+}
+
+/* Data-provenance tag: clearly marks placeholder vs live data */
+.lt3-source {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--lt3-space-1);
+  height: 20px;
+  padding: 0 var(--lt3-space-2);
+  border-radius: var(--lt3-radius-pill);
+  font-size: var(--lt3-text-2xs);
+  font-weight: var(--lt3-weight-semi);
+  letter-spacing: var(--lt3-tracking-wide);
+  text-transform: uppercase;
+}
+.lt3-source--placeholder { background: var(--lt3-warn-soft); color: var(--warning); }
+.lt3-source--live { background: var(--lt3-ok-soft); color: var(--success); }
+.lt3-source--pending { background: var(--surface-2); color: var(--faint); }
+
+/* ── Stat tile ──────────────────────────────────────────────────────────── */
+.lt3-stat {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lt3-space-1);
+  padding: var(--lt3-space-4) var(--lt3-space-5);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--lt3-radius-md);
+}
+.lt3-stat__label { font-size: var(--lt3-text-xs); color: var(--muted); display: flex; align-items: center; gap: var(--lt3-space-2); }
+.lt3-stat__value { font-size: var(--lt3-text-2xl); font-weight: var(--lt3-weight-bold); letter-spacing: var(--lt3-tracking-tight); line-height: 1.1; }
+.lt3-stat__delta { font-size: var(--lt3-text-2xs); color: var(--muted); }
+.lt3-stat__delta--up { color: var(--success); }
+.lt3-stat__delta--down { color: var(--danger); }
+
+/* ── Tables ─────────────────────────────────────────────────────────────── */
+.lt3-table { width: 100%; border-collapse: collapse; font-size: var(--lt3-text-sm); }
+.lt3-table th {
+  text-align: left;
+  font-size: var(--lt3-text-2xs);
+  font-weight: var(--lt3-weight-semi);
+  letter-spacing: var(--lt3-tracking-caps);
+  text-transform: uppercase;
+  color: var(--faint);
+  padding: var(--lt3-space-3) var(--lt3-space-3);
+  border-bottom: 1px solid var(--border);
+  position: sticky; top: 0; background: var(--surface); z-index: 1;
+}
+.lt3-table td {
+  padding: var(--lt3-space-3) var(--lt3-space-3);
+  border-bottom: 1px solid var(--line);
+  vertical-align: middle;
+}
+.lt3-table tr:last-child td { border-bottom: none; }
+.lt3-table tbody tr { transition: background var(--lt3-dur-1) var(--lt3-ease); }
+.lt3-table tbody tr:hover { background: var(--surface-2); }
+.lt3-table--clip { border: 1px solid var(--border); border-radius: var(--lt3-radius-md); overflow: hidden; }
+
+/* ── List rows ──────────────────────────────────────────────────────────── */
+.lt3-list { display: flex; flex-direction: column; }
+.lt3-list__item {
+  display: flex;
+  align-items: center;
+  gap: var(--lt3-space-3);
+  padding: var(--lt3-space-3) var(--lt3-space-1);
+  border-bottom: 1px solid var(--line);
+}
+.lt3-list__item:last-child { border-bottom: none; }
+.lt3-list__body { flex: 1; min-width: 0; }
+.lt3-list__title { font-weight: var(--lt3-weight-medium); font-size: var(--lt3-text-sm); }
+.lt3-list__meta { font-size: var(--lt3-text-xs); color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+/* ── Tabs / segmented ───────────────────────────────────────────────────── */
+.lt3-tabs { display: inline-flex; gap: var(--lt3-space-1); border-bottom: 1px solid var(--border); }
+.lt3-tab {
+  padding: var(--lt3-space-3) var(--lt3-space-4);
+  font-size: var(--lt3-text-sm);
+  font-weight: var(--lt3-weight-medium);
+  color: var(--muted);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  transition: color var(--lt3-dur-2) var(--lt3-ease), border-color var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-tab[data-active="true"] { color: var(--text); border-bottom-color: var(--accent); }
+.lt3-tab:hover { color: var(--text); }
+
+.lt3-seg {
+  display: inline-flex;
+  padding: 3px;
+  gap: 2px;
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--lt3-radius-sm);
+}
+.lt3-seg button {
+  padding: var(--lt3-space-2) var(--lt3-space-3);
+  border-radius: 7px;
+  font-size: var(--lt3-text-xs);
+  font-weight: var(--lt3-weight-semi);
+  color: var(--muted);
+  transition: background var(--lt3-dur-2) var(--lt3-ease), color var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-seg button[data-active="true"] { background: var(--surface); color: var(--text); box-shadow: var(--lt3-elev-1); }
+
+/* ── Toggle switch ──────────────────────────────────────────────────────── */
+.lt3-switch { position: relative; display: inline-flex; width: 42px; height: 24px; flex: none; }
+.lt3-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
+.lt3-switch span {
+  position: absolute; inset: 0;
+  background: var(--surface-3);
+  border: 1px solid var(--border);
+  border-radius: 99px;
+  transition: background var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-switch span::after {
+  content: ""; position: absolute; top: 2px; left: 2px;
+  width: 18px; height: 18px; border-radius: 99px;
+  background: var(--surface); box-shadow: var(--lt3-elev-1);
+  transition: transform var(--lt3-dur-2) var(--lt3-ease);
+}
+.lt3-switch input:checked + span { background: var(--accent); border-color: transparent; }
+.lt3-switch input:checked + span::after { transform: translateX(18px); }
+
+/* ── Meter / progress ───────────────────────────────────────────────────── */
+.lt3-meter { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
+.lt3-meter__fill { height: 100%; border-radius: 99px; background: var(--accent); transition: width var(--lt3-dur-4) var(--lt3-ease); }
+.lt3-meter__fill--vector { background: var(--lt3-pillar-vector); }
+.lt3-meter__fill--graph  { background: var(--lt3-pillar-graph); }
+.lt3-meter__fill--hybrid { background: var(--lt3-pillar-hybrid); }
+.lt3-meter__fill--ok { background: var(--success); }
+.lt3-meter__fill--warn { background: var(--warning); }
+
+/* ── Avatar ─────────────────────────────────────────────────────────────── */
+.lt3-avatar {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; flex: none;
+  border-radius: var(--lt3-radius-sm);
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-size: var(--lt3-text-xs);
+  font-weight: var(--lt3-weight-bold);
+  text-transform: uppercase;
+}
+
+/* ── States: empty / loading / error ────────────────────────────────────── */
+.lt3-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: var(--lt3-space-3);
+  padding: var(--lt3-space-8) var(--lt3-space-5);
+  text-align: center;
+  color: var(--muted);
+}
+.lt3-empty__icon {
+  display: grid; place-items: center;
+  width: 56px; height: 56px;
+  border-radius: var(--lt3-radius-lg);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  color: var(--faint);
+}
+.lt3-empty__icon .ti { font-size: 1.6rem; }
+.lt3-empty__title { font-size: var(--lt3-text-md); font-weight: var(--lt3-weight-semi); color: var(--text); }
+.lt3-empty__body { font-size: var(--lt3-text-sm); max-width: 38ch; }
+
+.lt3-skel {
+  border-radius: var(--lt3-radius-sm);
+  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
+  background-size: 400% 100%;
+  animation: lt3-shimmer 1.4s var(--lt3-ease) infinite;
+}
+.lt3-skel--line { height: 12px; margin: 6px 0; }
+.lt3-skel--block { height: 84px; }
+@keyframes lt3-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
+
+.lt3-spinner {
+  width: 18px; height: 18px;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 99px;
+  animation: lt3-spin 0.7s linear infinite;
+}
+@keyframes lt3-spin { to { transform: rotate(360deg); } }
+
+.lt3-banner {
+  display: flex; align-items: flex-start; gap: var(--lt3-space-3);
+  padding: var(--lt3-space-3) var(--lt3-space-4);
+  border-radius: var(--lt3-radius-md);
+  font-size: var(--lt3-text-sm);
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+}
+.lt3-banner--info { background: var(--accent-soft); border-color: transparent; color: var(--text); }
+.lt3-banner--warn { background: var(--lt3-warn-soft); border-color: transparent; }
+.lt3-banner--err  { background: var(--lt3-err-soft); border-color: transparent; }
+.lt3-banner .ti { font-size: 1.15rem; margin-top: 1px; }
+
+/* ── Toolbar ────────────────────────────────────────────────────────────── */
+.lt3-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--lt3-space-3);
+  flex-wrap: wrap;
+}
+
+/* ── Code block ─────────────────────────────────────────────────────────── */
+.lt3-code {
+  font-family: var(--lt3-font-mono);
+  font-size: var(--lt3-text-xs);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: var(--lt3-radius-sm);
+  padding: var(--lt3-space-3) var(--lt3-space-4);
+  overflow: auto;
+  white-space: pre;
+  color: var(--text);
+}
+
+/* ── Divider ────────────────────────────────────────────────────────────── */
+.lt3-divider { height: 1px; background: var(--border); border: none; margin: var(--lt3-space-2) 0; }
+
+/* ── Toast ──────────────────────────────────────────────────────────────── */
+.lt3-toasts {
+  position: fixed;
+  bottom: var(--lt3-space-5);
+  right: var(--lt3-space-5);
+  z-index: var(--lt3-z-toast);
+  display: flex; flex-direction: column; gap: var(--lt3-space-2);
+  pointer-events: none;
+}
+.lt3-toast {
+  pointer-events: auto;
+  display: flex; align-items: center; gap: var(--lt3-space-3);
+  min-width: 240px; max-width: 380px;
+  padding: var(--lt3-space-3) var(--lt3-space-4);
+  background: var(--surface-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--lt3-radius-md);
+  box-shadow: var(--lt3-elev-2);
+  font-size: var(--lt3-text-sm);
+  animation: lt3-toast-in var(--lt3-dur-3) var(--lt3-ease-out);
+}
+.lt3-toast--ok   { border-left: 3px solid var(--success); }
+.lt3-toast--err  { border-left: 3px solid var(--danger); }
+.lt3-toast--info { border-left: 3px solid var(--accent); }
+@keyframes lt3-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }