ltcai 2.2.0 → 2.2.2

package/static/scripts/ux.js

@@ -0,0 +1,167 @@
+/* ============================================================================
+ * Lattice AI — Shared UX runtime (v2.2.2)
+ *
+ * 모든 페이지에서 로드된다. 페이지마다 일부 요소가 없을 수 있으므로 전부
+ * 방어적으로(존재 확인 후) 동작한다. 기존 chat.js / graph.js / admin.js 의
+ * 함수를 재정의하지 않고, 새 전역 기능만 추가한다.
+ *
+ *   - 다크/라이트 테마 (localStorage + OS 선호 + 토글)
+ *   - 모바일 키보드 inset (--kb-inset) : 입력창이 키보드에 안 가리게
+ *   - Escape 로 열린 모달/오버레이 닫기
+ *   - 브레이크포인트 넘으면 열린 드로어 자동 정리
+ *   - 그래프/관리자 네비 드로어 토글
+ * ========================================================================== */
+(function () {
+  "use strict";
+
+  var root = document.documentElement;
+
+  /* ---------- 1. 테마 ---------- */
+  var THEME_KEY = "lt-theme";
+
+  function systemPrefersDark() {
+    return window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+
+  function storedTheme() {
+    try { return localStorage.getItem(THEME_KEY); } catch (e) { return null; }
+  }
+
+  function applyTheme(mode) {
+    if (mode !== "dark" && mode !== "light") {
+      mode = systemPrefersDark() ? "dark" : "light";
+    }
+    root.setAttribute("data-lt-theme", mode);
+    return mode;
+  }
+
+  // 초기 적용 (FOUC 최소화를 위해 가능한 한 빨리)
+  applyTheme(storedTheme());
+
+  window.setTheme = function (mode) {
+    var applied = applyTheme(mode);
+    try { localStorage.setItem(THEME_KEY, applied); } catch (e) {}
+    return applied;
+  };
+
+  window.toggleTheme = function () {
+    var cur = root.getAttribute("data-lt-theme") === "dark" ? "dark" : "light";
+    return window.setTheme(cur === "dark" ? "light" : "dark");
+  };
+
+  // 사용자가 명시 선택을 안 했으면 OS 변화 따라가기
+  if (window.matchMedia) {
+    try {
+      window.matchMedia("(prefers-color-scheme: dark)")
+        .addEventListener("change", function (e) {
+          if (!storedTheme()) applyTheme(e.matches ? "dark" : "light");
+        });
+    } catch (e) { /* Safari < 14 */ }
+  }
+
+  /* ---------- 2. 모바일 키보드 inset ---------- */
+  var vv = window.visualViewport;
+  if (vv) {
+    var updateKbInset = function () {
+      // 레이아웃 뷰포트와 비주얼 뷰포트의 차이 = 키보드(또는 브라우저 UI) 높이
+      var inset = Math.max(0, window.innerHeight - vv.height - vv.offsetTop);
+      // 작은 값(브라우저 바 미세 변화)은 무시
+      root.style.setProperty("--kb-inset", (inset > 80 ? inset : 0) + "px");
+    };
+    vv.addEventListener("resize", updateKbInset);
+    vv.addEventListener("scroll", updateKbInset);
+    // 입력에 포커스되면 화면 안으로 스크롤
+    document.addEventListener("focusin", function (e) {
+      var t = e.target;
+      if (t && (t.tagName === "TEXTAREA" || t.tagName === "INPUT")) {
+        setTimeout(function () {
+          if (t.scrollIntoView) {
+            try { t.scrollIntoView({ block: "center", behavior: "smooth" }); }
+            catch (err) { t.scrollIntoView(); }
+          }
+        }, 250);
+      }
+    });
+  }
+
+  /* ---------- 3. 드로어 토글 (그래프 / 관리자) ---------- */
+  function bodyHas(cls) { return document.body.classList.contains(cls); }
+
+  window.toggleGraphNav = function () {
+    document.body.classList.toggle("graph-nav-open");
+  };
+  window.closeGraphNav = function () {
+    document.body.classList.remove("graph-nav-open");
+  };
+  window.toggleAdminRail = function () {
+    document.body.classList.toggle("admin-rail-open");
+  };
+  window.closeAdminRail = function () {
+    document.body.classList.remove("admin-rail-open");
+  };
+
+  /* ---------- 4. Escape 로 닫기 ---------- */
+  var OVERLAY_SELECTORS = [
+    ".acct-modal-overlay", ".mcp-modal-overlay", ".mode-modal-overlay",
+    ".workspace-modal-overlay", ".advanced-settings-overlay", ".model-overlay",
+    ".perm-overlay", ".onboarding-overlay", ".pipeline-overlay",
+    ".admin-overlay", ".vpc-overlay", ".status-overlay", ".cu-overlay",
+    ".file-create-overlay", ".file-editor-overlay", ".local-browser-overlay"
+  ];
+
+  function isVisible(el) {
+    if (!el) return false;
+    var s = window.getComputedStyle(el);
+    return s.display !== "none" && s.visibility !== "hidden" && el.offsetParent !== null;
+  }
+
+  function closeTopOverlay() {
+    // 1) 드로어 먼저
+    if (bodyHas("sidebar-open")) { document.body.classList.remove("sidebar-open"); return true; }
+    if (bodyHas("graph-nav-open")) { window.closeGraphNav(); return true; }
+    if (bodyHas("admin-rail-open")) { window.closeAdminRail(); return true; }
+
+    // 2) 보이는 오버레이를 위에서부터 닫기
+    var overlays = document.querySelectorAll(OVERLAY_SELECTORS.join(","));
+    for (var i = overlays.length - 1; i >= 0; i--) {
+      var el = overlays[i];
+      if (isVisible(el)) {
+        // 닫기 버튼이 있으면 클릭, 없으면 직접 숨김
+        var btn = el.querySelector(
+          "[onclick*='close'],.modal-close,.mcp-modal-close,.admin-close,.mode-close,.acct-close"
+        );
+        if (btn && btn.click) { btn.click(); }
+        else { el.style.display = "none"; }
+        return true;
+      }
+    }
+    return false;
+  }
+
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape" || e.keyCode === 27) {
+      if (closeTopOverlay()) { e.stopPropagation(); }
+    }
+  });
+
+  /* ---------- 5. 브레이크포인트 넘으면 드로어 정리 ---------- */
+  if (window.matchMedia) {
+    var desktop = window.matchMedia("(min-width: 1025px)");
+    var onDesktop = function (e) {
+      if (e.matches) {
+        document.body.classList.remove("sidebar-open", "graph-nav-open", "admin-rail-open");
+      }
+    };
+    try { desktop.addEventListener("change", onDesktop); }
+    catch (e2) { /* old Safari */ try { desktop.addListener(onDesktop); } catch (e3) {} }
+  }
+
+  /* ---------- 6. 새 드로어용 오버레이 백드롭 클릭 ---------- */
+  document.addEventListener("click", function (e) {
+    var t = e.target;
+    if (t && t.classList && t.classList.contains("sidebar-overlay")) {
+      document.body.classList.remove("graph-nav-open", "admin-rail-open");
+    }
+  });
+})();

