@ti-engine/web-framework 1.13.1

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.
Files changed (42) hide show
  1. package/.env +4 -0
  2. package/CHANGELOG.md +274 -0
  3. package/README.md +26 -0
  4. package/bin/build/post-install.js +18 -0
  5. package/bin/localization/web-server-labels.json +28 -0
  6. package/bin/static/.well-known/appspecific/com.chrome.devtools.json +6 -0
  7. package/bin/static/favicon.ico +0 -0
  8. package/bin/static/fragments/components/component-notification-bar.html +21 -0
  9. package/bin/static/fragments/components/component-sidebar-flyout.html +37 -0
  10. package/bin/static/fragments/components/component-sidebar.html +33 -0
  11. package/bin/static/fragments/components/component-tooltip.html +11 -0
  12. package/bin/static/fragments/components/component-topbar.html +6 -0
  13. package/bin/static/fragments/frame-administration.html +3 -0
  14. package/bin/static/fragments/frame-application.html +19 -0
  15. package/bin/static/fragments/frame-dashboard.html +3 -0
  16. package/bin/static/fragments/frame-login.html +105 -0
  17. package/bin/static/fragments/frame-not-found.html +3 -0
  18. package/bin/static/fragments/frame-profile.html +3 -0
  19. package/bin/static/index.html +23 -0
  20. package/bin/static/scripts/lib/alpinejs-csp.min.js +7 -0
  21. package/bin/static/scripts/lib/htmx.min.js +1 -0
  22. package/bin/static/scripts/lib/safe-nonce.min.js +1 -0
  23. package/bin/static/scripts/ti-charts.js +1591 -0
  24. package/bin/static/scripts/ti-framework.css +3195 -0
  25. package/bin/static/scripts/ti-framework.js +1427 -0
  26. package/bin/static/scripts/ti-theme-black-glass.css +216 -0
  27. package/bin/static/scripts/ti-theme-daylight.css +87 -0
  28. package/bin/web-app-manager.js +564 -0
  29. package/bin/web-server.js +604 -0
  30. package/bin/web-server.json +49 -0
  31. package/components/admin-config-handlers.js +92 -0
  32. package/components/auth-manager.js +344 -0
  33. package/components/authorization.js +135 -0
  34. package/components/config-change-notifier.js +98 -0
  35. package/components/config-registry.js +246 -0
  36. package/components/config-service.js +349 -0
  37. package/components/config-store.js +246 -0
  38. package/components/definitions.types.js +26 -0
  39. package/components/session-store.js +111 -0
  40. package/components/user.js +133 -0
  41. package/components/web-handlers.js +765 -0
  42. package/package.json +66 -0
