@ti-engine/web-framework 1.20.0 → 1.21.0

package/CHANGELOG.md

@@ -2,6 +2,49 @@
 
 This document will contain the list of changes made to the framework. The format is based on the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification.
 
+## Version 1.21.0
+
+Two read-only screens the framework now provides for every consumer: **Profile** — which has been a registered
+fragment rendering a two-line placeholder since the shell was written — and a new **About**, so a running instance
+can finally answer "which build is this?" without shell access. Both are the same kind of screen (facts, grouped
+into labelled sections), so the framework owns the screen — fragment, Alpine component, CSS — and an application
+supplies only the content, through two virtual descriptor methods. Design record:
+`docs/superpowers/specs/2026-08-13-profile-and-about-screens-design.md` (CA-99).
+
+* feat(web-application): add `getProfileInfo( session )` and `getApplicationInfo( session )` — virtual methods
+  returning a display-ready `{ identity, sections }` descriptor, dispatched from `processDataRequest` for the
+  `profile` and `about` views. A subclass overrides one or both and inherits the entire screen. Every string in a
+  descriptor is resolved server-side, where the session language and the label catalogue are
+* feat(application-info): new `#application-info` module — the pure `buildApplicationInfo()` normalizes a
+  `package.json`-shaped manifest (display name derived from the package name, author contact stripped, a `git+…​.git`
+  repository URL reduced to a browser-openable homepage) and applies the `TI_WEB_APP_NAME` / `TI_WEB_APP_VERSION` /
+  `TI_WEB_APP_RELEASE_DATE` overrides; `readApplicationManifest()` is the one impure half and returns `{}` rather
+  than throwing, so a missing or malformed manifest cannot take a request down
+* feat(web-application): register the `about` fragment, and add `buildComponentsConfig( session )` supplying a
+  default sidebar user menu (Profile · About · sign-out) so a consuming application gets a working user menu without
+  configuring one
+* feat(static): new `frame-about.html` and a rebuilt `frame-profile.html` — content-free renderers over the
+  descriptor — plus the `tiScreenProfile` / `tiScreenAbout` Alpine components. The About screen's release, component
+  and runtime sections are assembled client-side, where `getLabel` takes a fallback, which is what keeps them
+  readable inside an application that loads only its own label catalogue
+* feat(static): add the reusable `.ti-identity-*` / `.ti-info-*` CSS primitives (identity header with avatar or app
+  mark, and the two-up grid of label/value sections), plus `.ti-kv-value.mono` / `.mono`-and-`.muted` modifiers
+* feat(localization): add `interface.profile.*`, `interface.about.*`, `interface.topbar.profile|about` and
+  `interface.user-menu.*` defaults in en/bg
+* fix(web-application): a framework-owned screen that resolves its own strings server-side would render the
+  not-found placeholder inside a consuming application, because an application configures exactly one labels path —
+  its own — and never loads `web-server-labels.json`. Every such lookup now passes a readable English literal as the
+  `getLabel` fallback added in `@ti-engine/core` 1.10.0 (**requires it**), rather than comparing the result against
+  a hard-coded copy of core's placeholder string
+* build(release): bump package version from `1.20.1` to `1.21.0`
+
+## Version 1.20.1
+
+* fix(types): emit `/// <reference types="node" />` into `web-server.d.ts`, which names `node:http`.
+  Without it a consumer who has not separately configured Node's types gets `TS2591` from inside the
+  published declarations. See `@ti-engine/core` 1.9.1 for why the 1.20.0 gate did not catch this
+* build(release): bump package version from `1.20.0` to `1.20.1`
+
 ## Version 1.20.0
 
 TypeScript declarations now ship with the package, verified against a consumer type-checking with `skipLibCheck: false`

package/bin/localization/web-server-labels.json

@@ -23,6 +23,166 @@
           "bg": "Потребител"
         }
       }