package/static/workflows.html

@@ -2,9 +2,12 @@
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
   <title>Workflow Designer — Lattice AI</title>
-  <link rel="stylesheet" href="/static/platform.css" />
+  <script src="/static/scripts/ux.js?v=2.2.2"></script>
+  <link rel="stylesheet" href="/static/css/tokens.css?v=2.2.2" />
+  <link rel="stylesheet" href="/static/platform.css?v=2.2.2" />
+  <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.2" />
 </head>
 <body>
   <main>

package/static/workspace.css

@@ -1,21 +1,42 @@
 :root {
-  color-scheme: light;
-  --bg: #f6f7f9;
-  --surface: #ffffff;
-  --surface-2: #f0f4f8;
-  --ink: #101828;
-  --muted: #667085;
-  --line: #d9e0e8;
-  --blue: #2563eb;
+  /* Map the local palette onto the shared design tokens so this page
+     inverts cleanly under :root[data-lt-theme="dark"]. Light defaults
+     stay visually close to the original hand-tuned values. */
+  --bg: var(--lt-bg, #f6f7f9);
+  --surface: var(--lt-surface, #ffffff);
+  --surface-2: var(--lt-surface-2, #f0f4f8);
+  --ink: var(--lt-ink, #101828);
+  --muted: var(--lt-muted, #667085);
+  --line: var(--lt-line, #d9e0e8);
+  --blue: var(--lt-accent, #2563eb);
   --green: #12805c;
   --amber: #b45309;
   --pink: #be185d;
   --red: #c2410c;
   --radius: 8px;
-  --shadow: 0 12px 34px rgba(16, 24, 40, 0.08);
+  --shadow: var(--lt-shadow-md, 0 12px 34px rgba(16, 24, 40, 0.08));
+  /* Rail keeps its dark-navy identity in light mode; dark mode remaps it
+     to a shared surface token below so it inverts coherently. */
+  --rail-bg: #111827;
+  --rail-ink: #e5e7eb;
+  --rail-ink-soft: #b8c0cc;
+  --rail-ink-strong: #fff;
+  --rail-hover: rgba(255, 255, 255, 0.08);
+  --rail-line: rgba(255, 255, 255, 0.12);
   font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
+/* Dark theme: remap the rail to the shared surface tokens so it inverts
+   instead of staying permanently navy. */
+:root[data-lt-theme="dark"] {
+  --rail-bg: var(--lt-surface-2);
+  --rail-ink: var(--lt-ink);
+  --rail-ink-soft: var(--lt-ink-soft);
+  --rail-ink-strong: var(--lt-ink);
+  --rail-hover: rgba(255, 255, 255, 0.06);
+  --rail-line: var(--lt-line);
+}
+
 * { box-sizing: border-box; }
 
 html { scroll-behavior: smooth; }
@@ -40,14 +61,16 @@ button {
   display: grid;
   grid-template-columns: 248px minmax(0, 1fr);
   min-height: 100vh;
+  min-height: 100dvh;
 }
 
 .workspace-rail {
   position: sticky;
   top: 0;
   height: 100vh;
-  background: #111827;
-  color: #e5e7eb;
+  height: 100dvh;
+  background: var(--rail-bg);
+  color: var(--rail-ink);
   padding: 18px 14px;
   display: flex;
   flex-direction: column;
@@ -58,7 +81,7 @@ button {
   display: flex;
   align-items: center;
   gap: 10px;
-  color: #fff;
+  color: var(--rail-ink-strong);
   text-decoration: none;
   font-weight: 800;
   padding: 8px;
@@ -77,7 +100,7 @@ button {
 }
 
 .workspace-rail a {
-  color: #b8c0cc;
+  color: var(--rail-ink-soft);
   text-decoration: none;
 }
 
@@ -94,12 +117,12 @@ button {
 .workspace-rail nav a.active,
 .workspace-rail nav a:hover,
 .rail-links a:hover {
-  background: rgba(255,255,255,0.08);
-  color: #fff;
+  background: var(--rail-hover);
+  color: var(--rail-ink-strong);
 }
 
 .rail-links {
-  border-top: 1px solid rgba(255,255,255,0.12);
+  border-top: 1px solid var(--rail-line);
   padding-top: 12px;
   margin-top: auto;
 }
@@ -422,6 +445,11 @@ textarea {
   position: absolute;
   opacity: 0;
   pointer-events: none;
+  /* 절대배치 + width:auto 인 체크박스는 컨테이닝 블록(뷰포트) 폭만큼 늘어나
+   * 가로 오버플로우를 만든다. 1px 박스로 가둬 레이아웃에 영향 없게 한다. */
+  width: 1px;
+  height: 1px;
+  margin: 0;
 }
 
 .toggle-row span {
@@ -521,8 +549,8 @@ textarea {
   gap: 8px;
   padding: 6px 10px;
   border-radius: 10px;
-  background: rgba(255, 255, 255, 0.06);
-  border: 1px solid rgba(255, 255, 255, 0.12);
+  background: var(--rail-hover);
+  border: 1px solid var(--rail-line);
 }
 .workspace-switcher select {
   background: transparent;
@@ -600,7 +628,7 @@ textarea {
 /* Enterprise capability grid */
 .capability-grid {
   display: grid; gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
   margin-top: 12px;
 }
 .capability-card {
@@ -684,3 +712,16 @@ textarea {
     grid-template-columns: 1fr;
   }
 }
+
+/* v2.2.1 — 태블릿(761~1024) 레일 슬림화로 본문 공간 확보 */
+@media (min-width: 761px) and (max-width: 1024px) {
+  .workspace-shell { grid-template-columns: 196px minmax(0, 1fr); }
+  .workspace-rail { padding: 14px 10px; }
+}
+
+/* v2.2.1 — 터치 영역 44px 보장 */
+@media (hover: none), (max-width: 760px) {
+  .icon-action { min-width: 44px; min-height: 44px; }
+  .small-action { min-height: 44px; }
+  .workspace-rail a { min-height: 44px; display: flex; align-items: center; }
+}

package/static/workspace.html

@@ -2,13 +2,16 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
   <title>Lattice AI Workspace OS</title>
+  <script src="/static/scripts/ux.js?v=2.2.2"></script>
   <link rel="manifest" href="/manifest.json">
   <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
-  <link rel="stylesheet" href="/static/workspace.css?v=2.2.0">
+  <link rel="stylesheet" href="/static/css/tokens.css?v=2.2.2">
+  <link rel="stylesheet" href="/static/workspace.css?v=2.2.2">
+  <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.2">
 </head>
 <body>
   <div class="workspace-shell">