ltcai 2.2.2 → 3.0.1

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; } }