Skip to main content

11 — Frontend Glossary

Scope: Alphabetical reference of the terms that appear repeatedly across the frontend specs. If a term is on the platform glossary, the frontend definition refines or specialises it; otherwise the term is FE-specific.

A​

  • Aggregate (FE) — A bounded slice of state managed by a single React Query key family or a single Zustand slice. Mutations invalidate within the aggregate, not across.
  • AI provenance — Metadata attached to any AI-generated artifact: model id, prompt template id, decision id, reviewer (if accepted). Rendered next to AI suggestions; never hidden.
  • App shell — The static, instantly cached part of a web app (HTML / JS / fonts / token CSS) served via service worker for sub-second cold loads.
  • Assistive surface — A UI region rendered by an AI model (concierge chat, operator copilot, owner insight). Always rendered behind an explicit accept/reject UI; never auto-mutates state.

B​

  • BFF — Backend-for-Frontend. We have three: bff-consumer-service, bff-tenant-booking-service, bff-backoffice-service. App code only calls its assigned BFF.
  • Block (in page builder) — A reusable, theme-aware composition of primitives + content (Hero, RoomGrid, GalleryCarousel, FAQ, ...). Defined by BlockSpec. See 07-block-and-page-builder-spec.md.
  • Booking draft — A persisted partial booking before payment / confirmation. Owned by bff-tenant-booking-service; mirrored in client Zustand for resilient UX.
  • Bootstrap — The first call into a tenant (GET /bootstrap) that returns theme tokens + flow config + content blocks + locale packs in one payload. SSR-injected on web; React-context on mobile.

C​

  • Cash-on-arrival — A first-class payment radio. Selecting it does not call payment-intent; it advances directly to confirm. Renders identically to other payment radios.
  • Composer — Generic name for an AI surface that drafts text / artifacts (operator-copilot reply composer; concierge composer).
  • Content block — Tenant-authored, theme-aware content rendered into a layout slot. Backed by theme-config-service.
  • Control plane — The cross-tenant super-admin web app. Distinct from operator desktop (which is in-tenant).

D​

  • Density mode — cozy (guest), comfortable (operator default), compact (power users). Affects spacing tokens, font sizes, list-row heights.
  • DPoP — Demonstrating Proof-of-Possession; the auth scheme used by desktop / kiosk for token-binding.

E​

  • EAS Update — Expo Application Services OTA mechanism for shipping JS-only patches without store review. JS-only.
  • Embed widget — Drop-in JS snippet for tenant external sites (WordPress / Wix) that hosts a booking funnel inline.

F​

  • Funnel step — Each step in a multi-step flow (booking, check-in, ...) emits funnel.step telemetry with step and result properties.

G​

  • Guest Portal — The authenticated web surface at <tenant>.melmastoon.app/manage for mid-stay / post-stay self-service.

H​

  • Handoff — The transition from Consumer Meta Web (pre-tenant) into Tenant Booking Web (in-tenant) via a signed token (POST /handoff/{tenant}/{property} -> POST /handoff/consume).
  • HITL — Human-In-The-Loop. The default posture for any AI surface that affects guest-facing state.
  • Hold-expiry — TTL on a held room reservation. UI runs a countdown; warns at T-60s; surfaces re-quote at T-0.
  • HK board — Housekeeping board, the Kanban-style operator view for room status.

I​

  • Idempotency-Key — X-Idempotency-Key header (ULID) on every state-changing request. Reused on retry; never regenerated within a single attempt.
  • In-tenant — Inside a single tenant's brand/theme/flow context. See also: pre-tenant.

K​

  • Kiosk shell — One of three Electron sub-modes: self-checkin, housekeeping, arrivals-board. Same Electron app; different boot config and chrome.

L​

  • Local AI — On-device inference via WebGPU/WASM (web) or ONNX Runtime Node (desktop). Concrete examples: smart-reply suggestions, anomaly summarisation. Cloud fallback when local unavailable or model too large.
  • Locale pack — Per-tenant override bundle for messages, numerals, calendar preferences, currency display.
  • Logical CSS — Direction-aware properties (padding-inline-start, etc.). Required everywhere in shared code.

M​

  • MFS — Mobile Financial Services (e.g. Easypaisa, JazzCash, M-Paisa). First-class payment radio in regions where supported.
  • MMKV — react-native-mmkv, the synchronous encrypted KV store used as the React Query persister and booking-draft store on mobile.
  • MRZ — Machine-Readable Zone on passports. Scanned via on-device camera (mobile / kiosk) or USB scanner (desktop).

O​

  • Outbox (desktop) — The local SQLite table where pending mutations live until the sync worker successfully pushes them.

P​

  • Page builder — The control-plane UI for composing tenant booking site pages from BlockSpec instances. See 07-block-and-page-builder-spec.md.
  • PII — Personally Identifiable Information. Never sent to telemetry; lives only in domain calls (PATCH /draft/{id}).
  • Pre-tenant — Before tenant resolution; uses platform-default tokens; no tenant theme.
  • Primitive — A non-composed component in @ghasi/ui-melmastoon (Button, Input, Card, ...). Composed components are "domain components".
  • Provenance card — UI element rendering AI provenance for a generated artifact.

Q​

  • Quote — A priced, time-bounded offer for a room/dates/occupancy. Returned by POST /quote. Becomes a hold on POST /hold.

R​

  • React Query key — Conventional shape: ['<bff>.<version>', '<resource>', <ids...>, <params>]. Mutations invalidate by prefix.
  • Reduced motion — System setting respected via prefers-reduced-motion (web) / Reduce Motion (mobile). Animations collapse to opacity fades.
  • RTL toolkit — The set of helpers (<BidiText>, logical-CSS Tailwind utilities, mirrored-icon manifest) provided by @ghasi/ui-melmastoon for directionally-correct rendering.

S​

  • Save-Data — HTTP request header signalling user data-saver preference. Web reduces image sizes, drops hero video, switches to lower-fidelity map tiles when set.
  • Screen graph (mobile) — The React Navigation tree for the mobile app: RootStack -> BootstrapStack / MainTabs / BookingStack.
  • Sitemap (web) — The route table per app, with BFF calls and cacheability per route.
  • SSR — Server-Side Rendering. Used for Next.js App Router pages requiring SEO + first-paint speed; tenant theme is SSR-injected to avoid hydration flicker.
  • Sync engine — The desktop component that pulls / pushes against bff-backoffice-service /sync/v1/*. Owns the outbox and conflict resolution.

T​

  • Tenant — A single hospitality operator account. The basic isolation unit.
  • Theme version — A published, immutable bundle of tokens + layout selections + content blocks + flow config. Owned by theme-config-service.
  • Token — A semantic design value (--color-primary, --space-3, ...). Theme tokens drive Tailwind utilities; raw hex / arbitrary fonts in app code are linted out.

U​

  • ULID — Universally Unique Lexicographically Sortable Identifier. Format used for X-Idempotency-Key and most ids in client mutations.

V​

  • Visual regression — Chromatic (web) / Loki (RN). Per-story snapshots per locale (incl. RTL); zero unreviewed diffs is a merge gate.

W​

  • Web Vitals — LCP / INP / CLS / TTFB. Reported via web-vitals package -> BFF telemetry endpoint -> Cloud Monitoring.

X​

  • X-Tenant-Id — Header carrying the resolved tenant id on authenticated calls. Mismatch is rejected at BFF.

Z​

  • Zustand — The client-state library used across web / mobile / desktop renderers. Persist middleware for the booking-draft slice.

References​