ltcai 0.1.26 → 0.1.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,169 @@
1
+ /* ============================================================
2
+ * Lattice AI — Design Tokens (Single Source of Truth)
3
+ *
4
+ * 명세: lattice_ai_full_spec.pptx 슬라이드 19 (디자인 토큰)
5
+ *
6
+ * 이 파일이 모든 화면의 색·간격·타이포·반경·모션의 기준이다.
7
+ * chat.html / graph.html / admin.html / account.html 의 :root {}
8
+ * 블록은 점차 이 파일의 변수만 참조하도록 정리할 것.
9
+ *
10
+ * 토큰 명명 규칙:
11
+ * --lt-{category}-{scale} (예: --lt-color-primary-600)
12
+ * --lt-bg / --lt-ink / --lt-accent-* 는 의미 토큰 (semantic)
13
+ * 기존 --bg / --text 등은 이 파일의 의미 토큰으로 alias
14
+ * ============================================================ */
15
+
16
+ :root {
17
+ /* ── Brand · Color (raw scale) ────────────────────────────── */
18
+ --lt-color-primary-100: #EAE2FD;
19
+ --lt-color-primary-200: #D3C2FB;
20
+ --lt-color-primary-400: #9A78F0;
21
+ --lt-color-primary-600: #6E4AE6; /* PRIMARY — Lattice 보라 */
22
+ --lt-color-primary-800: #3B1F8E; /* PRIMARY_DEEP */
23
+
24
+ --lt-color-ink-900: #0E102A; /* 본문/제목 텍스트 (딥 네이비) */
25
+ --lt-color-ink-700: #2A2D4A;
26
+ --lt-color-ink-600: #4A4F6D; /* 보조 텍스트 */
27
+ --lt-color-ink-400: #8A90A7; /* 캡션 */
28
+ --lt-color-ink-200: #C8CCDC;
29
+ --lt-color-line: #E3E3F0; /* 경계선 */
30
+
31
+ --lt-color-surface-0: #FFFFFF; /* 페이지 배경 (라이트) */
32
+ --lt-color-surface-50: #F7F5FD; /* 카드 면 */
33
+ --lt-color-surface-100:#EEE7FE; /* 보조 면 */
34
+
35
+ --lt-color-dark-0: #0B0B1E; /* 페이지 배경 (다크) */
36
+ --lt-color-dark-50: #151539;
37
+ --lt-color-dark-card: #181A35;
38
+ --lt-color-dark-line: rgba(151,179,231,0.18);
39
+
40
+ /* Accents */
41
+ --lt-color-accent-cyan: #18C6D9;
42
+ --lt-color-accent-green: #2FC28E;
43
+ --lt-color-accent-amber: #F1A52A;
44
+ --lt-color-accent-pink: #F060B8;
45
+ --lt-color-danger: #F47171;
46
+
47
+ /* ── Spacing · 4px grid ──────────────────────────────────── */
48
+ --lt-space-1: 4px;
49
+ --lt-space-2: 8px;
50
+ --lt-space-3: 12px;
51
+ --lt-space-4: 16px;
52
+ --lt-space-5: 24px;
53
+ --lt-space-6: 32px;
54
+ --lt-space-7: 48px;
55
+ --lt-space-8: 64px;
56
+
57
+ /* ── Radius ──────────────────────────────────────────────── */
58
+ --lt-radius-sm: 8px;
59
+ --lt-radius-md: 12px;
60
+ --lt-radius-lg: 16px;
61
+ --lt-radius-xl: 24px;
62
+ --lt-radius-pill: 9999px;
63
+
64
+ /* ── Typography ──────────────────────────────────────────── */
65
+ --lt-font-head: "Pretendard", "Inter", -apple-system, BlinkMacSystemFont,
66
+ "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR",
67
+ system-ui, sans-serif;
68
+ --lt-font-body: var(--lt-font-head);
69
+ --lt-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas,
70
+ "Liberation Mono", monospace;
71
+
72
+ --lt-fs-display: 32px;
73
+ --lt-fs-title: 22px;
74
+ --lt-fs-section: 18px;
75
+ --lt-fs-body: 14px;
76
+ --lt-fs-caption: 11px;
77
+ --lt-fs-mono: 12px;
78
+
79
+ --lt-fw-regular: 400;
80
+ --lt-fw-medium: 500;
81
+ --lt-fw-semibold:600;
82
+ --lt-fw-bold: 700;
83
+
84
+ --lt-lh-tight: 1.15;
85
+ --lt-lh-normal: 1.4;
86
+ --lt-lh-relaxed: 1.55;
87
+
88
+ /* ── Motion ──────────────────────────────────────────────── */
89
+ --lt-motion-fast: 120ms;
90
+ --lt-motion-normal: 200ms;
91
+ --lt-motion-slow: 280ms;
92
+ --lt-motion-ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */
93
+
94
+ /* ── Shadow ──────────────────────────────────────────────── */
95
+ --lt-shadow-sm: 0 4px 12px rgba(14, 16, 42, 0.06);
96
+ --lt-shadow-md: 0 12px 32px rgba(14, 16, 42, 0.10);
97
+ --lt-shadow-lg: 0 24px 64px rgba(14, 16, 42, 0.14);
98
+
99
+ /* ── Semantic aliases — LIGHT mode (default) ──────────────── */
100
+ --lt-bg: var(--lt-color-surface-0);
101
+ --lt-surface: var(--lt-color-surface-50);
102
+ --lt-surface-2: var(--lt-color-surface-100);
103
+ --lt-ink: var(--lt-color-ink-900);
104
+ --lt-ink-soft: var(--lt-color-ink-600);
105
+ --lt-muted: var(--lt-color-ink-400);
106
+ --lt-line: var(--lt-color-line);
107
+ --lt-accent: var(--lt-color-primary-600);
108
+ --lt-accent-deep: var(--lt-color-primary-800);
109
+ }
110
+
111
+ /* ── Semantic aliases — DARK mode ──────────────────────────── */
112
+ :root[data-lt-theme="dark"],
113
+ .lt-theme-dark {
114
+ --lt-bg: var(--lt-color-dark-0);
115
+ --lt-surface: var(--lt-color-dark-50);
116
+ --lt-surface-2: var(--lt-color-dark-card);
117
+ --lt-ink: #FFFFFF;
118
+ --lt-ink-soft: var(--lt-color-ink-200);
119
+ --lt-muted: #8B92AC;
120
+ --lt-line: var(--lt-color-dark-line);
121
+ --lt-accent: var(--lt-color-primary-400);
122
+ --lt-accent-deep:var(--lt-color-primary-200);
123
+ }
124
+
125
+ /* Auto dark mode (respects OS preference unless overridden) */
126
+ @media (prefers-color-scheme: dark) {
127
+ :root:not([data-lt-theme="light"]) {
128
+ --lt-bg: var(--lt-color-dark-0);
129
+ --lt-surface: var(--lt-color-dark-50);
130
+ --lt-surface-2: var(--lt-color-dark-card);
131
+ --lt-ink: #FFFFFF;
132
+ --lt-ink-soft: var(--lt-color-ink-200);
133
+ --lt-muted: #8B92AC;
134
+ --lt-line: var(--lt-color-dark-line);
135
+ --lt-accent: var(--lt-color-primary-400);
136
+ --lt-accent-deep:var(--lt-color-primary-200);
137
+ }
138
+ }
139
+
140
+ /* ============================================================
141
+ * Backward-compat aliases for legacy --bg / --text / --accent.
142
+ * 기존 HTML 들이 자체 :root 를 가지고 있어도, 이 파일을 import 한
143
+ * 뒤 자체 :root 의 값을 지우면 자연히 토큰을 따라간다.
144
+ * ============================================================ */
145
+ :root {
146
+ --bg: var(--lt-bg);
147
+ --surface: var(--lt-surface);
148
+ --surface-2: var(--lt-surface-2);
149
+ --text: var(--lt-ink);
150
+ --muted: var(--lt-ink-soft);
151
+ --faint: var(--lt-muted);
152
+ --border: var(--lt-line);
153
+ --accent: var(--lt-accent);
154
+ --accent-2: var(--lt-color-accent-amber);
155
+ --accent-3: var(--lt-color-accent-cyan);
156
+ --accent-pink: var(--lt-color-accent-pink);
157
+ --danger: var(--lt-color-danger);
158
+ --radius: var(--lt-radius-lg);
159
+ --radius-sm: var(--lt-radius-sm);
160
+ }
161
+
162
+ /* ── Reduced motion (a11y) ─────────────────────────────────── */
163
+ @media (prefers-reduced-motion: reduce) {
164
+ :root {
165
+ --lt-motion-fast: 1ms;
166
+ --lt-motion-normal: 1ms;
167
+ --lt-motion-slow: 1ms;
168
+ }
169
+ }
package/static/graph.html CHANGED
@@ -4,6 +4,7 @@
4
4
  <meta charset="utf-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
