INotFail/Glint-Runtime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

move example template files to examples/, clean up root

Browse Source
This commit is contained in:
Glint Dev
2026-07-24 22:04:41 +03:00
parent 35f92435a3
commit e6523bd35b
9 changed files with 468 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
examples/glt/desktop.gltm Normal file
View File

@@ -0,0 +1,209 @@
// =============================================================================
// GLINT UI: Compact Reactive Test Suite (Fixed Layout)
// =============================================================================
@version 1
@style "main.glts"
// ── 1. Global Application State ──────────────────────────────────────────────
@global $APP_TITLE = "Glint Core Console"
@global $username = "Operator"
@global $volume_level = 50.0
@global $is_enabled = true
@global $access_level = 5.0
@global $team_nodes = ["Alpha", "Bravo", "Charlie"]
@global $show_toast = true
@singleton SystemSettings {
theme = "ocean-blue",
refresh_rate = 60,
debug_mode = true,
storage_path = fs:/var/lib/glint/assets
}
!rhei: {
fn load_status(val) {
if val == 0.0 { "💤 Muted" }
else if val >= 80.0 { "🔥 Overload" }
else { "⚡ Active" }
}
let sum = 0;
for i in 1..=5 { sum = sum + i; }
print("Rhai Engine online. Checksum: " + sum);
}
// ── 2. Reusable UI Components ────────────────────────────────────────────────
@component NodeCard(nodename: String, level: Float) {
Panel(class="ui-card") {
Label(text=$nodename)
@if !rhei: { level >= 5.0 } {
Text "🛡️ Secure Node"
} @else {
Text "🔓 Guest Node"
}
}
}
// ── 3. Application Layout Tree ───────────────────────────────────────────────
Window(title=$APP_TITLE, width=1024, height=720) {
Panel(class="sticky-header") {
Header "Glint Compiler/Runtime Demostration"
}
Panel(class="layout-viewport") {
// --- Верхняя панель (Header Section) ---
Panel(class="layout-row") {
Image(src=fs:/home/faynot/elyz/software/glt/logo.png) {}
Panel(class="layout-col") {
Header "Glint Reactive Dashboard"
Text !rhei: { "User: " + username + " | Status: " + load_status(volume_level) }
}
}
Divider()
// --- Главная рабочая область (Workspace Split) ---
Panel(class="layout-row") {
// Левая колонка: Интерактивное состояние и биндинги
Panel(class="layout-col") {
Panel(class="ui-card") {
Header "State Bindings"
Input(placeholder="Change title...", value=$APP_TITLE)
Toggle(label="Live Engine", value=$is_enabled)
@if $is_enabled {
Text "🟢 System: ONLINE"
} @else {
Text "🔴 System: OFFLINE"
}
}
Panel(class="ui-card") {
Header "Control Channels"
Slider(value=$volume_level)
ProgressBar(value=$volume_level)
Text !rhei: { "Metrics Level: " + volume_level + "%" }
}
}
// Правая колонка: Тестирование геометрии и каскада стилей
Panel(class="layout-col") {
Panel(class="geometry-box") {
Header "Box Model Geometry"
Text "Asymmetric padding layout container."
Panel(class="margin-test-item") {
Text "Margin-Top Spacer Box"
}
}
Panel(class="inheritance-box") {
Text "Inherited Yellow Color & 18px Font Size"
Text(class="override-style") "Explicit Style Override (Pink, 12px)"
}
// Управление уровнем доступа и изменение переменных по клику
Panel(class="ui-card") {
Header "Access Management"
Slider(value=$access_level)
// ── ТЕСТ POSITION: ABSOLUTE ─────────────────────
Panel(class="abs-demo-container") {
Panel(class="abs-demo-badge") {
Text "ABSOLUTE!"
}
Text "(бадж спозиционирован абсолютно)"
Button(label="Press me") {}
}
Panel(class="layout-row") {
Button(label="Set Admin (Lvl 9)", class="btn-custom") {
@on click { !rhei: { access_level = 9.0; } }
}
Button(label="Reset Access") {
@on click { !rhei: { access_level = 1.0; } }
}
}
}
}
}
// --- Динамический список узлов (@each Grid) ---
Panel(direction="grid", columns=3, gap=12, class="layout-clean") {
@each $node in $team_nodes {
NodeCard(nodename=$node, level=$access_level)
}
}
// --- Нижняя панель распределения пространства ---
Panel(class="flex-row-bar") {
Panel(class="fill-10") { Text "Grow 10%" }
Panel(class="fixed-120") { Text "Fixed 120px" }
Panel(class="fill-20") { Text "Grow 20%" }
}
}
// ── ТЕСТ ФИКСИРОВАННЫХ СЛОЕВ ───────────────────
@if $show_toast {
Panel(class="fixed-toast") {
Panel(class="layout-row") {
Text "🔔 [FIXED LAYER TEST]: Runtime compiled successfully!"
Button(label="❌", class="btn-close") {
@on click { !rhei: { show_toast = false; } }
}
}
}
}
Panel(class="scroll-test-box") {
Header "Scroll Test"
Text "Line 1: Item A"
Text "Line 2: Item B"
Text "Line 3: Item C"
Text "Line 4: Item D"
Text "Line 5: Item E"
Text "Line 6: Item F"
Text "Line 7: Item G"
Text "Line 8: Item H"
Text "Line 9: Item I"
Text "Line 10: Item J"
}
// ── ДЕМО POSITION: ABSOLUTE (Overlay-карточка) ────────────────────
Panel(class="absolute-demo-section") {
Header "Position: Absolute Demo"
Panel(class="abs-stage") {
Panel(class="abs-overlay") {
Text "🎯 Абсолютно спозиционирована!"
Text "top: 10px | right: 10px"
}
Text "Этот текст — часть нормального потока."
Text "Оверлей лежит поверх, не влияя на раскладку."
Text "Работает как position: absolute в CSS."
}
}
Panel(class="sticky-container") {
Text "Scroll down to test sticky effect (внутренний скролл):"
// Стикер внутри скролл-контейнера
Panel(class="sticky-header") {
Text "📌 STICKY: я прилип к верху!"
}
// Большой блок текста снизу, чтобы гарантировать появление скролла
Panel(class="scroll-spacer") {
Text "Item 1: Лорем ипсум долор сит амет..."
Text "Item 2: Консектетур адипискинг элит."
Text "Item 3: Сед до эйусмод темпор."
Text "Item 4: Инсидидунт ут лаборе."
Text "Item 5: Долоре магна аликва."
Text "Item 6: Ут enim ад миним veniam."
Text "Item 7: Квис нострум экзерситатион."
Text "Item 8: Уллаmко лаборис ниси ут."
Text "Item 9: Аликип экс иа коммодо."
Text "— Конец тестового контента —"
}
}
}

