The Context Menu, is signified by the brackets ({}) in the lower right-hand corner of Shipcode. The Context Menu exposes the runtime data context available to the currently selected component. This information is vital for connecting your visual elements to dynamic data sources using FQL (Functional Query Language).

Overlay Data

• Purpose: This context is often specific to a temporary or in-focus UI element.
• Characteristics:
• • It provides the unique ID and other specific metadata for the component currently in a contextual state.
  • Examples include an open Accordion, a displaying Modal, or a popover.
  • This data is essential when building complex interactions that reference the element which initiated them.

Route Data

• Purpose: The data model associated with the application’s current Route.
• Characteristics:
• • It includes information derived from the URL structure, such as path parameters.
  • This is how you retrieve the necessary information to render a specific screen, such as a product ID from the URL /products/{id} to fetch and display the correct item.

GlobalState

• Purpose: This exposes values that define the application's overall state, which is accessible from any screen or Layout.
• Characteristics:
• • Flows are commonly used to set and update the values in GlobalState.
  • It allows for data persistence and communication across different parts of the application, serving as the application-wide state management layer.

DeviceInfo

• Purpose: To inform responsive designs and conditionally render components based on the user's viewing environment.
• Characteristics:
• • Provides metadata about the user's viewing device.
  • Includes data such as the operating system and device type.

WindowDimensions

• Purpose: To inform responsive designs and conditionally render components based on the available screen space.
• Characteristics:
• • Provides real-time dimensions of the viewport.
  • Includes data such as the current screen width and height.

EnvironmentalVariables

• Purpose: Exposes configuration values that differ based on the deployment or preview Environment (e.g., Draft, Staging, Production).
• Characteristics:
• • This data is crucial for managing external connections, such as API keys or base URLs.
  • It allows these values to be managed in a single location without having to change the code when promoting a Version.

Themes

• Purpose: To verify the inherited styling available for a component.
• Characteristics:
• • This displays the currently active Theme variables.
  • Includes design tokens such as colors, fonts, and spacing, providing a single source of truth for design language.

Local Component Context

When you select a nested component that is contained within an intelligent wrapper or a data-aware component—such as an Accordion or a Data Zone—the Context Menu expands to include the wrapper component itself. This new option allows the inner component to access data specifically defined or managed by its parent.

This is distinct from the primary Context Menu options because those are all System-Level Data Zones (like GlobalState or Route Data). The Accordion option is a Local Component Data Zone.

Purpose of the Local Component Context

The local component option, in this case Accordion, provides the nested View component with access to variables or state that are unique to the parent Accordion instance.

• Accordion State: An Accordion is an interactive component. It has a state that tracks whether it is currently expanded or collapsed.
• Item-Specific Data: If the Accordion is a repeating structure (for instance, showing a list of FAQ items), the Accordion option exposes the data object for the single, specific item you have currently selected.

Conceptual Deep Dive: Local Scoping

When a component is listed in the Context Menu, it means that component is now a source of dynamic data that can be bound to the selected element.

• Parent-Child Data Flow: The parent Accordion component is controlling or defining the context for all its children. By selecting the nested View, you are asking, "What data can this View component see?" The answer is the system-level data plus the Accordion's local data.
• Enabling Interaction: You would use this Accordion context to apply logic to the nested View. For example, you might use an FQL expression on the View component's style property to say: "Only display this View if the Accordion is expanded." This creates the collapse-and-expand interaction.

This feature allows for highly modular and reusable component logic, ensuring that nested elements only reference the specific data associated with their immediate parent container.