6
  <title>Lattice AI - Data Graph</title>
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
7
8
  <style>
8
9
  :root {
9
10
  color-scheme: dark;
@@ -547,8 +548,24 @@
547
548
  }
548
549
  }
549
550
  </style>
551
+ <link rel="stylesheet" href="/static/lattice-reference.css">
550
552
  </head>
551
- <body>
553
+ <body class="lattice-ref-graph">
554
+ <aside class="reference-rail graph-rail">
555
+ <div class="rail-brand"><i class="ti ti-chart-dots-3"></i><strong>Lattice AI</strong></div>
556
+ <nav>
557
+ <a href="/chat"><i class="ti ti-home"></i> 홈</a>
558
+ <a class="active" href="/graph"><i class="ti ti-chart-dots-3"></i> 지식 그래프</a>
559
+ <a href="/chat"><i class="ti ti-message-circle"></i> 대화</a>
560
+ <a href="/chat"><i class="ti ti-file"></i> 파일</a>
561
+ <a href="/chat"><i class="ti ti-code"></i> 코드</a>
562
+ <a href="/chat"><i class="ti ti-settings"></i> 설정</a>
563
+ </nav>
564
+ <div class="rail-project">
565
+ <span>프로젝트</span>
566
+ <strong>Lattice AI Platform</strong>
567
+ </div>
568
+ </aside>
552
569
  <div class="app">
553
570
  <main class="stage">
554
571
  <canvas id="graph"></canvas>