+    },
+    "topbar": {
+      "profile": {
+        "en": "My Profile",
+        "bg": "Моят профил"
+      },
+      "about": {
+        "en": "About",
+        "bg": "Информация"
+      }
+    },
+    "user-menu": {
+      "profile": {
+        "en": "Your profile",
+        "bg": "Вашият профил"
+      },
+      "about": {
+        "en": "About",
+        "bg": "Информация"
+      },
+      "logout": {
+        "en": "Logout",
+        "bg": "Изход"
+      }
+    },
+    "profile": {
+      "eyebrow": {
+        "en": "Account",
+        "bg": "Профил"
+      },
+      "title": {
+        "en": "My Profile",
+        "bg": "Моят профил"
+      },
+      "intro": {
+        "en": "Your information as it is recorded in the system. This screen is read-only — to have something corrected, contact your manager.",
+        "bg": "Вашата информация, както е записана в системата. Екранът е само за преглед — за корекция се обърнете към вашия мениджър."
+      },
+      "empty-title": {
+        "en": "Profile unavailable",
+        "bg": "Профилът е недостъпен"
+      },
+      "empty-desc": {
+        "en": "Your profile information could not be loaded. Try again in a moment.",
+        "bg": "Информацията за профила не можа да бъде заредена. Опитайте отново след малко."
+      },
+      "section-account": {
+        "en": "Account",
+        "bg": "Профил"
+      },
+      "section-access": {
+        "en": "Access",
+        "bg": "Достъп"
+      },
+      "field-name": {
+        "en": "Full name",
+        "bg": "Име"
+      },
+      "field-username": {
+        "en": "Username",
+        "bg": "Потребител"
+      },
+      "field-email": {
+        "en": "E-mail",
+        "bg": "Имейл"
+      },
+      "field-user-id": {
+        "en": "User ID",
+        "bg": "Потребителски ID"
+      },
+      "field-language": {
+        "en": "Language",
+        "bg": "Език"
+      },
+      "field-roles": {
+        "en": "Roles",
+        "bg": "Роли"
+      }
+    },
+    "about": {
+      "eyebrow": {
+        "en": "Application",
+        "bg": "Приложение"
+      },
+      "title": {
+        "en": "About",
+        "bg": "Информация"
+      },
+      "intro": {
+        "en": "The application you are running, the release it is built from, and the ti-engine components behind it.",
+        "bg": "Приложението, което използвате, версията, от която е изградено, и компонентите на ti-engine зад него."
+      },
+      "empty-title": {
+        "en": "Details unavailable",
+        "bg": "Информацията е недостъпна"
+      },
+      "empty-desc": {
+        "en": "The application details could not be loaded. Try again in a moment.",
+        "bg": "Информацията за приложението не можа да бъде заредена. Опитайте отново след малко."
+      },
+      "released": {
+        "en": "Released",
+        "bg": "Издадена на"
+      },
+      "section-release": {
+        "en": "Release",
+        "bg": "Версия"
+      },
+      "section-components": {
+        "en": "Framework components",
+        "bg": "Компоненти на платформата"
+      },
+      "section-components-desc": {
+        "en": "The ti-engine packages this application is built on.",
+        "bg": "Пакетите на ti-engine, върху които е изградено приложението."
+      },
+      "section-runtime": {
+        "en": "Runtime",
+        "bg": "Среда"
+      },
+      "section-runtime-desc": {
+        "en": "Visible to administrators only.",
+        "bg": "Видимо само за администратори."
+      },
+      "field-version": {
+        "en": "Version",
+        "bg": "Версия"
+      },
+      "field-release-date": {
+        "en": "Release date",
+        "bg": "Дата на издаване"
+      },
+      "field-license": {
+        "en": "License",
+        "bg": "Лиценз"
+      },
+      "field-author": {
+        "en": "Author",
+        "bg": "Автор"
+      },
+      "field-package": {
+        "en": "Package",
+        "bg": "Пакет"
+      },
+      "field-homepage": {
+        "en": "Homepage",
+        "bg": "Уебсайт"
+      },
+      "runtime-node": {
+        "en": "Node.js",
+        "bg": "Node.js"
+      },
+      "runtime-platform": {
+        "en": "Platform",
+        "bg": "Платформа"
+      },
+      "runtime-application": {
+        "en": "Application ID",
+        "bg": "ID на приложението"
+      }
     }
   }
-}
+}

package/bin/static/fragments/components/component-sidebar.html

@@ -29,5 +29,30 @@
             </span>
             <span class="ti-sidebar-item-label" x-text="theme === 'daylight' ? 'Glass Theme' : 'Daylight Theme'">Toggle Theme</span>
         </button>