package/bin/static/scripts/ti-theme-black-glass.css ADDED
@@ -0,0 +1,216 @@
1
+ /* ============================================================
2
+ Black Glass v2 — refined dark theme
3
+ Activate with: <html data-theme="glass">
4
+ ============================================================ */
5
+
6
+ [data-theme="glass"] {
7
+ /* Surface & background */
8
+ --bg-app: #0B0D12;
9
+ --bg-surface: rgba(22, 25, 33, 0.72);
10
+ --bg-sunken: rgba(14, 16, 22, 0.55);
11
+ --bg-tint: rgba(255, 255, 255, 0.04);
12
+ --bg-overlay: rgba(4, 5, 8, 0.66);
13
+
14
+ /* Foreground */
15
+ --fg-primary: rgba(245, 246, 250, 0.96);
16
+ --fg-secondary: rgba(225, 228, 236, 0.62);
17
+ --fg-tertiary: rgba(225, 228, 236, 0.40);
18
+ --fg-on-accent: #1A0F0B;
19
+ --fg-inverse: #1A1714;
20
+
21
+ /* Borders */
22
+ --border: rgba(255, 255, 255, 0.08);
23
+ --border-strong: rgba(255, 255, 255, 0.14);
24
+ --border-soft: rgba(255, 255, 255, 0.05);
25
+
26
+ /* Accent */
27
+ --accent: #FF8A6E;
28
+ --accent-hover: #FF9F87;
29
+ --accent-soft: rgba(255, 138, 110, 0.14);
30
+ --accent-ring: rgba(255, 138, 110, 0.32);
31
+
32
+ /* Semantic */
33
+ --success: #5BD49E;
34
+ --success-soft: rgba(91, 212, 158, 0.14);
35
+ --warn: #F4B860;
36
+ --warn-soft: rgba(244, 184, 96, 0.14);
37
+ --danger: #FF7D78;
38
+ --danger-soft: rgba(255, 125, 120, 0.14);
39
+ --info: #6FB3FF;
40
+ --info-soft: rgba(111, 179, 255, 0.14);
41
+ --muted: rgba(225, 228, 236, 0.52);
42
+ --muted-soft: rgba(255, 255, 255, 0.06);
43
+
44
+ /* Grade colors */
45
+ --grade-S: #5BD49E;
46
+ --grade-S-soft: rgba(91, 212, 158, 0.16);
47
+ --grade-R: #6FB3FF;
48
+ --grade-R-soft: rgba(111, 179, 255, 0.16);
49
+ --grade-U: #F4B860;
50
+ --grade-U-soft: rgba(244, 184, 96, 0.16);
51
+ --grade-N: rgba(225, 228, 236, 0.45);
52
+ --grade-N-soft: rgba(255, 255, 255, 0.07);
53
+
54
+ /* Sequential chart ramp (dark → light) — heatmap value-view; mirror of the daylight ramp,
55
+ brightened toward the high end so cells read against the glass backdrop. */
56
+ --chart-seq-1: #1B3A5C;
57
+ --chart-seq-2: #2E5E8F;
58
+ --chart-seq-3: #4E86BD;
59
+ --chart-seq-4: #7FB0E0;
60
+ --chart-seq-5: #B7D5F4;
61
+
62
+ /* Shadows */
63
+ --shadow-xs: inset 0 1px 0 rgba(255, 255, 255, 0.04);
64
+ --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
65
+ --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
66
+ --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.06);
67
+ --shadow-focus: 0 0 0 4px var(--accent-ring);
68
+
69
+ /* Sidebar */
70
+ --sidebar-bg: rgba(10, 12, 17, 0.78);
71
+ --sidebar-fg: rgba(245, 246, 250, 0.74);
72
+ --sidebar-fg-active: #FFFFFF;
73
+ --sidebar-active-bg: rgba(255, 138, 110, 0.16);
74
+ --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
75
+ --sidebar-divider: rgba(255, 255, 255, 0.06);
76
+ --sidebar-accent: var(--accent);
77
+
78
+ --grid-line: rgba(255, 255, 255, 0.04);
79
+
80
+ color-scheme: dark;
81
+ }
82
+
83
+ [data-theme="glass"] body {
84
+ background: radial-gradient(1200px 600px at 20% -10%, rgba(255, 138, 110, 0.08), transparent 60%),
85
+ radial-gradient(900px 600px at 100% 100%, rgba(111, 179, 255, 0.06), transparent 60%),
86
+ linear-gradient(180deg, #0A0B10 0%, #0B0D12 100%);
87
+ background-attachment: fixed;
88
+ }
89
+
90
+ /* Glass surface blur effect */
91
+ [data-theme="glass"] .sidebar,
92
+ [data-theme="glass"] .topbar,
93
+ [data-theme="glass"] .panel,
94
+ [data-theme="glass"] .card {
95
+ backdrop-filter: blur(18px) saturate(140%);
96
+ -webkit-backdrop-filter: blur(18px) saturate(140%);
97
+ }
98
+
99
+ /* ============================================================
100
+ Legacy Glass v1 classes — kept for backward compatibility
101
+ ============================================================ */
102
+ :root {
103
+ --ti-glass-tint: rgb(8 8 12 / 78%);
104
+ --ti-glass-tint-strong: rgb(8 8 12 / 90%);
105
+ --ti-glass-tint-primary: rgb(77 109 143);
106
+ --ti-glass-border: rgb(255 255 255 / 8%);
107
+ --ti-glass-highlight: rgb(255 255 255 / 6%);
108
+ --ti-glass-shadow: rgb(0 0 0 / 60%);
109
+ --ti-glass-blur: 14px;
110
+ --ti-back-pane-bg: rgb(156 156 156 / 72%);
111
+ --ti-sidebar-fg: rgb(240 242 248 / 92%);
112
+ --ti-sidebar-fg-dim: rgb(240 242 248 / 65%);
113
+ --ti-accent: #4da3ff;
114
+ --ti-flyout-item-shadow: inset 6px 6px 12px rgb(0 0 0 / 65%), inset -6px -6px 12px rgb(255 255 255 / 4%);
115
+ --ti-flyout-item-active-shadow: inset 8px 8px 16px rgb(0 0 0 / 75%), inset -8px -8px 16px rgb(255 255 255 / 3%);
116
+ --ti-flyout-item-hover-bg: rgb(255 255 255 / 4%);
117
+ --ti-flyout-sep-color: rgb(255 255 255 / 8%);
118
+ --ti-tooltip-bg-color: rgb(69 69 69 / 90%);
119
+ --ti-tooltip-fg-color: var(--ti-sidebar-fg);
120
+ --ti-tooltip-font-size: 0.875rem;
121
+ --ti-tooltip-line-height: 1.4;
122
+ --ti-tooltip-border-radius: 6px;
123
+ --ti-tooltip-padding: 8px 12px;
124
+ --ti-tooltip-gap: 8px;
125
+ --ti-tooltip-max-width: min(80vw, 360px);
126
+ --ti-tooltip-arrow-size: 6px;
127
+ --ti-tooltip-shadow: 0 12px 28px rgb(0 0 0 / 55%), inset 0 1px 0 rgb(255 255 255 / 6%);
128
+ }
129
+
130
+ .ti-glass-panel-black {
131
+ color: var(--ti-sidebar-fg);
132
+ background-image: linear-gradient(0deg, var(--ti-glass-tint), var(--ti-glass-tint)),
133
+ linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%)),
134
+ linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%));
135
+ background-blend-mode: normal, overlay, soft-light;
136
+ background-color: transparent;
137
+ background-clip: padding-box;
138
+ backdrop-filter: blur(var(--ti-glass-blur)) saturate(140%);
139
+ -webkit-backdrop-filter: blur(var(--ti-glass-blur)) saturate(140%);
140
+ box-shadow: inset 0 1px 0 var(--ti-glass-highlight),
141
+ 0 20px 50px var(--ti-glass-shadow),
142
+ 0 4px 12px rgb(0 0 0 / 35%);
143
+ }
144
+
145
+ .ti-glass-btn-black {
146
+ -webkit-tap-highlight-color: transparent;
147
+ appearance: none;
148
+ border: 0;
149
+ background: transparent;
150
+ padding-inline: 0;
151
+ justify-content: center;
152
+ color: var(--ti-sidebar-fg-dim);
153
+ box-shadow: inset 2px 2px 6px rgb(0 0 0 / 65%),
154
+ inset -2px -2px 6px rgb(255 255 255 / 4%),
155
+ 0 0 0 1px rgb(255 255 255 / 3%);
156
+ transition: box-shadow 160ms ease, color 160ms ease, transform 120ms ease, background-color 160ms ease;
157
+ }
158
+
159
+ .ti-glass-btn-black.large {
160
+ justify-content: flex-start;
161
+ padding-inline: var(--ti-padding);
162
+ }
163
+
164
+ .ti-glass-btn-black.on-screen,
165
+ .ti-glass-btn-black.primary {
166
+ background-blend-mode: normal, overlay, soft-light;
167
+ background-color: transparent;
168
+ background-clip: padding-box;
169
+ }
170
+
171
+ .ti-glass-btn-black.on-screen {
172
+ background-image: linear-gradient(0deg, var(--ti-glass-tint), var(--ti-glass-tint)),
173
+ linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%)),
174
+ linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%));
175
+ }
176
+
177
+ .ti-glass-btn-black.primary {
178
+ background-image: linear-gradient(0deg, var(--ti-glass-tint-primary), var(--ti-glass-tint-primary)),
179
+ linear-gradient(180deg, rgb(255 255 255 / 4%), rgb(255 255 255 / 1%)),
180
+ linear-gradient(180deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 3%));
181
+ }
182
+
183
+ .ti-glass-btn-black:hover {
184
+ color: var(--ti-sidebar-fg);
185
+ box-shadow: inset 1px 1px 4px rgb(0 0 0 / 58%),
186
+ inset -1px -1px 4px rgb(255 255 255 / 5%),
187
+ 0 0 0 1px rgb(255 255 255 / 4%);
188
+ }
189
+
190
+ .ti-glass-btn-black:active {
191
+ transform: translateY(1px);
192
+ box-shadow: inset 3px 3px 8px rgb(0 0 0 / 75%),
193
+ inset -3px -3px 8px rgb(255 255 255 / 3%),
194
+ 0 0 0 1px rgb(255 255 255 / 2%);
195
+ }
196
+
197
+ .ti-glass-btn-black:focus-visible {
198
+ outline: none;
199
+ color: var(--ti-sidebar-fg);
200
+ box-shadow: inset 1px 1px 4px rgb(0 0 0 / 60%),
201
+ inset -1px -1px 4px rgb(255 255 255 / 5%),
202
+ 0 0 0 1px rgb(255 255 255 / 9%),
203
+ 0 0 0 3px color-mix(in oklab, var(--ti-accent) 40%, transparent);
204
+ }
205
+
206
+ .ti-glass-btn-black.is-active {
207
+ color: var(--ti-sidebar-fg);
208
+ background-color: rgb(255 255 255 / 2%);
209
+ box-shadow: inset 3px 3px 8px rgb(0 0 0 / 75%),
210
+ inset -3px -3px 8px rgb(255 255 255 / 3%),
211
+ 0 0 0 1px rgb(255 255 255 / 5%);
212
+ }
213
+
214
+ .ti-glass-back-pane {
215
+ background-color: var(--ti-back-pane-bg, rgb(156 156 156 / 72%));
216
+ }
package/bin/static/scripts/ti-theme-daylight.css ADDED
@@ -0,0 +1,87 @@
1
+ /* ============================================================
2
+ Daylight Theme — warm light enterprise
3
+ Default theme for ti-engine web framework
4
+ Activate with: <html data-theme="daylight">
5
+ ============================================================ */
6
+
7
+ :root,
8
+ [data-theme="daylight"] {
9
+ /* Surface & background */
10
+ --bg-app: #F5F2EC;
11
+ --bg-surface: #FFFFFF;
12
+ --bg-sunken: #FAF7F1;
13
+ --bg-tint: #F2EEE5;
14
+ --bg-overlay: rgba(20, 18, 14, 0.42);
15
+
16
+ /* Foreground */
17
+ --fg-primary: #1A1714;
18
+ --fg-secondary: #5C564D;
19
+ --fg-tertiary: #8B8478;
20
+ --fg-on-accent: #FFFFFF;
21
+ --fg-inverse: #FFFFFF;
22
+
23
+ /* Borders */
24
+ --border: #E5DFD3;
25
+ --border-strong: #D4CBB8;
26
+ --border-soft: #EEE9DD;
27
+
28
+ /* Accent (warm coral) */
29
+ --accent: #E5523C;
30
+ --accent-hover: #C84528;
31
+ --accent-soft: #FCEAE4;
32
+ --accent-ring: rgba(229, 82, 60, 0.22);
33
+
34
+ /* Semantic */
35
+ --success: #1F7A4F;
36
+ --success-soft: #DDEFE3;
37
+ --warn: #B6741F;
38
+ --warn-soft: #F8EAD0;
39
+ --danger: #B5392E;
40
+ --danger-soft: #F7E0DC;
41
+ --info: #2462A4;
42
+ --info-soft: #DEEAF7;
43
+ --muted: #94897A;
44
+ --muted-soft: #ECE6D8;
45
+
46
+ /* Grade colors */
47
+ --grade-S: #1F7A4F;
48
+ --grade-S-soft: #DDEFE3;
49
+ --grade-R: #2462A4;
50
+ --grade-R-soft: #DEEAF7;
51
+ --grade-U: #B6741F;
52
+ --grade-U-soft: #F8EAD0;
53
+ --grade-N: #8B8478;
54
+ --grade-N-soft: #ECE6D8;
55
+
56
+ /* Sequential chart ramp (light → dark) — for heatmap value-view; deliberately distinct
57
+ from the categorical grade hues so a monochromatic scale reads correctly. */
58
+ --chart-seq-1: #EAF0F7;
59
+ --chart-seq-2: #C6D8EC;
60
+ --chart-seq-3: #92B4DA;
61
+ --chart-seq-4: #5286C0;
62
+ --chart-seq-5: #2462A4;
63
+
64
+ /* Shadows */
65
+ --shadow-xs: 0 1px 0 rgba(20, 18, 14, 0.04);
66
+ --shadow-sm: 0 1px 2px rgba(20, 18, 14, 0.06), 0 1px 1px rgba(20, 18, 14, 0.04);
67
+ --shadow-md: 0 4px 10px rgba(20, 18, 14, 0.06), 0 1px 2px rgba(20, 18, 14, 0.05);
68
+ --shadow-lg: 0 14px 40px rgba(20, 18, 14, 0.10), 0 2px 6px rgba(20, 18, 14, 0.04);
69
+ --shadow-focus: 0 0 0 4px var(--accent-ring);
70
+
71
+ /* Sidebar */
72
+ --sidebar-bg: #1F1A14;
73
+ --sidebar-fg: rgba(245, 240, 230, 0.78);
74
+ --sidebar-fg-active: #FFFFFF;
75
+ --sidebar-active-bg: rgba(229, 82, 60, 0.18);
76
+ --sidebar-hover-bg: rgba(255, 255, 255, 0.06);
77
+ --sidebar-divider: rgba(255, 255, 255, 0.08);
78
+ --sidebar-accent: var(--accent);
79
+
80
+ --grid-line: rgba(20, 18, 14, 0.045);
81
+
82
+ color-scheme: light;
83
+ }
84
+
85
+ [data-theme="daylight"] body {
86
+ background: var(--bg-app);
87
+ }