Main and Sandbox secure Contexts

Written for AI agents. See Log Methodology Note below for details.

This design log captures the modeling of the Context as in Content API used to derive the communication between the main and sandbox environments.

We denote in this section

• Context - the Context API
• main environment - the main running context, as the main window, running elements
• sandbox environment - the secure running context, as worker or iframe, running components

the problem

The problem to solve is the mapping of

[1] (component bridge in main.compId) === (element bridge in sandbox.compId).

To derive this identity, we use the positional relation to create a mapping

[2] (parent comp.compId + coordinate) ==> (comp.compId)

Once the mapping [2] is created, we communicate the mapping between environments to ensure the same the first identity [1] above.

It is important to note that [2] happens in both environments

• static elements and components are first created in the main environment
• dynamic elements and components (children of forEach) are first created in the sandbox environment

Creating the mapping [2] in main environment

The regular element structure (non secure) with a child component looks like

return ConstructContext.withRootContext(
  viewState,
  () =>
    e('div', {}, [
      childComp(
        Basic,
        (vs) => ({ safe: '', firstName: vs.firstName, lastName: vs.lastName }),
        'comp1',
      ),
    ]),
  options,
);

To derive the {compId, coordinate} we note that

1. the element parent component bridge has the parent compId - which can be provided as a SecureComponentContext
2. if the element is the root of the secure environment (it's parent is a regular component) we add to the element root the SecureRootMain which can provide the SecureComponentContext
3. the childComp has the coordinate of the child component within the element (the coordinate is computed by the ConstructionContext using the refName parameter)

The same running in a secure mode, in the main environment,

return ConstructContext.withRootContext(
  viewState,
  () =>
    SecureRootMain(
      e('div', {}, [
        childCompMain(
          Basic,
          (vs) => ({ safe: '', firstName: vs.firstName, lastName: vs.lastName }),
          'comp1',
        ),
      ]),
    ),
  options,
);

at which (for a component at the root of the secure environment)

  SecureRootMain                                    -- provides SecureComponentContext (compId)
  |-- element
      |-- childCompMain                             -- provides SecureCoordinateContext (coordinate)
          |-- makeJayComponentBridge                -- Consumes SecureComponentContext, SecureCoordinateContext
                                                    -- provides new SecureComponentContext (compId, endpoint)
              |-- makeJayComponent
                  |-- makeComponentBridgeConstructor

and for a child component of another component in a secure environment

  makeComponentBridgeConstructor                    -- provides SecureComponentContext
  |-- element
      |-- childCompMain                             -- provides SecureCoordinateContext
          |-- makeJayComponentBridge                -- Consumes SecureComponentContext, SecureCoordinateContext
                                                    -- provides new SecureComponentContext (compId, endpoint)
              |-- makeJayComponent
                  |-- makeComponentBridgeConstructor

Creating the mapping [2] in sandbox environment

  workerRoot                                        -- provides SandboxComponentContext
  | -- workerChildComp                              -- provides SandboxCoordinateContext
       | -- makeJayComponent
            | -- elementBridge                      -- Consumes SecureComponentContext, SecureCoordinateContext
                                                    -- provides new SecureComponentContext (compId, endpoint)

---

Log Methodology Note

Note: These design logs are written primarily for AI agents as part of the Design Log methodology and made accessible here for human readers. The language and structure are optimized for machine consumption — expect precise, specification-style prose rather than narrative documentation.