+
+        <!--
+            User menu. Its entries come from `componentsConfig.userProfileMenu` in the /app/config payload, which
+            TiWebAppManager#buildComponentsConfig fills with the framework's own screens (Profile, About) plus
+            sign-out — so this menu works in a consuming application that configures nothing.
+        -->
+        <ti-component-sidebar-flyout-placeholder config-key="userProfileMenu">
+            <button class="ti-sidebar-user" type="button"
+                    x-on:click.stop="toggle()"
+                    x-on:ti-close-all-flyout="close()"
+                    x-bind:aria-expanded="isOpen"
+                    x-bind:aria-controls="$id( 'component-flyout' )"
+                    x-ref="flyoutButton"
+                    x-text-label:data-tip="interface.topbar.user-profile"
+                    data-tip="Your profile">
+                <span class="ti-avatar sm"
+                      x-bind:style="$store.tiToolbox.generateAvatarStyle( $store.tiApplication.user && $store.tiApplication.user.userID, $store.tiApplication.user && $store.tiApplication.user.name )"
+                      aria-hidden="true"
+                      x-text="( ( $store.tiApplication.user && $store.tiApplication.user.name ) || '?' ).charAt( 0 ).toUpperCase()">?</span>
+                <span class="ti-sidebar-user-text">
+                    <span class="ti-sidebar-user-name" x-text="( $store.tiApplication.user && $store.tiApplication.user.name ) || ''"></span>
+                    <span class="ti-sidebar-user-sub" x-text="( $store.tiApplication.user && $store.tiApplication.user.email ) || ''"></span>
+                </span>
+            </button>
+        </ti-component-sidebar-flyout-placeholder>
     </div>
 </nav>

package/bin/static/fragments/frame-about.html

@@ -0,0 +1,96 @@
+<!--
+    About screen — what this application is and which build of it you are looking at.
+
+    Like the Profile screen, this is a content-free renderer over a server descriptor: the identity block comes
+    from the top-level fields of TiWebAppManager#getApplicationInfo, and everything below it is the normalized
+    section list tiScreenAbout assembles (release facts, ti-engine component versions, admin-only runtime facts,
+    then whatever sections the application contributed).
+
+    Alpine runs in CSP mode: no inline style attributes and no optional chaining in expressions.
+-->
+<div class="ti-page" x-data="tiScreenAbout">
+
+    <div class="ti-page-head">
+        <div class="ti-page-eyebrow" x-text-label="interface.about.eyebrow">Application</div>
+        <h1 class="ti-page-title" x-text-label="interface.about.title">About</h1>
+        <p class="ti-page-subtitle" x-text-label="interface.about.intro">The application you are running, the release
+            it is built from, and the ti-engine components behind it.</p>
+    </div>
+
+    <template x-if="!busy && !application">
+        <div class="ti-panel">
+            <div class="ti-empty-state">
+                <div class="ti-empty-state-icon" aria-hidden="true">
+                    <span class="ti-icon info-circle xl"></span>
+                </div>
+                <div class="ti-empty-state-title" x-text-label="interface.about.empty-title">Details unavailable</div>
+                <div class="ti-empty-state-desc" x-text-label="interface.about.empty-desc">The application details
+                    could not be loaded. Try again in a moment.</div>
+            </div>
+        </div>
+    </template>
+
+    <template x-if="application">
+        <div>
+
+            <!-- Identity header — app mark, name, version pill and the one-line description. -->
+            <section class="ti-panel">
+                <div class="ti-identity">
+                    <div class="ti-identity-mark" aria-hidden="true">
+                        <span x-text="applicationInitial()"></span>
+                    </div>
+                    <div class="ti-identity-meta">
+                        <div class="ti-identity-name">
+                            <span x-text="application.name"></span>
+                            <span class="ti-tag mono" x-show="application.version"
+                                  x-text="versionTag()"></span>
+                        </div>
+                        <div class="ti-identity-caption" x-show="application.description"
+                             x-text="application.description"></div>
+                    </div>
+                    <div class="ti-identity-aside">
+                        <span class="ti-status-pill muted" x-show="application.releaseDate">
+                            <span class="ti-icon calendar-blank xs" aria-hidden="true"></span>
+                            <span x-text="releaseDateText()"></span>
+                        </span>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Sections — release facts, components, runtime (admin only), then application-contributed ones. -->
+            <div class="ti-info-sections">
+                <template x-for="(section, sectionIndex) in sections" x-bind:key="sectionIndex">
+                    <section class="ti-panel ti-info-section" x-bind:class="section.wide ? 'wide' : ''">
+                        <div class="ti-panel-head bar">
+                            <div class="ti-panel-head-icon">
+                                <span class="ti-icon md" x-bind:class="section.icon" aria-hidden="true"></span>
+                            </div>
+                            <div class="ti-panel-head-text">
+                                <div class="ti-panel-title" x-text="section.title"></div>
+                                <div class="ti-panel-subtitle" x-show="section.description"
+                                     x-text="section.description"></div>
+                            </div>
+                        </div>
+                        <div class="ti-info-grid">
+                            <template x-for="(item, itemIndex) in section.items" x-bind:key="itemIndex">
+                                <div class="ti-info-item" x-bind:class="item.wide ? 'wide' : ''">
+                                    <span class="ti-kv-label" x-text="item.label"></span>
+                                    <template x-if="item.href">
+                                        <a class="ti-kv-value ti-info-link" x-bind:href="item.href"
+                                           target="_blank" rel="noopener noreferrer" x-text="item.value"></a>
+                                    </template>
+                                    <template x-if="!item.href">
+                                        <span class="ti-kv-value" x-bind:class="item.valueClass"
+                                              x-text="item.value"></span>
+                                    </template>
+                                </div>
+                            </template>
+                        </div>
+                    </section>
+                </template>
+            </div>
+
+        </div>
+    </template>
+
+</div>

