* Escape HTML special characters to prevent XSS. * @param {string} str * @returns {string}

* Merge data into a top-level section of the global state. * @param {string} section - Key in the state object (e.g. 'order', 'menu', 'loading') * @

* Calculate the order total from the selected size price plus any * customization price adjustments. Displays the result in #order-total. * @returns

* Escape a string for use in an HTML attribute value. * @param {string} str * @returns {string}

* Build a single detail row (dt/dd pair). * @param {string} label * @param {string} value * @returns {string} HTML string

* Look up a product in FALLBACK_MENU by its id. * @param {string} productId * @returns {CoffeeMenuItem|undefined}

* Removes skeleton loading placeholders from the given container. * @param {string} containerId - The id of the container element.

* Generic fetch wrapper with timeout and console logging. * * @param {string} url - Request URL * @param {RequestInit} [options={}] - Fetch options

* Removes error messages from the given container. * @param {string} containerId - The id of the container element.

* Shows an error message with a retry button inside the given container. * Uses a Lucide-style alert-circle SVG icon. * @param {string} containerId

* Render a success or failure card inside #order-result. * @param {object} result - Response object (success: has id; failure: has message) * @para

* Shows a skeleton loading placeholder inside the given container. * Creates 3 animated pulse bars styled with design system colors. * @param {strin

* Toggle expanded/collapsed state of a menu card. * @param {HTMLElement} cardElement - The card article element

* Rebuild the #customizations container with controls matching * the selected product's customization definitions. * @param {string} productId

* Rebuild the #size <select> options based on the given product. * Espresso gets Single / Double; everything else gets Short–Venti. * @param {string

* Bind hover effects to each BC box. * On hover: increase border opacity and add a subtle glow via box-shadow. * @param {Array} boundedContexts - Ar

* Build HTML for an arrow connector between two BC boxes. * Shows right arrow on desktop, down arrow on mobile. * @param {Object} flow - Event flow

* Build HTML for a single Bounded Context box. * @param {Object} bc - Bounded context config object * @returns {string} HTML string

* Build the expanded detail section HTML (recipe + customizations). * @param {object} recipe - {espressoShots, milkMl, waterMl, foam?} * @param {Arr

* Build a short recipe preview line for the collapsed card view. * @param {object} recipe - {espressoShots, milkMl, waterMl, foam?} * @returns {stri

* Build HTML for the return flow indicator (Inventory → Orders). * Shown as a curved path below the main diagram row. * @param {Object} flow - Event

* Build HTML for size options display. * @param {Array} sizes - Array of {size, ml, price} * @returns {string} HTML string

* Create a single inventory card element. * @param {InventoryItem} item - {id, name, unit, current, max, image?} * @returns {HTMLElement} The card e

* Create a single menu card element for a CoffeeMenuItem. * @param {CoffeeMenuItem} item - Menu item data * @returns {HTMLElement} The card element

* Create a new order via the Orders Service. * * @param {object} orderData - Order payload * @returns {Promise<object>} Parsed JSON response * @th

* Fetch the coffee menu from the Coffee Service. * Falls back to FALLBACK_MENU on any failure. * * @returns {Promise<CoffeeMenuItem[]>} Menu items

* Fetch inventory levels from the Inventory Service. * Falls back to FALLBACK_INVENTORY on any failure. * * @returns {Promise<InventoryItem[]>} Inv

* Return the currently selected product id from the #product select. * @returns {string}

* Initialize the architecture diagram. * Clears the placeholder in #architecture-diagram and builds * an interactive HTML-based DDD architecture dia

* Initialize Hero section entrance effects. * Adds a staggered fade-in + translateY animation to the h1, subtitle, and CTA. * Skips animation entire

* Initialize navigation behavior. * Binds smooth scrolling, scroll-based active highlighting, and mobile menu toggle.

* Initialise the order form by wiring up event listeners and * populating default values for size, customizations, and total.

Alert-triangle icon (low stock warning badge)

Check-circle icon (sufficient stock badge)

Package icon (fallback when no image is available)

Package icon as inline string (used in onerror fallback for images)

* Load inventory data from the Inventory Service and render the dashboard. * Shows skeleton while loading, error state with retry on failure.

* Load inventory data with error isolation.

* Load menu data from the Coffee Service and render cards. * Shows skeleton while loading, error state with retry on failure.

* Load menu data with error isolation.

Beaker/flask icon (used for recipe details heading)

Chevron-down icon (used for expand indicator)

Coffee/bean icon (used for espresso shots)