432
examples/glt/main.glts Normal file
View File

@@ -0,0 +1,432 @@
// =============================================================================
// Glint Design System — Core Fixed Stylesheet (main.glts)
// =============================================================================
$bg-app = #11111b
$bg-panel = #1e1e2e
$bg-surface = #313244
$bg-input = #181825
$accent = #b4befe
$text-main = #cdd6f4
$text-muted = #9399b2
$border-glow = #45475a
@mixin text-body {
font-size: 14px
}
@mixin standard-card {
background: $bg-panel
border-color: $border-glow
border-width: 1px
border-radius: 12px
}
Window {
background: $bg-app
}
Panel {
background: transparent
border-width: 0px
padding: 0px
gap: 12px
direction: vertical
}
.ui-card {
@use standard-card
padding: 14px
gap: 12px
align-items: center
content-align: center
}
// ── Служебные Layout-классы ──────────────────────────────────────────────────
.layout-viewport {
width: fill
padding: 16px
gap: 16px
}
.layout-row {
direction: horizontal
gap: 16px
}
.layout-col {
direction: vertical
gap: 16px
}
.layout-clean {
width: fill
}
// ── Стили атомарных компонентов ──────────────────────────────────────────────
Header {
color: $accent
font-size: 20px
padding: 2px
}
Text {
@use text-body
}
Label {
color: $text-muted
font-size: 12px
}
Input {
background-color: $bg-input
color: $text-main
font-size: 14px
padding: 10px
border-radius: 8px
border-width: 1px
border-color: $border-glow
width: 240px
}
Toggle {
color: $text-main
font-size: 14px
}
Divider {
background: $border-glow
border-width: 1px
}
Button {
border-radius: 6px
border-width: 1px
padding: 8px
}
.btn-custom {
background: #000000
}
Image {
border-radius: 8px
border-width: 1px
}
// ── Секция тестирования продвинутой геометрии Box-Model ──────────────────────
.geometry-box {
@use standard-card
background: #24253a
border-color: #f38ba8
border-width: 2px
padding-top: 24px
padding-bottom: 12px
padding-left: 16px
padding-right: 40px
width: 320px
}
.margin-test-item {
background: #a6e3a1
padding: 8px
margin-top: 12px
margin-bottom: 4px
}
// ── Секция тестирования каскадного наследования (Inheritance) ────────────────
.inheritance-box {
@use standard-card
background: #181825
padding: 12px
color: #f9e2af
font-size: 18px
}
.override-style {
color: #f38ba8
font-size: 12px
}
// ── Секция распределения весов Flex-Grow (Fill portions) ────────────────────
.flex-row-bar {
background: $bg-surface
direction: horizontal
padding: 8px
gap: 8px
width: fill
}
.fill-10 {
background: #f38ba8
width: 10%
}
.fixed-120 {
background: #f9e2af
width: 50px
color: #11111b
}
.fill-20 {
background: #a6e3a1
width: 20%
color: #11111b
}
// ── СТИЛИ ДЛЯ ПРОВЕРКИ POSITION: FIXED ───────────────────────────────────────
.fixed-toast {
position: fixed
top: 20px
right: 20px
background: #a6e3a1
border-radius: 8px
padding: 12px
border-width: 1px
border-color: #a6e3a1
color: #000
font-weight: bold
}
.btn-close {
background: transparen
border-width: 0px
padding: 2px
}
.scroll-test-box {
@use standard-card
background: #313244
height: 150px
width: 250px
overflow-y: scroll
padding: 10px
}
// ── Стили для тестирования Sticky Эффекта ────────────────────
.sticky-container {
@use standard-card
background: #181825
padding: 12px
gap: 8px
width: fill
height: 200px
overflow-y: scroll
}
.sticky-header {
position: sticky
top: 0px
background: #fab387
padding: 10px 14px
border-radius: 6px
color: #11111b
font-weight: bold
font-size: 14px
width: fill
}
.scroll-spacer {
gap: 100px
padding: 10px
width: fill
}
// ── Стили для тестирования Opacity ────────────────────────────
.opacity-fade {
background: #f38ba8
padding: 12px
border-radius: 8px
opacity: 0.3
}
.opacity-mid {
background: #a6e3a1
padding: 12px
border-radius: 8px
opacity: 0.6
}
.opacity-subtle {
background: #89b4fa
padding: 12px
border-radius: 8px
opacity: 0.85
}
// ── Стили для тестирования Font-Weight ─────────────────────────
.fw-light {
font-weight: 300
color: $text-main
}
.fw-normal {
font-weight: 400
color: $text-main
}
.fw-bold {
font-weight: 700
color: $text-main
}
.fw-black {
font-weight: 900
color: $text-main
}
// ── Стили для тестирования Text-Align ──────────────────────────
.ta-box {
background: #313244
padding: 8px
border-radius: 6px
width: fill
}
.ta-left {
text-align: left
}
.ta-center {
text-align: center
}
.ta-right {
text-align: right
}
// ── Стили для тестирования Line-Height ─────────────────────────
.lh-box {
background: #313244
padding: 8px
border-radius: 6px
width: 300px
}
.lh-tight {
line-height: 0.8
}
.lh-normal {
line-height: 1.2
}
.lh-loose {
line-height: 2.0
}
// ── Стили для тестирования селекторов через запятую ────────────
.warning-text, .error-text {
font-weight: bold
padding: 8px
border-radius: 6px
}
.warning-text {
color: #f9e2af
background: #3d3520
}
.error-text {
color: #f38ba8
background: #3d2020
}
// ── Стили для тестирования Display: None ───────────────────────
.hidden-box {
background: #f38ba8
padding: 12px
border-radius: 8px
display: none
}
.test-section-header {
color: $accent
font-size: 16px
padding: 4px 0
margin-top: 8px
}
.test-row {
direction: horizontal
gap: 12px
align-items: center
}
// ── Стили для тестирования POSITION: ABSOLUTE ────────────────
.abs-demo-container {
position: relative
background: #313244
padding: 16px
margin-top: 8px
border-radius: 8px
width: fill
gap: 8px
min-height: 60px
}
.abs-demo-badge {
position: absolute
top: 10px
right: 4px
background: #f38ba8
color: #11111b
font-weight: bold
font-size: 10px
padding: 4px 8px
border-radius: 4px
}
// ── Полноценная демка absolute-позиционирования ──────────────
.absolute-demo-section {
@use standard-card
background: #181825
padding: 12px
gap: 8px
width: fill
}
.abs-stage {
position: relative
background: #24253a
border-color: $accent
border-width: 1px
border-radius: 8px
padding: 16px
gap: 6px
width: fill
min-height: 80px
}
.abs-overlay {
position: absolute
top: 10px
right: 10px
background: #f38ba8
border-radius: 6px
padding: 8px 12px
color: #11111b
font-weight: bold
font-size: 12px
gap: 4px
}