package/bin/static/fragments/frame-profile.html

@@ -1,3 +1,103 @@
-<div>
-    <span>Profile</span>
-</div>
+<!--
+    Profile screen — a read-only view of the signed-in user's own information.
+
+    The markup is deliberately content-free: it renders the descriptor returned by
+    TiWebAppManager#getProfileInfo (`{ identity, sections }`), which the application overrides to decide WHAT is
+    shown while inheriting HOW it is shown. Every string in the descriptor arrives display-ready from the server,
+    so nothing here formats or translates data.
+
+    Alpine runs in CSP mode: no inline style attributes and no optional chaining in expressions — all shaping is
+    done in tiScreenProfile before the values reach the template.
+-->
+<div class="ti-page" x-data="tiScreenProfile">
+
+    <div class="ti-page-head">
+        <div class="ti-page-eyebrow" x-text-label="interface.profile.eyebrow">Account</div>
+        <h1 class="ti-page-title" x-text-label="interface.profile.title">My Profile</h1>
+        <p class="ti-page-subtitle" x-text-label="interface.profile.intro">Your information as it is recorded in the
+            system. This screen is read-only — to have something corrected, contact your manager.</p>
+    </div>
+
+    <template x-if="!busy && !profile">
+        <div class="ti-panel">
+            <div class="ti-empty-state">
+                <div class="ti-empty-state-icon" aria-hidden="true">
+                    <span class="ti-icon user xl"></span>
+                </div>
+                <div class="ti-empty-state-title" x-text-label="interface.profile.empty-title">Profile unavailable</div>
+                <div class="ti-empty-state-desc" x-text-label="interface.profile.empty-desc">Your profile information
+                    could not be loaded. Try again in a moment.</div>
+            </div>
+        </div>
+    </template>
+
+    <template x-if="profile">
+        <div>
+
+            <!-- Identity header — avatar, name, meta line and the status pills beside it. -->
+            <section class="ti-panel">
+                <div class="ti-identity">
+                    <div class="ti-avatar xl" x-bind:style="avatarStyle()" aria-hidden="true">
+                        <span x-text="avatarInitial()"></span>
+                    </div>
+                    <div class="ti-identity-meta">
+                        <div class="ti-identity-name">
+                            <span x-text="profile.identity.name"></span>
+                            <template x-if="profile.identity.badge">
+                                <span class="ti-tag" x-bind:class="profile.identity.badge.tone"
+                                      x-text="profile.identity.badge.text"></span>
+                            </template>
+                        </div>
+                        <div class="ti-identity-sub" x-show="profile.identity.subtitle"
+                             x-text="profile.identity.subtitle"></div>
+                        <div class="ti-identity-caption" x-show="profile.identity.caption"
+                             x-text="profile.identity.caption"></div>
+                    </div>
+                    <div class="ti-identity-aside">
+                        <template x-for="(tag, tagIndex) in profile.identity.tags" x-bind:key="tagIndex">
+                            <span x-bind:class="tag.pillClass">
+                                <span class="dot" x-show="tag.dot"></span>
+                                <span x-text="tag.text"></span>
+                            </span>
+                        </template>
+                    </div>
+                </div>
+            </section>
+
+            <!-- Sections — one panel per titled group of label/value pairs. -->
+            <div class="ti-info-sections">
+                <template x-for="(section, sectionIndex) in profile.sections" x-bind:key="sectionIndex">
+                    <section class="ti-panel ti-info-section" x-bind:class="section.wide ? 'wide' : ''">
+                        <div class="ti-panel-head bar">
+                            <div class="ti-panel-head-icon">
+                                <span class="ti-icon md" x-bind:class="section.icon" aria-hidden="true"></span>
+                            </div>
+                            <div class="ti-panel-head-text">
+                                <div class="ti-panel-title" x-text="section.title"></div>
+                                <div class="ti-panel-subtitle" x-show="section.description"
+                                     x-text="section.description"></div>
+                            </div>
+                        </div>
+                        <div class="ti-info-grid">
+                            <template x-for="(item, itemIndex) in section.items" x-bind:key="itemIndex">
+                                <div class="ti-info-item" x-bind:class="item.wide ? 'wide' : ''">
+                                    <span class="ti-kv-label" x-text="item.label"></span>
+                                    <template x-if="item.href">
+                                        <a class="ti-kv-value ti-info-link" x-bind:href="item.href"
+                                           target="_blank" rel="noopener noreferrer" x-text="item.value"></a>
+                                    </template>
+                                    <template x-if="!item.href">
+                                        <span class="ti-kv-value" x-bind:class="item.valueClass"
+                                              x-text="item.value"></span>
+                                    </template>
+                                </div>
+                            </template>
+                        </div>
+                    </section>
+                </template>
+            </div>
+
+        </div>
+    </template>
+
+</div>

package/bin/static/scripts/ti-framework.css

@@ -2042,6 +2042,145 @@ body {
     color: var(--fg-primary);
 }
 
+.ti-kv-value.mono {
+    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
+    font-size: var(--fs-xs);
+}
+
+/* Dimmed value — a hint, a placeholder, or a fact that is deliberately secondary. */
+.ti-kv-value.muted {
+    color: var(--fg-tertiary);
+}
+
+/* ============================================================
+   Identity header + info sections — the read-only "facts"
+   pattern behind the Profile and About screens. An application
+   supplies the content as a descriptor; this supplies the
+   layout, so every consumer's screens look the same.
+   ============================================================ */
+.ti-identity {
+    display: flex;
+    align-items: center;
+    gap: var(--s-4);
+    padding: var(--s-5);
+}
+
+/* Square brand/app mark, for an identity block that stands for an application rather than a person
+   (the circular .ti-avatar is the person case). Mirrors the sidebar brand mark at a larger size. */
+.ti-identity-mark {
+    width: 60px;
+    height: 60px;
+    display: grid;
+    place-items: center;
+    border-radius: var(--r-lg);
+    background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 70%, #000));
+    color: #FFF;
+    font-weight: 700;
+    font-size: 26px;
+    letter-spacing: -0.02em;
+    text-transform: uppercase;
+    box-shadow: 0 4px 12px color-mix(in oklab, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
+    flex: 0 0 auto;
+}
+
+.ti-identity-meta {
+    flex: 1;
+    min-width: 0;
+}
+
+.ti-identity-name {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--s-2);
+    font-size: var(--fs-2xl);
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    line-height: 1.1;
+    color: var(--fg-primary);
+}
+
+.ti-identity-sub {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px;
+    font-size: var(--fs-sm);
+    color: var(--fg-secondary);
+    margin-top: var(--s-1);
+}
+
+.ti-identity-sub-sep {
+    color: var(--fg-tertiary);
+}
+
+.ti-identity-caption {
+    font-size: var(--fs-sm);
+    color: var(--fg-tertiary);
+    margin-top: 2px;
+    overflow-wrap: anywhere;
+}
+
+/* Right-hand stack of status pills / tags. */
+.ti-identity-aside {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    gap: var(--s-1);
+    flex: 0 0 auto;
+}
+
+/* Two-up grid of section panels; a section may claim the full row with .wide. */
+.ti-info-sections {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--s-5);
+    margin-top: var(--s-5);
+    align-items: start;
+}
+
+.ti-info-section.wide {
+    grid-column: 1 / -1;
+}
+
+@media (max-width: 900px) {
+    .ti-info-sections {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Label/value pairs inside a section, stacked (label above value) rather than the side-by-side
+   rhythm of .ti-kv-grid — a read-only mirror of the .ti-form-grid a matching edit screen uses. */
+.ti-info-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--s-4);
+    padding: var(--s-5);
+}
+
+.ti-info-item {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    min-width: 0;
+}
+
+.ti-info-item.wide {
+    grid-column: 1 / -1;
+}
+
+/* An info value that is a destination rather than a fact. Only http(s)/mailto targets ever reach it — the
+   normalizer in ti-framework.js drops anything else before it can become an href. */
+.ti-info-link {
+    color: var(--accent);
+    text-decoration: none;
+    overflow-wrap: anywhere;
+}
+
+.ti-info-link:hover {
+    text-decoration: underline;
+}
+
 /* ============================================================
    Tag / pill label
    ============================================================ */